Download pdf - Comparing xaml and html

Comparing XAML and HTML:FIGHT

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

[email protected]

@gillcleeren

http://www.ordina.be/

http://www.visug.be/

http://www.snowball.be/

mailto:[email protected]

http://twitter.com/gillcleeren

About Kevin DeRudder (aka Mr HTML)

• Lecturer at New Media and Communications Technologie

• IE Dev MVP

• Techorama conference owner

• Visug user group lead (www.visug.be)

kevinderudder.wordpress.be

[email protected]

@kevinderudder

http://www.visug.be/

http://kevinderudder.wordpress.com/

mailto:[email protected]

http://twitter.com/kevinderudder

GOAL

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

• HTML

• 60 minutes• 10 topics

• 3 minutes per topic

• YOU DECIDE!• Please decide quickly!

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!

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 onattached 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



• 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

• …

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


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>


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 DataStreamWriter 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 DataStreamReader 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


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;

}



• 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

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

DataObject

Data 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



• 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)

<MediaElementx: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 (even on apple)

Control video and audio with JavaScript

function playPauseVideo() {if (video.paused || video.ended) {

if (video.ended) {video.currentTime = 0;

}video.play();

}else {

video.pause();}

}

DRM

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 tocreate extra controls


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


• 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



• 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");


• 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");


• 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;

}}


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



• 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


Final scores
