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

2 License

3

4

5 Agenda A is for Applications B is for Bi-Directional C is for Connectivity #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

8

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

15

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) https://github.com/disconnect/apache- websocket#readme https://github.com/disconnect/apache- websocket#readme APE Project (C) Autobahn (virtual appliance) Cowboy https://github.com/extend/cowboy Cramp (Ruby) https://github.com/extend/cowboy Diffusion (Commercial product) 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) websocket/ websocket/ GlassFish (Java) Goliath (Ruby) https://github.com/postrank-labs/goliath https://github.com/postrank-labs/goliath Jetty (Java) jWebsocket (Java) Kaazing WebSocket Gateway (Java) libwebsockets (C) Misultin (Erlang) https://github.com/ostinelli/misultin https://github.com/ostinelli/misultin net.websocket (Go) Netty (Java) Nugget (.NET) Orbited (Python) phpdaemon (PHP) Pusher (cloud service) pywebsockets (Python) RabbitMQ (Erlang) https://github.com/videlalvaro/rabbitmq- websockets https://github.com/videlalvaro/rabbitmq- websockets Socket.io (Node.js) SockJS-node (Node)https://github.com/sockjs/sockjs-nodehttps://github.com/sockjs/sockjs-node SuperWebSocket (.NET) Tomcat (Java) Tornado (python) txWebSocket (Python) https://github.com/rlotun/txWebSocket https://github.com/rlotun/txWebSocket vert.x (Java) Watersprout (PHP) 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) 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 (based on impress.js)impress.js

31 WebSocket Demo

32 WebSocket Demo

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

39 -


Download ppt "The HTML5 Connectivity License"

Similar presentations


Ads by Google