Microsoft UI Stack Ronnie Saurenmann Technical Evangelist, Microsoft Switzerland [email protected] Which one should we use?

Download Report

Transcript Microsoft UI Stack Ronnie Saurenmann Technical Evangelist, Microsoft Switzerland [email protected] Which one should we use? 

Microsoft UI Stack
Ronnie Saurenmann
Technical Evangelist, Microsoft Switzerland
[email protected]
Which one should we use?
Web
Mobile Web
Hybrid
Native
Desktop
+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
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
<!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>
http://
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.
Relaying on CSS3, requires a modern browser
Based on:
• flexible layouts
•
media queries
•
flexible media
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
Anything you can do in Objective-C and
Java can be done in Xamarin
Windows
Desktop
Windows
Store
Windows
Phone
iOS
Native UI, Native Performance
One Tool
Unified Skills
C# / .NET Libraries
Shared Business Logic
Portable Libraries
Android
using Xamarin.Forms;
Share C# UI Code across iOS,
Android, Windows Phone.
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 4.5.1
.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
Microsoft Switzerland Developer
Newsletter
http://msdn.ch/newsletter
Windows 8.1 – Update 1
• Brokered Windows Runtime Components for sideloaded Windows Store apps
• Network loopback in side-loaded Windows Store apps