Microsoft UI Stack Ronnie Saurenmann Technical Evangelist, Microsoft Switzerland

Which one should we use?

Web Mobile Web Hybrid Native Desktop

Familiar control and event based programming model Controls encapsulate HTML, JS and CSS Rich UI controls included: datagrids, charts, AJAX, etc…

Based on “Razor” Similar to PHP or the old ASP Single page model for markup and code No need to “build” a project. Just code and hit refresh Easy to move to ASP.NET MVC in the future

Absolute control of the HTML markup Support Unit Testing, TDD, Agile methodologies Very flexible and extensible

Great for modern web Most of the UI logic done on the client - heavy use of JS Great for AngularJS, KnockoutJS, WinJS or other JS libraries Uses Web API to expose the data to the client

One ASP.NET

Custom Tag Attributes Powerful Directives Declarative Style Strict Separation Date: {{ ' ' | date:'fullDate' }} Currency: {{ | currency }} Number: {{ | number }} <ng-pluralize count="beerCount“ when="beerForms">

WinJS in a browser (preview)

No more dedicated mobile version of your site! Mobile websites can be extremely light but they do come with the dependencies of a new code base and browser sniffing, all of which can become an obstacle for both developers and users.

Responsive web design

Native vs. Hybrid (HTML5) Apps

+high fidelity +faster +easier to develop and test +no limits +very good user acceptance -one per platform -higher cost

+cross platform +one code base +one skill set -compromise -slower -not so well accepted by end user

Use Visual Studio to easily build hybrid apps for iOS, Android, Windows and Windows Phone using a single project based on HTML and JavaScript. Uses Apache Cordova Combine it with your preferred JS library like AngularJS, BackboneJS, WinJS etc..

Hybrid app

New Visual Studio Universal Template for XAML/C#/VB/C++ & WinJS

A common, familiar programming model for universal Windows apps

Visual Studio streamlines developing universal Windows apps

Universal

Windows Phone Windows Desktop Windows Store iOS Android Native UI, Native Performance Shared Business Logic Portable Libraries Unified Skills C# /.NET Libraries One Tool Anything you can do in Objective-C and Java can be done in Xamarin

Share C# UI Code across iOS, Android, Windows Phone. using Xamarin.Forms; var profilePage = new ContentPage { Title = "Profile", Icon = "Profile.png", Content = new StackLayout { Spacing = 20, Padding = 50, VerticalOptions = LayoutOptions.Center, Children = { new Entry { Placeholder = "Username" }, new Entry { Placeholder = "Password", IsPassword = true }, new Button { Text = "Login", TextColor = Color.White, BackgroundColor = Color.FromHex("77D065") }}} }; var settingsPage = new ContentPage { Title = "Settings", Icon = "Settings.png", (...) }; var mainPage = new TabbedPage { Children = { profilePage, settingsPage } }; Mapped to Platform-Specific Native user Interface Elements

+Rich UI +Highly productive +Proven technology +Many UI controls available -Dependency on the client (e.g..NET version) -Deployment -Mobile/Touch

Best bet today is WPF Not dead, new improvements: XAML Editor Improvements in Visual Studio 2013 Debugger Improvements in.NET NET Managed Memory Analysis CPU Usage Tool, with support for WPF Memory Usage tool, now supports WPF & Win32

Visual Studio

Shop, News, Portals -> Responsive Web Streaming, Social, Games -> Native Photoshop, VS, AutoCad, Excel -> Desktop Intranet LoB -> Responsive Web Rich LoB -> Desktop or evtl Native App Mobile LoB -> Native or evtl Hybrid

Windows 8.1 – Update 1 Brokered Windows Runtime Components for side- loaded Windows Store apps Network loopback in side-loaded Windows Store apps