Comparing XAML and HTML: FIGHT!

Comparing XAML and HTML:FIGHT

XAML HTML

About Gill Cleeren (aka Mr XAML)

• .NET Architect @Ordina (www.ordina.be) • Microsoft Regional Director and Client Dev MVP• Techorama conference owner• Speaker • Visug user group lead (www.visug.be)• Author• Pluralsight trainer

www.snowball.be

gill@snowball.be

@gillcleeren

About Kevin DeRudder (aka Mr HTML)• Lecturer at New Media and Communications Technologie • Owner eGuidelines• IE Dev MVP• Techorama conference owner• Visug user group lead (www.visug.be)

kevinderudder.wordpress.be

kevin@e-guidelines.be

@kevinderudder

GOAL

• Comparison of 2 technologies• XAML (Windows 8, Silverlight)• HTML

• Give you an overview of what each technology can or cannot do!• 60 minutes• 10 topics• 3 minutes per topic

• YOU DECIDE!• Please decide quickly!

Fasten your seatbelt!

Match agenda

• Round 1: Layout• Round 2: Managing styles• Round 3: Drawing• Round 4: Local data• Round 5: Services• Round 6: Data binding• Round 7: Audio and video playback• Round 8: Controls• Round 9: Uh oh, some OO!• Round 10: Unit testing• Final scores!

ROUND 1: LAYOUT

Requirements for this round

• Responsive, resolution independent• Easy table based layout• Layout management system built-in

XAML

Layout in XAML

• Layout is done based on a number of built-in elements (“layout management elements”)• General, available in any XAML technology:

• Canvas• StackPanel• Grid

• Silverlight• DockPanel• WrapPanel

• Windows 8 & Windows Phone 8.1• GridView• ListView• Semantic Zoom

Canvas

• Positional layout• Positioning of elements is done relative to owning canvas

• Very lightweight container• “Drawing” panel, similar to a Form in WinForms• Not the best choice for

flexible, responsive UIs• Positioning done based on

attached properties

<Canvas Width="150" Height="100" Background="Gray"> <Rectangle Canvas.Top="10" Canvas.Left="10" Width="130" Height="80" Fill="Blue" /> <Canvas Canvas.Left="20" Canvas.Top="20" Width="110" Height="60" Background="Black"> <Ellipse Canvas.Top="10" Canvas.Left="10" Width="90" Height="40" Fill="Orange" /> </Canvas></Canvas>

StackPanel

• Automatic layouting of its child elements• Stacks elements horizontally or vertically

• Very simple control• OK for flexible Uis• Not for an entire page though

<StackPanel Background="Gray" Orientation="Horizontal" > <Rectangle Width="100" Height="100" Fill="Blue" /> <Ellipse Width="100" Height="100" Fill="Orange" /></StackPanel>

Grid

• Powerful layout control• Ready for responsive UIs• Versatile for all resolutions

• Not “shared” as the same control for tabular data display• Not visible• No rows and columns

• Each cell can contain 1 element by default• More possible due to nesting

• Nesting is often applied for a page

Grid

<Grid Background="Gray" Width="100" Height="100"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="2*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition /> </Grid.RowDefinitions> <Rectangle Fill="Blue" Width="50" Height="50" Grid.Column="0" Grid.Row="0" /> <Rectangle Fill="Red" Width="50" Height="50" Grid.Column="1" Grid.Row="0" /> <Rectangle Fill="Green" Width="50" Height="50" Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" /></Grid>

Windows 8 specific controls

• ListView• GridView• FlipView• Semantic zoom• Touch-optimized!

HTML

<header /><main> <aside></aside> <section> <article> <header /> <footer /> </article> </section></main><footer />

Layout in HTML

• Layout in HTML is done by a combination of HTML <tags> and CSS {styles} • Don’t position your elements by using <br/> or <p/> tags

• HTML • Each element (except <div>) has its own purpose• If you use older browsers, use modernizr or add the elements via JavaScript to the DOM

main { display: block;}

aside > nav { display: -ms-flex; -ms-flex-flow: row wrap; flex-flow: row wrap;}

Layout in HTML

• Layout in HTML is done by a combination of HTML <tags> and CSS {styles} • Don’t position your elements by using <br/> or <p/> tags

• CSS• Hardest part• Add a reset CSS to your page

• reset.css or normalize.css• Use a Grid System to make this easier for you

• 960grid• Twitter bootstrap• …

Before I continue: NO TABLES

The common options

