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: http://caniuse.com http://mobilehtml5.org/ Polyfills (emulation): Modernizr’s All in One page: http://goo.gl/szvyvhttp://goo.gl/szvyv

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): http://paulrouget.com/dzslides/ http://paulrouget.com/dzslides/

17. PostMessage Architecture Cross Document Messaging

18. CORS HTML5 introduces Cross-Origin Resource Sharing (CORS) – http://www.w3.org/TR/cors/ http://www.w3.org/TR/cors/ – http://enable-cors.org http://enable-cors.org 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: http://www.w3.org/TR/XMLHttpRequest/ http://www.w3.org/TR/XMLHttpRequest/ Demo: http://www.html5rocks.com/en/tutorials/file/xhr2/ http://www.html5rocks.com/en/tutorials/file/xhr2/

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 http://webtide.intalio.com/2011/09/cometd-2-4-0-websocket-benchmarks/

27. (Fairly) Complete List of WebSocket Servers Alchemy-Websockets (.NET) http://alchemywebsockets.net/ http://alchemywebsockets.net/ Apache ActiveMQ (Java) http://activemq.apache.org/ http://activemq.apache.org/ apache-websocket (C) https://github.com/disconnect/apache- websocket#readme https://github.com/disconnect/apache- websocket#readme APE Project (C) http://www.ape-project.org/ http://www.ape-project.org/ Autobahn (virtual appliance) http://www.caucho.com/ http://www.caucho.com/ Cowboy https://github.com/extend/cowboy Cramp (Ruby) http://cramp.in/ https://github.com/extend/cowboy http://cramp.in/ Diffusion (Commercial product) http://www.pushtechnology.com/home http://www.pushtechnology.com/home EM-WebSocket (Ruby) https://github.com/igrigorik/em-websocket https://github.com/igrigorik/em-websocket Extendible Web Socket Server (PHP) https://github.com/wkjagt/Extendible-Web- Socket-Server https://github.com/wkjagt/Extendible-Web- Socket-Server gevent-websocket (Python) http://www.gelens.org/code/gevent- websocket/ http://www.gelens.org/code/gevent- websocket/ GlassFish (Java) http://glassfish.java.net/ http://glassfish.java.net/ Goliath (Ruby) https://github.com/postrank-labs/goliath https://github.com/postrank-labs/goliath Jetty (Java) http://jetty.codehaus.org/jetty/ jWebsocket (Java) http://jwebsocket.org/ http://jwebsocket.org/ Kaazing WebSocket Gateway (Java) http://www.kaazing.com http://www.kaazing.com libwebsockets (C) http://git.warmcat.com/cgi-bin/cgit/libwebsockets/ http://git.warmcat.com/cgi-bin/cgit/libwebsockets/ Misultin (Erlang) https://github.com/ostinelli/misultin https://github.com/ostinelli/misultin net.websocket (Go) http://code.google.com/p/go.net/websocket http://code.google.com/p/go.net/websocket Netty (Java) http://netty.io/ http://netty.io/ Nugget (.NET) http://nugget.codeplex.com/ http://nugget.codeplex.com/ Orbited (Python) http://labs.gameclosure.com/orbited2 http://labs.gameclosure.com/orbited2 phpdaemon (PHP) http://phpdaemon.net/ http://phpdaemon.net/ Pusher (cloud service) http://pusher.com/ http://pusher.com/ pywebsockets (Python) http://code.google.com/p/pywebsocket/ http://code.google.com/p/pywebsocket/ RabbitMQ (Erlang) https://github.com/videlalvaro/rabbitmq- websockets https://github.com/videlalvaro/rabbitmq- websockets Socket.io (Node.js) http://socket.io/ http://socket.io/ SockJS-node (Node)https://github.com/sockjs/sockjs-nodehttps://github.com/sockjs/sockjs-node SuperWebSocket (.NET) http://superwebsocket.codeplex.com/ http://superwebsocket.codeplex.com/ Tomcat (Java) http://tomcat.apache.org/ http://tomcat.apache.org/ Tornado (python) http://www.tornadoweb.org/ http://www.tornadoweb.org/ txWebSocket (Python) https://github.com/rlotun/txWebSocket https://github.com/rlotun/txWebSocket vert.x (Java) http://vertx.io/ http://vertx.io/ Watersprout (PHP) http://spoutserver.com/ http://spoutserver.com/ web-socket-ruby (Ruby) https://github.com/gimite/web-socket-ruby Webbit (Java) https://github.com/webbit/webbit WebSocket-Node (Node.js) https://github.com/Worlize/WebSocket-Node https://github.com/Worlize/WebSocket-Node websockify (Python) https://github.com/kanaka/websockify https://github.com/kanaka/websockify XSockets (.NET) http://xsockets.net/ http://xsockets.net/ Yaws (Erlang) http://yaws.hyber.org/websockets.yaws http://yaws.hyber.org/websockets.yaws

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! http://demo.kaazing.com/presso http://demo.kaazing.com/presso

29. Insert ritual dance to the demo gods here… http://demo.kaazing.com/presso http://demo.kaazing.com/presso

30.  You Me    WebSocket   http://demo.kaazing.com/presso Diagram and Presso system: @pmoskovi (based on impress.js)impress.js

31. WebSocket Demo http://demo.kaazing.com/forex/

32. WebSocket Demo http://demo.kaazing.com/racer/

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: peter.lubbers@kaazing.com Twitter: @peterlubbers LinkedIn: Peter Lubbers

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

37. Additional Resources SFHTML5 Talk about Connectivity and Real Time Presentation: http://www.slideshare.net/peterlubbers/html5-realtime-and- connectivity http://www.slideshare.net/peterlubbers/html5-realtime-and- connectivity HTML5 Weekly Newsletter: http://html5weekly.com/ http://html5weekly.com/ The Web Ahead Podcast: http://5by5.tv/webahead/ http://5by5.tv/webahead/ San Francisco HTML5 User Group (monthly presentations and videos): http://sfhtml5.org http://sfhtml5.org Kaazing WebSocket Gateway: http://kaazing.com/ http://kaazing.com/

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

39. -