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 http://tools.ietf.org/html/draft-ietf-hybi- thewebsocketprotocol-07 JavaScript API – W3C June 2011 standard at: ● http://dev.w3.org/html5/websockets/ 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: var websocket = new WebSocket("ws://SomeSite.com/chat");

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

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/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 (5 Megs) ● 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.d efault\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 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 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 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 http://StephenWalther.com

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

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