• {display:block;} to have a newline before and after the element• {display:inline;} to put the element inside text or another

element• {display:inline-block;} to have an inline element with features

of a block element like width and height

• {display:table;} to create table in CSS instead of HTML

<div style="display: table;"> <div style="display: table-row;"> <div style="display: table-cell;"> </div> </div></div>

FlexBox

• {display:flex;}• CSS3 specification• Used to arrange elements on the page • + lots of options• Better than using Floats

.flex { width: 525px; height: 300px; border: 1px solid #000000; display: flex; flex-direction: row;}

.flex > div { flex: 1 1 auto; }

.flex > div:nth-child(1) { background: #000000; }

.flex > div:nth-child(2) { background: #f3f32f; }

.flex > div:nth-child(3) { background: #ff0000; }

Comparing XAML and HTML:FIGHT

XAML HTML

ROUND 2: Managing Styles

Requirements for this round

• Make it easier to work with styles• Make it possible to make styles use variables

HTML

Styles in HTML

Styles in HTML CSS

• No easy way to maintain large CSS Stylesheets

• SOLUTION: CSS Precompilers• SASS• LESS• Stylus• CSS Crush• …

@techdays-color: rgb(255,188,0);@techdays-darkerColor: (@vision-color + #111);

body{background-color: @vision-color;border: 1px solid @vision-darkerColor;

}

@width: 960px;

.middle{width: @width * 2 / 3;

}

.left, .right{width: @width / 6;

}

header{background-color: orange;

nav{background-color: darken(orange, 10%);

}nav a{ text-decoration: none;

&:hover{text-decoration: underline;}}

}

header {background-color: orange;}header nav {background-color: #cc8400;}header nav a {text-decoration: none;}header nav a:hover {text-decoration: underline;}

XAML

Styles

• Blocks of UI elements that can be reused• Limited to properties of elements• Are tied to type for which they are defined

<Grid> <Grid.Resources> <Style TargetType="Rectangle" x:Key="Outlined"> <Setter Property="StrokeThickness" Value="2" /> <Setter Property="Stroke" Value="Black"/> </Style> </Grid.Resources>

<Rectangle Fill="#FF808080" Width="100" Height="50" Style="{StaticResource Outlined}" StrokeThickness="5" /></Grid>

Styles

• Should have name and TargetType defined• TargetType is polymorphic

• Static or dynamic (only in WPF)• Aren’t really cascading,

although we can build a hierarchy of styles• Similar to CSS

<Style x:Key="BaseControl" TargetType="Control"> <Setter Property="FontWeight" Value="Bold" /></Style>

<Style x:Key="ButtonStyle1" TargetType="Button" BasedOn="{StaticResource BaseControl}"> <Setter Property="FontFamily" Value="Verdana" /> <Setter Property="FontSize" Value="18" /></Style>

Variables in styles: through data binding• Inside a style setter, we can do data-binding• Not really a variable though

• How it works:• Create an object• Bind a style to it• When the object changes, the bound values in the setters will also change

Variables in styles: through data binding

Object

StyleView

View

View

Comparing XAML and HTML:FIGHT

XAML HTML

ROUND 3: DRAWING

Requirements

• Vector-based• Resolution-independent

XAML

Drawing in XAML

• All drawing is vector-based• No problems with different resolution

• Based on hierarchy of shapes• Shape base class• Rectangle• Ellipse• Line• Polygon• Polyline• Path

Drawing in XAML

• Basic properties• Fill• Stroke• Width• Height• Opacity• Visibility• Cursor (depending on platform)

Brushes

• Shapes can have fill and stroke• Brushes

• SolidColorBrush• LinearGradientBrush• RadialGradientBrush• ImageBrush• VideoBrush (depending on platform)

Fill

Stroke

Complex drawings: Geometries

<Path Stroke="Black" StrokeThickness="2"> <Path.Data> <PathGeometry> <PathGeometry.Figures> <PathFigure StartPoint="5,25"> <PathFigure.Segments> <BezierSegment Point1="25,0" Point2="75,50" Point3="95,25" /> </PathFigure.Segments> </PathFigure> </PathGeometry.Figures> </PathGeometry> </Path.Data></Path>

HTML

Drawing in HTML

• Is not so easy, but great things can be achieved

• Posibilities• Canvas• SVG• WebGL• Plain Old JavaScript

• Which option you pick, JavaScript needs to be your friend• Or you should try CSS3D

Canvas

• Typical choice for most HTML games• Simple• But fast

• Bitmapped area, so drawn objects become part of the canvas which makes it impossible to attach event handlers

• When objects move, you must redraw the canvas

SVG

• XML based vector graphics format• Less performant but very flexible

• Each drawn object becomes part of the DOM• Attach one or more event handlers to it

<svg width="320" height="320"> <defs> <radialGradient id="circleGrad"> <stop offset="100%" stop-color="rgb( 0, 255, 0)" /> </radialGradient> </defs>

<ellipse fill="url(#circleGrad)" stroke="#000" cx="50%“ cy="50%" rx="50%" ry="50%"> </ellipse></svg>

Comparing XAML and HTML:FIGHT

XAML HTML

ROUND 4: LOCAL DATA

Requirements

• Offer simple way to store user data locally

HTML

Local storage in HTML

• If you want to store data locally, you can choose between these options• Cookies (which I will not explain)• LocalStorage / SessionStorage• IndexedDB• WebSQL

LocalStorage / SessionStorage

• SessionStorage• Temporary key/value pairs• 1 session per tab/windows

• LocalStorage• Same as session storage but persistant• Global usage in multiple instances of your browser

localStorage.setItem("rememberMeForALongTime", anyObject);

sessionStorage.setItem("rememberMeForALittleWhile", anyObject);var anyObject = sessionStorage.getItem("rememberMeForALittleWhile");

var anyObject = localStorage.getItem("rememberMeForALongTime");

IndexedDB

• API for client-side storage of data• Local and session storage is good for small amounts of data• IndexedDB is ideal for large amounts of data

• Transactional database System

• Boost performance by using indexes

XAML

Local data in Silverlight

• Silverlight and Windows Phone define IsolatedStorage• Can store data on Client Machine

• Size of storage is quota'd• Mostly used to save state/settings

Local data in Silverlight

// Get the Store and Streamusing (IsolatedStorageFile file = IsolatedStorageFile.GetUserStoreForApplication())using (IsolatedStorageFileStream stream = file.CreateFile("Foo.config")){ // Save Some Data StreamWriter writer = new StreamWriter(stream); writer.WriteLine("AutoRun=true"); writer.Flush(); stream.Close();}

Reading a file from IsolatedStorage

// Get the Store and Streamusing (IsolatedStorageFile file = IsolatedStorageFile.GetUserStoreForApplication())using (IsolatedStorageFileStream stream = file.OpenFile("Foo.config", FileMode.Open)){ // Read Some Data StreamReader rdr = new StreamReader(stream); string config = rdr.ReadToEnd(); stream.Close();}

IsolatedStorageSettings

• Simple usage to create Application Settings• Use IsolatedStorageSettings to set/get settings

• ApplicationSettings are per .xap• SiteSettings are per domain

IsolatedStorageSettings.ApplicationSettings["foo"] = "bar";string appFoo = IsolatedStorageSettings.ApplicationSettings["foo"] as string;

IsolatedStorageSettings.SiteSettings["foo"] = "bar";string siteFoo = IsolatedStorageSettings.SiteSettings["foo"] as string;

Local data in Windows 8/Windows Phone 8• Defines Application Data API• Local• Roaming• Temporary

• Based on• File system• Settings (automatically persisted)

Application data API

Local

Local folder

Roaming

Synced folder

Temp

Temp (local) folder

Local Settings

(Registry)

Synced Settings

Comparing XAML and HTML:FIGHT

XAML HTML

ROUND 5: SERVICES

Requirements

• Access (relational) data behind a service• RESTful interaction with the service

XAML

Services in XAML

• Silverlight, Windows 8 and Windows Phone share server-technologies that they can communicate with• ASMX• WCF• REST• RSS• Sockets• oData• …

• Common requirement is asynchronous communication• Silverlight: callbacks• Windows 8 and Windows Phone 8: await/async pattern

• Note: WPF can use the full, raw power of .NET and thus has even less restrictions

REST service access in Windows 8

• Defines HttpClient (Silverlight and WP7 used WebClient)• Works async

• HttpClient defines• Get(Async)

• Returns an HttpResponseMessage• Put(Async)• Post(Async)• Delete(Async)RESTful!

• Windows 8.1 introduced a new version of the HttpClient• Very similar API

Parsing the response

• XML• Linq-To-XML• XmlReader/XmlWriter• XmlSerializer

• JSON:• Use the JsonObject and feed it the returned string• DataContractJsonSerializer is also available• JSON.NET

• Open source via NuGet• Often the preferred choice

HTML

Services in HTML

• If you want to retrieve data in a browser you have following options• XMLHttpRequest• WebSockets

XmlHttpRequest

• XMLHttpRequest defines an API for transferring data between a client and a server• Client initiates the request• Synchronous or Asynchronous

• Based on the HTTP protocol

var xhr = new XMLHttpRequest();

xhr.open("GET", "URL", /*async*/ true);

xhr.onreadystatechange = function () { if (xhr.readyState == COMPLETE) { if (xhr.status == 200) { var data = xhr.responseText; } }}

xhr.send();

WebSockets

• API for socket connections between a browser and a server• 2-way persistant connection between client and server

• Event-driven responses• Send messages to the server and receive a response without polling the

server

WebSocketsvar socket = new WebSocket("ws://www.mi6.com/socketserver", "yourprotocol");

function sendJamesBondOnASecretMission() { var msg = { type: "message", mission: document.getElementById("mission").value, id: clientID, date: Date.now() }; socket.send(JSON.stringify(msg));}

socket.onmessage = function (event) { var data = event.data;}

Comparing XAML and HTML:FIGHT

XAML HTML

ROUND 6: DATABINDING

Requirements for this round

• Don’t require us to write code likeTextBox1.Text = Person1.FirstName;

• Support two-way binding mode

HTML

Data binding in HTML

• HTML does not know the concept of data binding• You have data and you bind it to a control

• Plenty of JavaScript frameworks available to allow datavbinding in HTML• Knockout• Angular• Mustache• …

• Depending on the framework, the syntax may be different

Data binding with knockout.js

<ul data-bind="foreach: secretAgents"> <li class="secretAgent"> <header> <span data-bind="text: Name"></span> </header> <img data-bind="attr: {alt: name, id: id, src:img}" /> </li></ul>

viewModel = { memories: ko.observableArray(items),};

ko.applyBindings(viewModel);

Data binding with mustache.js

<script id="secretAgents" type="text/html"> <ul> {{#secretAgent}} <li>{{name}}</li> {{/secretAgent}} </ul></script>

$(function () { $.getJSON('@Url.Action("SecretAgents", "MI6")', function (data) { var html = Mustache.to_html($("#secretAgents").html(),{quotes: data });

$("#secretAgents").empty().append(html); })});

XAML

• Infrastructure for binding control properties to objects and collections• Loosely-coupled model, already exists in ASP.NET, WinForms• Simple and powerful model• Source

• Any Object• PropertyPath

• Path To Any Public Property• Dynamic

• Supports multiple Binding Models• OneTime, OneWay and TwoWay

Data Binding in XAML

Data binding in XAML

DataObjectData bindingUI

Control

Converter

• Binding Syntax• Markup Extension• PropertyPath at a minimum

• Or specify Source

• Most often: use a DataContext on a base control

Data Binding

<TextBox Text="{Binding Name}" />

<Grid.Resources> <local:Person x:Key="person1" /></Grid.Resources>...<TextBox Text="{Binding Name, Source={StaticResource person1}}" />

<Grid DataContext={StaticResource person1}> <TextBox Text="{Binding Name}" /></Grid>

• Three Modes for Binding• TwoWay, OneWay or OneTime• Binding Syntax for Mode

• Binding Syntax

• OneWay and OneTime work with any object• Property Based Reads

• TwoWay works with any objects• Property Based Writes

Data Binding

<TextBlock Content="{Binding Name, Mode=TwoWay}" />

• Binding Interfaces• Properties use INotifyPropertyChanged interface• Collections use INotifyCollectionChanged interface

• Use ObservableCollection<> for Bindable Collections

Data Binding

Comparing XAML and HTML:FIGHT

XAML HTML

ROUND 7: AUDIO & VIDEO

Requirements for this round

• Easy way of media playback• Support for common formats• DRM

XAML

Audio and video in XAML

• MediaElement Loads or Streams content• Loading:

• Plays Media as Progressively Downloaded• Streamed:

• Downloads Chunk and plays it

• Support for• Audio

• MP3• Wav

• Video• MP4• WMV• OGG video

• Support for• Scrubbing• Markers (subtitles)

<MediaElement x:Name="MainMediaElement" Height="300" Width="640" AreTransportControlsEnabled="True"/>

DRM in XAML

• Silverlight, Windows Phone and Windows 8 support DRM• Player Framework• PlayReady Client• Smooth Streaming SDK

HTML

Audio and video in HTML

• Audio and Video are already available for years

• But it was kind of difficult

Audio and video in HTML

• Now, it is much more simple to add media

Audio and Video in HTML

• But sometimes, codecs can be a pain

Control video and audio with JavaScriptfunction playPauseVideo() { if (video.paused || video.ended) { if (video.ended) { video.currentTime = 0; } video.play(); } else { video.pause(); }}

DRM

ROUND 8: CONTROLS

Requirements

• Rich, native control set• Basic• Advanced

• Extensible control set• Data visualizations

HTML

Controls in HTML

• HTML does not have a rich set of built-in controls• And part of these controls are not supported by all browsers

• Built-in in HTML:• TextBox• PasswordBox• Slider• Progress• Calendar• DatePicker• …

Extra Controls in HTML

• Because of the open web community you can download code to create extra controls

Extra Controls in HTML

• Because of the open web community you can download code to create extra controls

Extra Controls in HTML

• Or you can download or buy extra controls• jQuery UI• Kendo UI

XAML

XAML controls

• Very rich control set• Depending on technology

• Built-in in most XAML technologies• TextBox• PasswordBox• Slider• ProgressBar• Calendar• DatePicker• …

Content controls

• Content controls can contain other content• One child• Nested

• Controls• Button

• CheckBox• RadioButton

• TabControl• ScrollViewer• …

<Button> <Button.Content> <StackPanel> <Image Source="pain.jpg" Width="100" /> <TextBlock TextAlignment="Center" Text="Click Me" /> </StackPanel> </Button.Content></Button>

List Controls

• Bindable to IList or IEnumerable lists• ItemsControl• ListBox• ComboBox (not in W8 and WP8)• TabControl (not in W8 and WP8)• DataGrid (not in W8 and WP8)

• Inherit from ItemsControl• Similar to a repeater

<ItemsControl> <Button Content="Click One" /> <Button Content="Click Two" /></ItemsControl>

Templating of controls

• Endless options when you start to template controls• Allows re-definition of build-in controls• Can redefine the XAML that is used to build control• Look can be changed dramatically by changing XAML• Feel can be changed• Can only add built-in behavior

• E.g. no new methods, properties or events

Comparing XAML and HTML:FIGHT

XAML HTML

ROUND 9: Uh OH, some OO

Requirements for this round

• Support • Classes• Interfaces• Inheritance• Polymorphism

XAML

OO for XAML/C#

• It’s C#

• XAML does know about OO principles going on behind the scenes• DataTemplateSelectors• Implicit Data Templates• Data binding properties

HTML

OO for HTML/JavaScript

• Although lots of people thing that you cannot do OO stuff in JavaScript, you can• It is not always pretty, but it is possible

JamesBond = (function() { function JamesBond(name, drink) { this.name = name; this.drink = drink; }

return JamesBond;

})();

sean = new JamesBond("Sean Connery", "Martini");

OO for HTML/JavaScript

• Although lots of people thing that you cannot do OO stuff in JavaScript, you can• It is not always pretty, but it is possible

JamesBond = (function() { function JamesBond(name, drink) { this.name = name; this.drink = drink; }

return JamesBond;

})();

sean = new JamesBond("Sean Connery", "Martini");

OO for HTML/JavaScript

• Today: make your live easier with compilers/transpilers/…• CoffeeScript• TypeScript• …

# CoffeeScriptclass JamesBond constructor: (name, drink) -> @name = name @drink = drink

// TypeScriptclass JamesBond{ name: string;drink: string;

constructor(name: string, drink: string) { this.name = name; this.drink = drink; }}

OO for HTML/JavaScript

• ECMAScript 6 will add more OO functionality• Future version of JavaScript

Comparing XAML and HTML:FIGHT

XAML HTML

ROUND 10: TESTING

Requirements for this round

• Support an easy way for unit testing• Unit testing frameworks

HTML

Unit testing for HTML/JavaScript

• Bunch of Testing Frameworks available• QUnit• Mocha• TestSwarm• Jasmine• Tutti• …

• Ideal with a JavaScript build system like grunt or gulp

XAML

Unit testing for XAML

• Silverlight includes support for unit testing directly from Visual Studio• Run in the browser• Not easy to integrate with build process• In general, not a great story!

• Windows 8 support Unit Test Library template in Visual Studio• Based on Visual Studio Testing Framework• Integrates with build process• Other unit testing frameworks are supports

Comparing XAML and HTML:FIGHT

XAML HTML

Final scores

Comparing XAML and HTML:FIGHT

XAML HTML