Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


Presentation on theme: "HTML5 Applications with ASP.NET Web Forms Stephen Walther Superexpert.com"— Presentation transcript:

1 HTML5 Applications with ASP.NET Web Forms 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: ● thewebsocketprotocol-07 thewebsocketprotocol-07 JavaScript API – W3C June 2011 standard at: ●

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:

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…

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

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: ●

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: ● 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: ●

31 Website: Phone:

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


Download ppt "HTML5 Applications with ASP.NET Web Forms Stephen Walther Superexpert.com"

Similar presentations


Ads by Google