1 / 39

The HTML5 Connectivity Revolution @peterlubbers

The HTML5 Connectivity Revolution @peterlubbers. License plate: @peterlubbers. Image: @rdclark. Image: @jeffreypalermo. Agenda. #devcon5 @peterlubbers #html5. A is for Applications B is for Bi-Directional C is for Connectivity. ‘ A ’ is for (Web) A pplications.

emiko
Download Presentation

The HTML5 Connectivity Revolution @peterlubbers

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. The HTML5 Connectivity Revolution @peterlubbers

  2. License plate: @peterlubbers

  3. Image: @rdclark

  4. Image: @jeffreypalermo

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

  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

  8. 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/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

  15. 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/

  16. Cross Document Messaging PostMessage Architecture

  17. CORS • HTML5 introduces Cross-Origin Resource Sharing (CORS) • http://www.w3.org/TR/cors/ • 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

  18. XMLHttpRequest Level 2 • Improvements over Level 1: • Cross-origin XMLHttpRequest • Progress events • Binary support • Specification:http://www.w3.org/TR/XMLHttpRequest/ • Demo:http://www.html5rocks.com/en/tutorials/file/xhr2/

  19.  Level 2  Level 1 XMLHttpRequest

  20. 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

  21. SSE Architecture

  22. WebSocket • New API (W3C) and Protocol (IETF 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 unnecessaryoverhead and latency • A socket in your browser!

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

  24. Serious Overhead Reduction

  25. Huge Latency Reduction Using Comet Using WebSocket http://webtide.intalio.com/2011/09/cometd-2-4-0-websocket-benchmarks/

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

  27. 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

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

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

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

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

  32. Securing HTML5 Communication Image: @ultrarunwild

  33. Securing HTML5 Communication • 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 outin our live time”—Roberto Peon (Google) • And more: • Single Sign-On, Authentication and Authorization For example, Kaazing Kerberos protocol over WS

  34. E-mail: peter.lubbers@kaazing.com • Twitter: @peterlubbers • LinkedIn: Peter Lubbers

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

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

  37. 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/ • E-mail us: training@kaazing.com

  38. -

More Related