1 / 32

HTML5 Applications with ASP.NET Web Forms

Learn about the essential features for creating data-driven apps using HTML5, including WebSockets, Web Workers, Web Storage, IndexedDB, and Offline Applications.

buggsr
Download Presentation

HTML5 Applications with ASP.NET Web Forms

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML5 Applications with ASP.NET Web Forms Stephen Walther Superexpert.com Stephen.Walther@Superexpert.com

  2. Agenda What features matter for data-driven apps? • WebSockets • Web Workers • Web Storage • IndexedDB • Offline Applications

  3. HTML5 WebSockets– Overview • Enables lightweight two-way communication over a TCP socket. • Long Polling, Slow Talking, Server Push, Comet • Stock Notifications, Chat, Games

  4. HTML5 WebSockets – Standards • Protocol – IETF April 2011 standard at: • http://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol-07 • JavaScript API – W3C June 2011 standard at: • http://dev.w3.org/html5/websockets/

  5. HTML5 WebSockets – Browser Support • Chrome • Chrome9+ • Safari • Safari5, iOS Safari • Firefox • Firefox4, Firefox6 • Internet Explorer • IE9 Web Socket support was removed from Firefox because of security issues

  6. HTML5 WebSockets – Server Support • IIS • Jetty • Node.js Microsoft HTML5 Labs WebSockets server: • http://html5labs.interoperabilitybridges.com/

  7. HTML5 WebSockets – API Create a new socket with window.WebSocket: varwebsocket= new WebSocket("ws://SomeSite.com/chat");

  8. HTML5 WebSockets – API 3 Methods: • send(DOMString) • send(ArrayBuffer) • send(Blob) 1 Property • readyState 4 Events: • onopen • onmessage • onclose • onerror

  9. HTML5 WebSockets – Demos Creating a super simple Chat Service…

  10. HTML5 WebSockets – Demos Creating a multiplayer online game… http://samples.superexpert.com/wsgame

  11. HTML5 Web Workers – Overview • Enables you to run a script in a background thread (run multi-threaded JavaScript). • Useful when you don’t want to block the UI thread when executing a long running script. • Standard located here: • http://www.whatwg.org/specs/web-workers/current-work/

  12. HTML5 Web Workers – Support • Firefox • Chrome • Safari • Opera • Internet Explorer

  13. HTML5 Web Workers – API Create a new worker with window.Worker: var worker = new window.Worker(“DoSomethingHard.js”);

  14. HTML5 Web Workers – API Methods: • importScripts() • postMessage() • close() • myWorker.terminate() Events: • myWorker.onmessage • myWorker.onerror

  15. HTML5 Client Data Overview • Web Storage – key/value storage on the browser. • IndexedDB – key/value storage on the browser with support for cursors and indices • Web SQL - relational database support in the browser (SqlLite).

  16. HTML5 Web Storage – Overview Web Storage (AKA DOM Storage): • Session Storage • Local Storage (Originally called Global Storage in Firefox) Standard at: http://www.w3.org/TR/2009/WD-webstorage-20090910/

  17. HTML5 Web Storage Browser Support: • Chrome5 (5 Megs) • Firefox2 (5 Megs) • Opera10 (5 Megs) • Safari4 (5Megs) • IE8 (10 Megs)

  18. HTML5 Web Storage sessionStorage: • length • key(index) • setItem(key, string) • getItem(key) • removeItem(key) • clear() Page specific and not session specific

  19. HTML5 Web Storage localStorage: • length • key(index) • setItem(key, string) • getItem(key) • removeItem(key) • clear()

  20. HTML5 Web Storage DataJS: Using DataJS to prefetch pages

  21. HTML5 IndexedDB – Overview • Not a relational database, key value database • Does not use SQL • Supports indices, constraints, transactions

  22. HTML5 IndexedDB Browser Support: • Firefox4 (mozIndexedDB) • Google Chrome 12 (webkitIndexedDB) • IE9 (HTML Labs plugin)

  23. HTML5 IndexedDB Firefox stores the IndexedDB database here: C:\Users\username\AppData\Roaming\Mozilla\Firefox\Profiles\shhxrq9s.default\indexedDB

  24. HTML5 Offline Web Applications Use a web application even when you are not connected to the Internet Standard located at: • http://www.w3.org/TR/html5/offline.html

  25. HTML5 Offline Web Applications Browser Support: • Chrome • Firefox • Safari • Opera • IE9

  26. HTML5 Offline Web Applications <html manifest=“manifest.ashx” /> Cache Manifest # version 2 # Content Images/karlsruhe.jpg Content/Site.css NETWORK: Services/SomeService.svc

  27. HTML5 Offline Web Applications window.applicationCache Properties: • status – UNCACHED, IDLE, CHECKING, DOWNLOADING, UPDATEREADY, OBSOLETE Methods: • update() • swapCache() Events: • onchecking, onerror, onupdate, ondownloading, onprogress, onupdateready, oncached, onobsolete

  28. HTML5 Offline Web Applications window.navigator.online: • true – browser might be online. • false – browser definitely offline.

  29. Big HTML5 Demo JavaScript Reference Application: • http://Samples.Superexpert.com/JavaScriptReference Demonstrates: • Web Storage • Offline Web Applications • Works with IE, Chrome, Firefox, Opera, Safari

  30. Download the Sample Code Visit Stephen Walther’s blog to download the sample code for this talk: • http://StephenWalther.com

  31. Website: http://Superexpert.com Email: Stephen.Walther@superexpert.com Phone: 800 691 - 7140

  32. Your Feedback is Important Please fill out a session evaluation form. Thank you!

More Related