Comparing xaml and html

  • View

  • Download

Embed Size (px)


My techays presentation together with @snowball about comparing two different but sometimes simular technologies

Text of Comparing xaml and html

  • 1.Comparing XAML and HTML: FIGHT

2. About Gill Cleeren (aka Mr XAML) .NET Architect @Ordina ( Microsoft Regional Director and Client Dev MVP Techorama conference owner Speaker Visug user group lead ( Author Pluralsight trainer @gillcleeren 3. About Kevin DeRudder (aka Mr HTML) Lecturer at New Media and Communications Technologie IE Dev MVP Techorama conference owner Visug user group lead ( @kevinderudder 4. GOAL Comparison of 2 technologies XAML (Windows 8, Silverlight) HTML 60 minutes 10 topics 3 minutes per topic YOU DECIDE! Please decide quickly! 5. 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! 6. Requirements for this round Responsive, resolution independent Easy table based layout Layout management system built-in 7. XAML 8. 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 9. 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 10. 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 11. 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 12. Grid 13. Windows 8 specific controls ListView GridView FlipView Semantic zoom Touch-optimized! 14. HTML 15. Layout in HTML Layout in HTML is done by a combination of HTML and CSS {styles} Dont position your elements by using

tags HTML Each element (except

) has its own purpose If you use older browsers, use modernizr or add the elements via JavaScript to the DOM 16. 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 and CSS {styles} Dont position your elements by using
or 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 17. Before I continue: NO TABLES 18. Comparing XAML and HTML: FIGHT 19. Requirements for this round Make it easier to work with styles Make it possible to make styles use variables 20. HTML 21. Styles in HTML 22. Styles in HTML CSS No easy way to maintain large CSS Stylesheets SOLUTION: CSS Precompilers SASS LESS Stylus CSS Crush 23. XAML 24. Styles Blocks of UI elements that can be reused Limited to properties of elements Are tied to type for which they are defined 25. Styles Should have name and TargetType defined TargetType is polymorphic Static or dynamic (only in WPF) Arent really cascading, although we can build a hierarchy of styles Similar to CSS 26. 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 27. Variables in styles: through data binding Object Style View View View 28. Comparing XAML and HTML: FIGHT 29. Requirements Vector-based Resolution-independent 30. XAML 31. 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 32. Drawing in XAML Basic properties Fill Stroke Width Height Opacity Visibility Cursor (depending on platform) 33. Brushes Shapes can have fill and stroke Brushes SolidColorBrush LinearGradientBrush RadialGradientBrush ImageBrush VideoBrush (depending on platform) Fill Stroke 34. Complex drawings: Geometries 35. HTML 36. 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 37. 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 38. 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 39. Comparing XAML and HTML: FIGHT 40. Requirements Offer simple way to store user data locally 41. HTML 42. 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 43. 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"); 44. 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 45. XAML 46. 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 47. Local data in Silverlight // 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(); } 48. Reading a file from IsolatedStorage // 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(); } 49. 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; 50. Local data in Windows 8/Windows Phone 8 Defines Application Data API Local Roaming Temporary Based on File system Settings (automatically persisted) 51. Application data API Local Local folder Roaming Synced folder Temp Temp (local) folder Local Settings (Registry) Synced Settings 52. Comparing XAML and HTML: FIGHT 53. Requirements Access (relational) data behind a service RESTful interaction with the service 54. XAML 55. 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 56. 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 57. 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 58. HTML 59. Services in HTML If you want to retrieve data in a browser you have following options XMLHttpRequest WebSockets 60. 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();"GET", "URL", /*async*/ true); xhr.onreadystatechange = function () { if (xhr.readyState == COMPLETE) { if (xhr.status == 200) { var data = xhr.responseText; } } } xhr.send(); 61. 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 62. WebSockets var socket = new WebSocket("ws://", "yourprotocol"); function sendJamesBondOnASecretMission() { var msg = { type: "message", mission: document.getElementById("mission").value, id: clientID, date: }; socket.send(JSON.stringify(msg)); } socket.onmessage = function (event) { var data =