Comparing XAML and HTML: FIGHT XAML HTML
May 11, 2015
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
@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
@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