Comparing XAML and HTML: FIGHT!

909 views

Published on

We’re not going to get into a real fight in this talk, don’t worry. Instead we are going to compare the 2 popular languages in their current state and see what the benefits and disadvantages are. Maybe we’ll throw some Angular in the battle as well and see what influence that has on the outcome of the match. After this talk, you’ll be better armed in your next meeting on which technology you should use for your next project!

Published in: Software, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
909
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Comparing XAML and HTML: FIGHT!

  1. 1. • .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
  2. 2. • 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
  3. 3. • 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!
  4. 4. • 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!
  5. 5. • Responsive, resolution independent • Easy table based layout • Layout management system built-in
  6. 6. • 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
  7. 7. • 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>
  8. 8. • 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>
  9. 9. • 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
  10. 10. <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>
  11. 11. • ListView • GridView • FlipView • Semantic zoom • Touch-optimized!
  12. 12. <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
  13. 13. 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 • …
  14. 14. • {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>
  15. 15. • {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; } .flex > div:nth-child(2) { background: #f3f32f; } .flex > div:nth-child(3) { background: #ff0000; }
  16. 16. • Make it easier to work with styles • Make it possible to make styles use variables
  17. 17. • No easy way to maintain large CSS Stylesheets • SOLUTION: CSS Precompilers • SASS • LESS • Stylus • CSS Crush • …
  18. 18. @techdays-color: rgb(255,188,0); @techdays-darkerColor: (@vision-color + #111); body{ background-color: @vision-color; border: 1px solid @vision-darkerColor; }
  19. 19. @width: 960px; .middle{ width: @width * 2 / 3; } .left, .right{ width: @width / 6; }
  20. 20. 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;}
  21. 21. • 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>
  22. 22. • 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>
  23. 23. • 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
  24. 24. Object Style View View View
  25. 25. • Vector-based • Resolution-independent
  26. 26. • All drawing is vector-based • No problems with different resolution • Based on hierarchy of shapes • Shape base class • Rectangle • Ellipse • Line • Polygon • Polyline • Path
  27. 27. • Basic properties • Fill • Stroke • Width • Height • Opacity • Visibility • Cursor (depending on platform)
  28. 28. • Shapes can have fill and stroke • Brushes • SolidColorBrush • LinearGradientBrush • RadialGradientBrush • ImageBrush • VideoBrush (depending on platform) Fill Stroke
  29. 29. <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>
  30. 30. • 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
  31. 31. • 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
  32. 32. • 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>
  33. 33. • Offer simple way to store user data locally
  34. 34. • If you want to store data locally, you can choose between these options • Cookies (which I will not explain) • LocalStorage / SessionStorage • IndexedDB • WebSQL
  35. 35. • 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");
  36. 36. • 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
  37. 37. • Silverlight and Windows Phone define IsolatedStorage • Can store data on Client Machine • Size of storage is quota'd • Mostly used to save state/settings
  38. 38. // 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(); }
  39. 39. // 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(); }
  40. 40. • 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;
  41. 41. • Defines Application Data API • Local • Roaming • Temporary • Based on • File system • Settings (automatically persisted)
  42. 42. Local Local folder Roaming Synced folder Temp Temp (local) folder Local Settings (Registry) Synced Settings
  43. 43. • Access (relational) data behind a service • RESTful interaction with the service
  44. 44. • 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
  45. 45. • 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
  46. 46. • 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
  47. 47. • If you want to retrieve data in a browser you have following options • XMLHttpRequest • WebSockets
  48. 48. • 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();
  49. 49. • 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
  50. 50. var 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; }
  51. 51. • Don’t require us to write code like TextBox1.Text = Person1.FirstName; • Support two-way binding mode
  52. 52. • 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
  53. 53. <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);
  54. 54. <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); }) });
  55. 55. • 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
  56. 56. Data Object Data bindingUI Control Converter
  57. 57. • 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>
  58. 58. • 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}" />
  59. 59. • Binding Interfaces • Properties use INotifyPropertyChanged interface • Collections use INotifyCollectionChanged interface • Use ObservableCollection<> for Bindable Collections
  60. 60. • Easy way of media playback • Support for common formats • DRM
  61. 61. • 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" />
  62. 62. • Silverlight, Windows Phone and Windows 8 support DRM • Player Framework • PlayReady Client • Smooth Streaming SDK
  63. 63. • Audio and Video are already available for years • But it was kind of difficult
  64. 64. • Now, it is much more simple to add media
  65. 65. • But sometimes, codecs can be a pain
  66. 66. function playPauseVideo() { if (video.paused || video.ended) { if (video.ended) { video.currentTime = 0; } video.play(); } else { video.pause(); } }
  67. 67. • Rich, native control set • Basic • Advanced • Extensible control set • Data visualizations
  68. 68. • 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 • …
  69. 69. • Because of the open web community you can download code to create extra controls
  70. 70. • Because of the open web community you can download code to create extra controls
  71. 71. • Or you can download or buy extra controls • jQuery UI • Kendo UI
  72. 72. • Very rich control set • Depending on technology • Built-in in most XAML technologies • TextBox • PasswordBox • Slider • ProgressBar • Calendar • DatePicker • …
  73. 73. • 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>
  74. 74. • 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>
  75. 75. • 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
  76. 76. • Support • Classes • Interfaces • Inheritance • Polymorphism
  77. 77. • It’s C#  • XAML does know about OO principles going on behind the scenes • DataTemplateSelectors • Implicit Data Templates • Data binding properties
  78. 78. • 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");
  79. 79. • 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");
  80. 80. • 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; } }
  81. 81. • ECMAScript 6 will add more OO functionality • Future version of JavaScript
  82. 82. • Support an easy way for unit testing • Unit testing frameworks
  83. 83. • Bunch of Testing Frameworks available • QUnit • Mocha • TestSwarm • Jasmine • Tutti • … • Ideal with a JavaScript build system like grunt or gulp
  84. 84. • 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

×