microsoft ui stack ronnie saurenmann technical evangelist, microsoft switzerland...
TRANSCRIPT
![Page 2: Microsoft UI Stack Ronnie Saurenmann Technical Evangelist, Microsoft Switzerland ronnies@microsoft.com](https://reader035.vdocuments.us/reader035/viewer/2022062408/56649f135503460f94c2765e/html5/thumbnails/2.jpg)
Which one should we use?
WPF
JavaScriptASP.NET
XAMLWinJS
AngularJS
DirectX
jQuery
WebForms
Xamarin
Universal TemplateC++
HTML5Single Page MVC
Cordova
![Page 3: Microsoft UI Stack Ronnie Saurenmann Technical Evangelist, Microsoft Switzerland ronnies@microsoft.com](https://reader035.vdocuments.us/reader035/viewer/2022062408/56649f135503460f94c2765e/html5/thumbnails/3.jpg)
Agenda
WebMobile WebHybridNativeDesktop
![Page 4: Microsoft UI Stack Ronnie Saurenmann Technical Evangelist, Microsoft Switzerland ronnies@microsoft.com](https://reader035.vdocuments.us/reader035/viewer/2022062408/56649f135503460f94c2765e/html5/thumbnails/4.jpg)
Web+Cross platform+Easy to deploy+Very good legacy support+No client dependency other than browser+Proven technology
-Hard to test-Can be difficult to develop for multiple browsers/form factors-Slower innovation
- Needs standards first- You need the latest browser to take advantage of the innovation
![Page 5: Microsoft UI Stack Ronnie Saurenmann Technical Evangelist, Microsoft Switzerland ronnies@microsoft.com](https://reader035.vdocuments.us/reader035/viewer/2022062408/56649f135503460f94c2765e/html5/thumbnails/5.jpg)
One ASP.NET
ASP.NET
WebForm
s
Sites
WebPages
Single
PageApps
MVCWebAPI
SignalR
Services
![Page 6: Microsoft UI Stack Ronnie Saurenmann Technical Evangelist, Microsoft Switzerland ronnies@microsoft.com](https://reader035.vdocuments.us/reader035/viewer/2022062408/56649f135503460f94c2765e/html5/thumbnails/6.jpg)
ASP.NET WebForms
Familiar control and event based programming modelControls encapsulate HTML, JS and CSSRich UI controls included: datagrids, charts, AJAX, etc…
![Page 7: Microsoft UI Stack Ronnie Saurenmann Technical Evangelist, Microsoft Switzerland ronnies@microsoft.com](https://reader035.vdocuments.us/reader035/viewer/2022062408/56649f135503460f94c2765e/html5/thumbnails/7.jpg)
ASP.NET WebPages
Based on “Razor”Similar to PHP or the old ASPSingle page model for markup and codeNo need to “build” a project. Just code and hit refreshEasy to move to ASP.NET MVC in the future
![Page 8: Microsoft UI Stack Ronnie Saurenmann Technical Evangelist, Microsoft Switzerland ronnies@microsoft.com](https://reader035.vdocuments.us/reader035/viewer/2022062408/56649f135503460f94c2765e/html5/thumbnails/8.jpg)
ASP.NET MVC
Absolute control of the HTML markupSupport Unit Testing, TDD, Agile methodologiesVery flexible and extensible
![Page 9: Microsoft UI Stack Ronnie Saurenmann Technical Evangelist, Microsoft Switzerland ronnies@microsoft.com](https://reader035.vdocuments.us/reader035/viewer/2022062408/56649f135503460f94c2765e/html5/thumbnails/9.jpg)
ASP.NET Single Page
Great for modern webMost of the UI logic done on the client
- heavy use of JSGreat for AngularJS, KnockoutJS, WinJS or other JS librariesUses Web API to expose the data to the client
![Page 10: Microsoft UI Stack Ronnie Saurenmann Technical Evangelist, Microsoft Switzerland ronnies@microsoft.com](https://reader035.vdocuments.us/reader035/viewer/2022062408/56649f135503460f94c2765e/html5/thumbnails/10.jpg)
DemoOne ASP.NET
![Page 11: Microsoft UI Stack Ronnie Saurenmann Technical Evangelist, Microsoft Switzerland ronnies@microsoft.com](https://reader035.vdocuments.us/reader035/viewer/2022062408/56649f135503460f94c2765e/html5/thumbnails/11.jpg)
Custom Tag
Attributes
Powerful Directives
Declarative Style
Strict Separation
AngularJS<!doctype html> <html ng-app="app"> <body> <tabs> <pane title="Localization"> Date: {{ '2013-04-01' | date:'fullDate' }} <br> Currency: {{ 123456 | currency }} <br> Number: {{ 98765.4321 | number }} <br> </pane> <pane title="Pluralization"> <div ng-controller="BeerCounter"> <div ng-repeat="beerCount in beers"> <ng-pluralize count="beerCount“ when="beerForms"> </ng-pluralize> </div> </div> </pane> </tabs> </body></html>
![Page 12: Microsoft UI Stack Ronnie Saurenmann Technical Evangelist, Microsoft Switzerland ronnies@microsoft.com](https://reader035.vdocuments.us/reader035/viewer/2022062408/56649f135503460f94c2765e/html5/thumbnails/12.jpg)
WinJS today and tomorrow
WinJS
WinJSWinJS
WinJS
http://
![Page 13: Microsoft UI Stack Ronnie Saurenmann Technical Evangelist, Microsoft Switzerland ronnies@microsoft.com](https://reader035.vdocuments.us/reader035/viewer/2022062408/56649f135503460f94c2765e/html5/thumbnails/13.jpg)
DemoWinJS in a browser (preview)
![Page 14: Microsoft UI Stack Ronnie Saurenmann Technical Evangelist, Microsoft Switzerland ronnies@microsoft.com](https://reader035.vdocuments.us/reader035/viewer/2022062408/56649f135503460f94c2765e/html5/thumbnails/14.jpg)
What about mobile web (browser)?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.
![Page 15: Microsoft UI Stack Ronnie Saurenmann Technical Evangelist, Microsoft Switzerland ronnies@microsoft.com](https://reader035.vdocuments.us/reader035/viewer/2022062408/56649f135503460f94c2765e/html5/thumbnails/15.jpg)
Use responsive web designRelaying on CSS3, requires a modern browserBased on:• flexible layouts
float: left; width: 63.197026%; /* 340px ÷ 538px = .63197026 */
• media queries@media only screen and (orientation: portrait) {...}
• flexible mediaimg, video, canvas { max-width: 100%; }
![Page 16: Microsoft UI Stack Ronnie Saurenmann Technical Evangelist, Microsoft Switzerland ronnies@microsoft.com](https://reader035.vdocuments.us/reader035/viewer/2022062408/56649f135503460f94c2765e/html5/thumbnails/16.jpg)
DemoResponsive web design
![Page 17: Microsoft UI Stack Ronnie Saurenmann Technical Evangelist, Microsoft Switzerland ronnies@microsoft.com](https://reader035.vdocuments.us/reader035/viewer/2022062408/56649f135503460f94c2765e/html5/thumbnails/17.jpg)
What about Apps?Native vs. Hybrid (HTML5) Apps
![Page 18: Microsoft UI Stack Ronnie Saurenmann Technical Evangelist, Microsoft Switzerland ronnies@microsoft.com](https://reader035.vdocuments.us/reader035/viewer/2022062408/56649f135503460f94c2765e/html5/thumbnails/18.jpg)
Native+high fidelity+faster+easier to develop and test+no limits+very good user acceptance
-one per platform-higher cost
![Page 19: Microsoft UI Stack Ronnie Saurenmann Technical Evangelist, Microsoft Switzerland ronnies@microsoft.com](https://reader035.vdocuments.us/reader035/viewer/2022062408/56649f135503460f94c2765e/html5/thumbnails/19.jpg)
Hybrid based
+cross platform +one code base+one skill set
-compromise-slower-not so well accepted by end user
![Page 20: Microsoft UI Stack Ronnie Saurenmann Technical Evangelist, Microsoft Switzerland ronnies@microsoft.com](https://reader035.vdocuments.us/reader035/viewer/2022062408/56649f135503460f94c2765e/html5/thumbnails/20.jpg)
Multi-Device Hybrid Apps with VS 2013Use 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..
![Page 21: Microsoft UI Stack Ronnie Saurenmann Technical Evangelist, Microsoft Switzerland ronnies@microsoft.com](https://reader035.vdocuments.us/reader035/viewer/2022062408/56649f135503460f94c2765e/html5/thumbnails/21.jpg)
DemoHybrid app
![Page 22: Microsoft UI Stack Ronnie Saurenmann Technical Evangelist, Microsoft Switzerland ronnies@microsoft.com](https://reader035.vdocuments.us/reader035/viewer/2022062408/56649f135503460f94c2765e/html5/thumbnails/22.jpg)
Native Apps for Windows & PhoneNew Visual Studio Universal Template for XAML/C#/VB/C++ & WinJS
![Page 23: Microsoft UI Stack Ronnie Saurenmann Technical Evangelist, Microsoft Switzerland ronnies@microsoft.com](https://reader035.vdocuments.us/reader035/viewer/2022062408/56649f135503460f94c2765e/html5/thumbnails/23.jpg)
Windows Windows Phone
![Page 24: Microsoft UI Stack Ronnie Saurenmann Technical Evangelist, Microsoft Switzerland ronnies@microsoft.com](https://reader035.vdocuments.us/reader035/viewer/2022062408/56649f135503460f94c2765e/html5/thumbnails/24.jpg)
HTML / CSS
JavaScript
Windows Runtime
C# / VBC / C++
XAML
Input, Interaction, & Manipulation DirectX, Media, & Composition
Windows Kernel Services
A common, familiar programming model for universal Windows apps
![Page 25: Microsoft UI Stack Ronnie Saurenmann Technical Evangelist, Microsoft Switzerland ronnies@microsoft.com](https://reader035.vdocuments.us/reader035/viewer/2022062408/56649f135503460f94c2765e/html5/thumbnails/25.jpg)
Visual Studio streamlines developing universal Windows apps
Share your XAML UI!
![Page 26: Microsoft UI Stack Ronnie Saurenmann Technical Evangelist, Microsoft Switzerland ronnies@microsoft.com](https://reader035.vdocuments.us/reader035/viewer/2022062408/56649f135503460f94c2765e/html5/thumbnails/26.jpg)
DemoUniversal
![Page 27: Microsoft UI Stack Ronnie Saurenmann Technical Evangelist, Microsoft Switzerland ronnies@microsoft.com](https://reader035.vdocuments.us/reader035/viewer/2022062408/56649f135503460f94c2765e/html5/thumbnails/27.jpg)
Cross platform Native App in .NET
![Page 28: Microsoft UI Stack Ronnie Saurenmann Technical Evangelist, Microsoft Switzerland ronnies@microsoft.com](https://reader035.vdocuments.us/reader035/viewer/2022062408/56649f135503460f94c2765e/html5/thumbnails/28.jpg)
Xamarin’s Unique Approach
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
![Page 29: Microsoft UI Stack Ronnie Saurenmann Technical Evangelist, Microsoft Switzerland ronnies@microsoft.com](https://reader035.vdocuments.us/reader035/viewer/2022062408/56649f135503460f94c2765e/html5/thumbnails/29.jpg)
Xamarin 3.0: Xamarin Forms
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
![Page 30: Microsoft UI Stack Ronnie Saurenmann Technical Evangelist, Microsoft Switzerland ronnies@microsoft.com](https://reader035.vdocuments.us/reader035/viewer/2022062408/56649f135503460f94c2765e/html5/thumbnails/30.jpg)
Desktop +Rich UI+Highly productive+Proven technology+Many UI controls available
-Dependency on the client (e.g. .NET version)-Deployment-Mobile/Touch
![Page 31: Microsoft UI Stack Ronnie Saurenmann Technical Evangelist, Microsoft Switzerland ronnies@microsoft.com](https://reader035.vdocuments.us/reader035/viewer/2022062408/56649f135503460f94c2765e/html5/thumbnails/31.jpg)
DesktopBest bet today is WPFNot dead, new improvements:XAML Editor Improvements in Visual Studio 2013Debugger Improvements in .NET 4.5.1.NET Managed Memory AnalysisCPU Usage Tool, with support for WPFMemory Usage tool, now supports WPF & Win32
![Page 32: Microsoft UI Stack Ronnie Saurenmann Technical Evangelist, Microsoft Switzerland ronnies@microsoft.com](https://reader035.vdocuments.us/reader035/viewer/2022062408/56649f135503460f94c2765e/html5/thumbnails/32.jpg)
DemoVisual Studio
![Page 33: Microsoft UI Stack Ronnie Saurenmann Technical Evangelist, Microsoft Switzerland ronnies@microsoft.com](https://reader035.vdocuments.us/reader035/viewer/2022062408/56649f135503460f94c2765e/html5/thumbnails/33.jpg)
Conclusions
Shop, News, Portals -> Responsive WebStreaming, Social, Games -> NativePhotoshop, VS, AutoCad, Excel -> DesktopIntranet LoB -> Responsive WebRich LoB -> Desktop or evtl Native AppMobile LoB -> Native or evtl Hybrid
![Page 34: Microsoft UI Stack Ronnie Saurenmann Technical Evangelist, Microsoft Switzerland ronnies@microsoft.com](https://reader035.vdocuments.us/reader035/viewer/2022062408/56649f135503460f94c2765e/html5/thumbnails/34.jpg)
Let’s keep in Touch!
Microsoft Switzerland Developer Newsletter http://msdn.ch/newsletter
![Page 35: Microsoft UI Stack Ronnie Saurenmann Technical Evangelist, Microsoft Switzerland ronnies@microsoft.com](https://reader035.vdocuments.us/reader035/viewer/2022062408/56649f135503460f94c2765e/html5/thumbnails/35.jpg)
© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a
commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.
© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a
commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.
![Page 36: Microsoft UI Stack Ronnie Saurenmann Technical Evangelist, Microsoft Switzerland ronnies@microsoft.com](https://reader035.vdocuments.us/reader035/viewer/2022062408/56649f135503460f94c2765e/html5/thumbnails/36.jpg)
Desktop & Modern
Windows 8.1 – Update 1• Brokered Windows Runtime Components for
side-loaded Windows Store apps• Network loopback in side-loaded Windows Store
apps