Workshop: Deep Dive into Modern App Design and Development
Brent Edwards, Principal Lead Consultant, Magenic
The day long track with the Modern App team is going to offer a chance to go into detail of the creation of a 'Modern App' and specifically the 'MyVote' application. To review what a Modern App is, it's a combination of mobile, web, and desktop applications across platforms that communicate using APIs exposed in the cloud. If the explanation sounds vague or incomplete it's because it's difficult to explain 'modern.' Shortest explanation might be a cross-platform, available anywhere and get data from anywhere application.
We begin by reviewing the architecture for the voting application. The CSLA.NET Business Object (open source) framework was used in the application, and for a few of the UI endpoints the BL existed on both the client and the server (identical code). The purpose for doing this is to be able to share functionality and behavior both on the client and server. For example we can validate data quickly on the client and check it again in addition to washing through additional rules on the server to make sure it's clean before being persisted to the database. The logical layering of the application is shown below and which layers share the busniess logic (image courtesy of Visual Studio LIVE! and Brent Edwards):
One interesting thing were some of the compiler directives used to differentiate which platform is currently running. These were used in the busniess logic and was a nice way to explicitly tell if we were running on the client or the server. For example the Entity Framework code for CRUD operations were inside of one of these directives thus making this code only run under the proper platform on the server. A directive example looks like the following:
#if !NETFX_CORE && !WINDOWS_PHONE
These are actually what are called 'Conditional Compilation Symbols' that are found under the 'Build' tab in the project's properties.They are pre-defined when the project is created. They can be changed, but it's best to just leave them as their default value and use as needed. The best practice on this is to create a base class with common functionality with additional abstract methods that can have platform specific implementations. Combine this approach with the compiler directives for the cleanest approach. Just simply using compiler directives could create a sea of 'if' statements which we know will lead to some intermingled spaghetti code. I have a feeling the branching on these directives will be ironed out in the years to come and we'll figure out a more unobtrusive way to declare the different platforms for segregating logic.
When building a Win8 app you have to decide which languages to develop in to create the app. The main (2) choices are C#/XAML or HTML/JS. Deciding on which languages to use might be based on the developers background. Web teams might gravitate toward HTML/JS, and WPF/Silverlight guys might choose C#/XAML. However the Windows 8 version of XAML is trimmed down a bit to what you might be used to, and on the JS side the WinJS is a bit picky and makes it more challenging to write. One important note is if you are developing for WinPhone you have to use C#/XAML as the HTML/JS route is not supported. If you want all platforms, you should go with the C#/XAML route.
A brief review of MVVM was given by Brent (this guy knows his stuff on MVVM - read his article Leveraging Windows 8 Features with MVVM for more information). Some of the high points are that it separates presentation from functionality (SoC), promotes testability (because of the former - unit testing), works great with data binding (reduces a lot of the binding code - observables), and makes it easier to collaborate with designers (like a real designer and not some developer making a UI). I'm not sure if anyone doing WPF or Win8 applications are not using MVVM, but one should absolutely use this logical architecture when selecting these technologies.
Quick Informal Poll:
How many are Windows Phone Developers: 1 person
Brent validated something I had wondered about over the years in regards to physical project organization for sharing files. Jason Bock had covered this the other day as well. The use case is when we have multiple projects that need to share a common set of files. In VS.NET, if you have a set of source code files you need to share across several projects, make sure to add them as 'linked' files as opposed to 'Add existing item -> Add.' Using add existing item will make a complete copy of the file to the secondary project. This is a bad idea especially when under source control. The better method is to use 'Add existing item -> Add as link' which creates a pointer to the original file. I've been doing this for a few years already with AssemblyInfo and SolutionInfo files, but wasn't 100% sure on mainstream practices in projects for this process. If you are adding an entire existing project, make sure to follow the same process.
Azure Mobile services was used with the mobile portions of the 'MyVote' app. The nice thing is it provided 'oAuth done easy' with (4) main options: Twitter, Facebook, Microsoft, and Google. The caveat to this is that each different login source used by the client ends up looking like a new and different user. Therefore the client should use the same (or be instructed to do so) method for login to have the same experience. However if you need domain authentication then Azure Mobile Services (and really oAuth) is not the correct route to go.
Push notifications are the ability to have the server push information or updates to the client without 1st being pinged for. Elements like Tiles, Badge, Toast notifications can alert users of new information. For those of you that are not sure what a toast notification is - think visually of the little box that pops up when you receive a message in Outlook.
You also have to consider which search features are available in you Windows 8 application. The search feature in Windows 8 allows your app to be searched from anywhere in the OS. You have to decide which portions of your app can be searched, and how to parse and return results. In the case of the 'My Vote' app, they allowed the polls to be searched. The Share target can be setup and configured from the application.
The same configuration goes for the 'Settings' charm. You don't want the user to have a huge amount of things to configure, but they should have the settings available to configure their experience. For example a simple 'Log Out' function in the settings menu.
Aidan Ryan, Lead Consultant, Magenic Technologies
The next phase focused on AngularJS with TypeScript and WebAPI for the web portion of the MyVote application. AngularJS is a complete client side framework for SPAs (Single Page Applications). By complete it literally can do everything in the form of data binding, DI, routing, services, REST client, and Promises. The ng-* directives from Angular are used to add behavior to the markup. It's maintained by Google, so odds are it can outlive a lot of the other fad JS frameworks that come and go in popularity.
Bundling and minification was reviewed and can be used in both web forms and MVC. 'Bundling' packages up all of your .js files into a single file (single HTTP request). For debugging purposes the raw files are delivered, but in production all of the files are minified removing whitespace and compacting to reduce byte size. This makes the single file being delivered to the client much more efficient. Ordering in the Bundles.Add.Include() statement does have precedence by order added characteristics, so make sure to order correctly.
The idea used here is to tap into an API exposed that can deliver data or information (i.e. WebAPI RESTful service or Azure Mobile Services) and then use a robust JS framework like AngularJS alongside of Typescript to create a complete and fully functional website. In this manner we don't even require ASP.NET (speaking about front end only) and hence one of the main objectives behind SPAs. Aiden used just a sprinkle of C# on the server in the form of custom Helpers to reduce the markup required, but if needed he could have done a purely JS implementation with the framework chosen.
One of the things I always like at these conferences is being able to not only learn but validate things big and small I'm doing on a routine basis. When Aiden was speaking to exception handling he stated that you don't typically want to handle exceptions down in the lower layers, but allow things to naturally bubble up and handle at the highest layer. This is a common practice I use myself. In ASP.NET terms that's in a custom handler for MVC apps, and in Global.asax for web forms applications.
A quick conversation revolved around 'UX Review', which is a cool site where you can submit your site and get honest feedback on your design. This is a great way to not work in a vacuum and get some constructive criticism or checkpoint with the wider community.
The last topic in the portion of this section was around SignalR. SignalR allows push/pull functionality to clients usable in an abstracted manner. The reason I say 'abstracted' is because the amount of code to do something fairly complex under the covers, is actually only a few lines of code. I really like SignalR and I'd say the (2) things I'm most interested in investigating further and using post conference are SignalR and TypeScript.
Lou Miranda, Technical Engineer, Mobility Group, Magenic Technologies
Post-lunch started out with Lou speaking to modern iOS development. Now anyone reading this blog or who knows me, knows I have enough knowledge to fit in a thimble on the topic of Apple products and development. This is a good opportunity for me to get outside my shell and learn something new.
Lou demonstrated the MyVote app as it looks on an iPad. This reoccurring theme is the one that ties back into the architecture shown at the beginning of the session. All of these different UIs are using the same back end which is the way for now we need to create modern applications.
The thing that did hit home immediately was that iOS apps being developed use the MVC architecture. Xcode is the IDE Lou used, and runs on a mac to create the application.The app project has the following organization: Project file, Assets, Views, ViewControllers, Frameworks, and AppDelagates. iOS app code is written in Objective-C which is a specific set of the C programming language.
Lou was taking us through the Xcode IDE and how the project is arranged. Like any IDE including VS.NET, Eclipse, etc. they have all the main features for project organization and development. I really like the Storyboarding feature which had a graphical display of the forms and their relationship.
I'll be honest though I wasn't going to learn a whole lot as far as being productive about developing Objective-C code using Xcode in the amount of time being presented today. Being that the room is 99% developers on the Windows stack, I'm sure the sentiment is similar. However, iOS is still a major player in the 'Modern App' era, so understanding the technology and languages not so familiar to us in current day could change quickly in the near future.
Xamarin (which unfortunately I did not see as much this week about as I would have liked - too many great sessions) will help us to only have to write C# code which will then compile natively to Android and iOS. This will reduce the need to write natively using Java and Objective-C respectively. The UI portion creation using Xamarin I unfortunately cannot speak to intelligently at this point. The other day I sat at the Xamarin table during the 'Birds of a Feather' lunch in an effort to learn more about the product especially since there is a relationship with VS.NET 2013. To my understanding Xamarin will translate even UI elements cross platform to their equivalent, but you will still need to manage the separate UI projects to customize their independent platform needs. Anyone can happily correct me on this because I'm still in the early learning stages on this technology.
Before anyone panics though, from everyone I've talked with and heard speak, there are developers on hand at companies specifically used/employed for creating these types of applications. Meaning, it would probably be the 'exception as opposed to the rule' for your boss to come over in the middle of your ASP.NET MVC or Win8 project and tell you to install Xcode to create a mission critical iOS applications. If this occurs, scrounge up some dough for Xamarin ;)
One very interesting conversation surrounded the iPad, iPad mini, iPhone, and the other array of portable devices. Testing and QA can be a challenge, but in reality some UAT does need to be done on each device to make sure it operates correctly. If you have a true designer on staff, this will be easier as they know how to develop 'contextually' to the device they are targeting. This is a nice segue into the next presenter, Anthony, that does just this - design applications.
Anthony Handley, UX Practice Lead, Magenic
Ok I wish I had the opportunity to work with a guy like Anthony (dedicated graphic designer). He is what most of us talk about wanting to have on a team, but most companies look at as a luxury. The result? Programmers turned designers creating the world of grid view black, grey, and green applications which as Billy Hollis shouted from the rooftops all week that we should not be doing.
As user's personal experiences continues to desire more stylized, rich, and touch based applications, the desire to look at something today that appears to have been done in 1998 using WinForms for VB6 will not fly anymore, or at least not be as competitive. Business productivity applications are not exempt from this issue either, as user's are becoming more sophisticated and accustomed to seeing a more polished design.
It's been a while since I used Microsoft Expression Blend + SketchFlow. Last I used it regularly was when I was doing Silverlight development and using Expression Blend 4. Now it's included with a VS.NET install; just look for the shortcut in the same folder.
SketchFlow is a great prototyping and interaction test tool for WinPhone, HTML Store Apps, WPF, and Silverlight applications. You simply drag controls onto the canvas to begin designing the application. Anthony mentioned that Rocky (Lhotka) encourages the designers to leverage the tool heavily and they should not have to write 1 line of XAML. SketchFlow actually will create the XAML from the prototype, but as he mentioned, this is typically not production ready code so be careful in turning a SketchFlow design into a production system.
You can use the tool in a more broad sense to prototype screens and mock-ups for technologies beyond XAML based applications. Anthony has actually done pixel accurate iPhone app designs using SketchFlow, so you can broaden the use of the tool if needed. Personally I have used more rudimentary yet still very useful (free) tools like Pencil to wireframe up web pages and the like.
The SketchFlow Map provides a nice graphical map of the relationship between the pages within the application. Once you've created your pages and you are actually doing a XAML based application, you can view the XAML and make tweaks if needed. The example that was created was to sketch out the screen for the MyVote application and the authentication screens.
I can only imagine how awesome it would be to work with a designer that delivers either the completed wireframes or even the full front end using a tool like this to the engineers ready to interact with for the layers below. Developers creating a UI like a designer, or attempting to master Databases like a DBA typically don't do as good of a job as dedicated (design) professionals. The result is the knowledge for the wings off app development runs too lean because we already have our plate overflowing trying to understand the massive amount of language and development features we need to know to be relevant.
There is a great book called The Pragmatic Programmer that has a great chapter on prototyping and tracer bullets that delves into these topics and there usefulness.
At the very end of the session there was a Q&A on anything from the week. A few points on Xamarin to note. You need Xamarin for Visual Studio or Xamarin Studio to help with the UI layout for Android and iOS and this is an additional IDE with a cost.
One interesting conversation surrounded around 'which technology' to use when creating new applications (the million dollar question by the way). Aiden mentioned WPF is ever present and still be used as a front runner for some of the non-touch, heavy data and analytical applications. This to me is the definition of the 'non-sexy' world which we call corporate america. However there is no '1 size fits all' technology solution, so we must asses our users, their environment, and their problem, to help us decide which technology to use.
Day 5 Wrap Up
That's it! The #Live360 Orlando 2013 conference is in the books. Another fantastic year and I'll look forward to the conference next year. I believe the main focus and theme of the event this year were 'Modern Applications' and 'Where are we going on the Microsoft Stack?' For now I think the answer to the latter is 'steady as she goes.' We'll help decide and pave the future based on the technologies the community gravitates toward combined with the needs and wants of the consumers shaping what we create.
I believe the technologies / methodologies / best practices that stuck out to me the most this week are the following:
- Modern Application Design (all points end to end)
- Parallel Design Patterns
- Entity Framework 6
- UX/UI Design Techniques in the Modern Era
I am thankful to all the great friends and professional acquaintances I made this week. Please keep in touch and to the rest reading this I'll see next year at VSLive!
Award for the biggest thanks deserved:
Award for the biggest thanks deserved:
The #Live360 staff - fantastic conference, thank you!
The Magenic Team - GREAT job on the Modern Apps Live Track. You all are the best, and see you next year!