Presentation is loading. Please wait.

Presentation is loading. Please wait.

The HTML5 Connectivity License

Similar presentations

Presentation on theme: "The HTML5 Connectivity License"— Presentation transcript:

1 The HTML5 Connectivity Revolution @peterlubbers

2 License plate: @peterlubbers

3 Image: @rdclark

4 Image: @jeffreypalermo

5 Agenda A is for Applications B is for Bi-Directional C is for Connectivity #devcon5 @peterlubbers #html5

6 ‘A’ is for (Web) Applications June 2004 W3C Meeting in San Jose, California: – Discussion about the rise of web applications – Vote on updating HTML for web applications: 8 For 14 Against Result: – Web Hypertext Application Technology Working Group (WHATWG) formed 2 days later – Web Applications 1.0  HTML5

7 HTML5 Feature Areas


9 Browser Support Native Support: Polyfills (emulation): Modernizr’s All in One page:

10 HTML5 “Paves the Cow Paths” A pragmatic approach Fix real-world problems Especially true for Connectivity features

11 HTML5 Connectivity

12 Hang on, I can already do that! Yes, but… Same-origin restrictions JSON with Padding (JSONP) vulnerabilities Half-duplex HTTP architecture Reverse Ajax (COMplExiTy!) – Excessive Overhead – High Latency

13 Traditional Architecture 100% Half Duplex

14 Modern Web Application Architecture 100% Hipster


16 Cross Document Messaging Enables secure cross-origin communication across iframes, tabs, and windows PostMessage API (also used in Web Workers) Demo: DZSLides (Paul Rouget, Mozilla):

17 PostMessage Architecture Cross Document Messaging

18 CORS HTML5 introduces Cross-Origin Resource Sharing (CORS) – – Allows (safe) exemptions from the Same-Origin Policy – “With CORS you receive data instead of [JSONP] code, which you can parse safely” —Frank Salim

19 XMLHttpRequest Level 2 Improvements over Level 1: – Cross-origin XMLHttpRequest – Progress events – Binary support Specification: Demo:

20  Level 2 XMLHttpRequest  Level 1

21 Server-Sent Events Standardizes sending a continuous stream of data from server to browser EventSource API Great for newsfeeds, one-way streams of data SSE-specific features: Automatic reconnection Event IDs

22 SSE Architecture

23 WebSocket New API (W3C) and Protocol (IETF RFC 6455)W3CIETF RFC 6455 Allows browser to communicate with a remote host Full-duplex (bi-directional), single socket Port 80/443 (ws:// and wss://) Huge reduction in unnecessary overhead and latency A socket in your browser!

24 If You Want to Build Web Apps for… Financial trading Social networking Gaming Gambling System monitoring RFID tracking … WebSocket to the rescue!

25 Serious Overhead Reduction

26 Huge Latency Reduction Using CometUsing WebSocket

27 (Fairly) Complete List of WebSocket Servers Alchemy-Websockets (.NET) Apache ActiveMQ (Java) apache-websocket (C) websocket#readme websocket#readme APE Project (C) Autobahn (virtual appliance) Cowboy Cramp (Ruby) Diffusion (Commercial product) EM-WebSocket (Ruby) Extendible Web Socket Server (PHP) Socket-Server Socket-Server gevent-websocket (Python) websocket/ websocket/ GlassFish (Java) Goliath (Ruby) Jetty (Java) jWebsocket (Java) Kaazing WebSocket Gateway (Java) libwebsockets (C) Misultin (Erlang) net.websocket (Go) Netty (Java) Nugget (.NET) Orbited (Python) phpdaemon (PHP) Pusher (cloud service) pywebsockets (Python) RabbitMQ (Erlang) websockets websockets (Node.js) SockJS-node (Node) SuperWebSocket (.NET) Tomcat (Java) Tornado (python) txWebSocket (Python) vert.x (Java) Watersprout (PHP) web-socket-ruby (Ruby) Webbit (Java) WebSocket-Node (Node.js) websockify (Python) XSockets (.NET) Yaws (Erlang)

28 Extending WebSocket Most importantly, once you have WebSocket, you can extend client-server protocols to the web: Chat: XMPP (Jabber), IRC Pub/Sub (Stomp/AMQP) VNC (RFB) Any TCP-based protocol The browser becomes a first-class network citizen Demo: This presentation in real time!

29 Insert ritual dance to the demo gods here…

30  You Me    WebSocket   Diagram and Presso system: @pmoskovi (based on impress.js)impress.js

31 WebSocket Demo

32 WebSocket Demo

33 Image: @ultrarunwild Securing HTML5 Communication

34 CORS General move to TLS/port 443 – Encrypted tunnel allows traversal of intermediaries – Less overhead than originally thought – Example: SPDY Using standard, open ports has a big advantage "We want some chance of getting this (SPDY) protocol out in our live time” —Roberto Peon (Google) And more: – Single Sign-On, Authentication and Authorization For example, Kaazing Kerberos protocol over WS

35 E-mail: Twitter: @peterlubbers LinkedIn: Peter Lubbers

36 Buy the Book! Pro HTML5 Programming 2 nd Edition (Apress, 2011) 40% off e-book coupon code: HTL528

37 Additional Resources SFHTML5 Talk about Connectivity and Real Time Presentation: connectivity connectivity HTML5 Weekly Newsletter: The Web Ahead Podcast: San Francisco HTML5 User Group (monthly presentations and videos): Kaazing WebSocket Gateway:

38 HTML5 Training Kaazing University provides proven, practical HTML5 training worldwide (experts, not just trainers) Customers include Google, Cisco, Intel, and more Web site: E-mail us:

39 -

Download ppt "The HTML5 Connectivity License"

Similar presentations

Ads by Google