Comparing XAML and HTML: FIGHT!

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

• 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

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

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

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

• 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

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

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

• 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

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

<header />
<main>
<aside></aside>
<section>
<article>
<header />
<footer />
</article>
</section>
</main>
<footer />
• 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 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
• …

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

• {display:flex;}•
•
•
•
.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;
}
background: #f3f32f;
}
background: #ff0000;
}

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

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

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

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

• 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

• Vector-based
• Resolution-independent

• All drawing is vector-based
• No problems with different resolution
• Based on hierarchy of shapes
• Shape base class
• Rectangle
• Ellipse
• Line
• Polygon
• Polyline
• Path

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

• Shapes can have fill and stroke
• Brushes
• SolidColorBrush
• LinearGradientBrush
• RadialGradientBrush
• ImageBrush
• VideoBrush (depending on platform)
Fill
Stroke

• 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

• 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

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

• Offer simple way to store user data locally

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

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

• 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

• Silverlight and Windows Phone define IsolatedStorage
• Can store data on Client Machine
• Size of storage is quota'd
• Mostly used to save state/settings

// Get the Store and Stream
using (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();
}

// Get the Store and Stream
using (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();
}

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

• Defines Application Data API
• Local
• Roaming
• Temporary
• Based on
• File system
• Settings (automatically persisted)

Local
Local folder
Roaming
Synced folder
Temp
Temp (local)
folder
Local
Settings
(Registry)
Synced
Settings

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

• 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

• 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

• 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

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

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

• 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

• Don’t require us to write code like
TextBox1.Text = Person1.FirstName;
• Support two-way binding mode

• 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

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

• 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
Object
Data bindingUI
Control
Converter

• Binding Syntax
• Markup Extension
• PropertyPath at a minimum
• Or specify Source
• Most often: use a DataContext on a base control
<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
<TextBlock Content="{Binding Name, Mode=TwoWay}" />

• Binding Interfaces
• Properties use INotifyPropertyChanged interface
• Collections use INotifyCollectionChanged interface
• Use ObservableCollection<> for Bindable Collections

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

• 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"
/>

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

• Audio and Video are already available for years
• But it was kind of difficult

• Now, it is much more simple to add media

• But sometimes, codecs can be a pain

function playPauseVideo() {
if (video.paused || video.ended) {
if (video.ended) {
video.currentTime = 0;
}
video.play();
}
else {
video.pause();
}
}

• Rich, native control set
• Basic
• Advanced
• Extensible control set
• Data visualizations

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

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

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

• Very rich control set
• Depending on technology
• Built-in in most XAML technologies
• TextBox
• PasswordBox
• Slider
• ProgressBar
• Calendar
• DatePicker
• …

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

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

• 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

• It’s C# 
• XAML does know about OO principles going on behind the scenes
• DataTemplateSelectors
• Implicit Data Templates
• Data binding properties

• 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
• …
# CoffeeScript
class JamesBond
constructor: (name, drink) ->
@name = name
@drink = drink
// TypeScript
class 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

• Bunch of Testing Frameworks available
• QUnit
• Mocha
• TestSwarm
• Jasmine
• Tutti
• …
• Ideal with a JavaScript build system like grunt or gulp

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

Comparing XAML and HTML: FIGHT!

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Comparing XAML and HTML: FIGHT!

Ähnlich wie Comparing XAML and HTML: FIGHT! (20)

Mehr von Gill Cleeren

Mehr von Gill Cleeren (10)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Comparing XAML and HTML: FIGHT!