microsoft ui stack ronnie saurenmann technical evangelist, microsoft switzerland...
TRANSCRIPT
Which one should we use?
WPF
JavaScriptASP.NET
XAMLWinJS
AngularJS
DirectX
jQuery
WebForms
Xamarin
Universal TemplateC++
HTML5Single Page MVC
Cordova
Agenda
WebMobile WebHybridNativeDesktop
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
One ASP.NET
ASP.NET
WebForm
s
Sites
WebPages
Single
PageApps
MVCWebAPI
SignalR
Services
ASP.NET WebForms
Familiar control and event based programming modelControls encapsulate HTML, JS and CSSRich UI controls included: datagrids, charts, AJAX, etc…
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
ASP.NET MVC
Absolute control of the HTML markupSupport Unit Testing, TDD, Agile methodologiesVery flexible and extensible
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
DemoOne ASP.NET
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>
WinJS today and tomorrow
WinJS
WinJSWinJS
WinJS
http://
DemoWinJS in a browser (preview)
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.
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%; }
DemoResponsive web design
What about Apps?Native vs. Hybrid (HTML5) Apps
Native+high fidelity+faster+easier to develop and test+no limits+very good user acceptance
-one per platform-higher cost
Hybrid based
+cross platform +one code base+one skill set
-compromise-slower-not so well accepted by end user
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..
DemoHybrid app
Native Apps for Windows & PhoneNew Visual Studio Universal Template for XAML/C#/VB/C++ & WinJS
Windows Windows Phone
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
Visual Studio streamlines developing universal Windows apps
Share your XAML UI!
DemoUniversal
Cross platform Native App in .NET
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
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
Desktop +Rich UI+Highly productive+Proven technology+Many UI controls available
-Dependency on the client (e.g. .NET version)-Deployment-Mobile/Touch
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
DemoVisual Studio
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
Let’s keep in Touch!
Microsoft Switzerland Developer Newsletter http://msdn.ch/newsletter
© 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.
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