The HTML5 Connectivity Revolution
License plate: @peterlubbers
Image: @rdclark
Image: @jeffreypalermo
• A is for Applications
• B is for Bi-Directional
• C is for Connectivity
‘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
formed 2 days later
– Web Applications 1.0  HTML5
HTML5 Feature Areas
HTML5 Feature Areas
Browser Support
Native Support:
Polyfills (emulation):
• Modernizr’s All in One page:
HTML5 “Paves the Cow Paths”
• A pragmatic approach
• Fix real-world problems
• Especially true for
Connectivity features
HTML5 Connectivity
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
Traditional Architecture
100% Half Duplex
Modern Web Application
100% Hipster
Cross Document Messaging
• Enables secure cross-origin communication
across iframes, tabs, and windows
• PostMessage API (also used in Web
• Demo: DZSLides (Paul Rouget, Mozilla):
Cross Document
HTML5 introduces Cross-Origin Resource Sharing
Allows (safe) exemptions
from the Same-Origin Policy
– “With CORS you receive data instead of [JSONP] code,
which you can parse safely”
—Frank Salim
XMLHttpRequest Level 2
• Improvements over Level 1:
– Cross-origin XMLHttpRequest
– Progress events
– Binary support
• Specification:
• Demo:
 Level 1
 Level 2
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
SSE Architecture
• 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 unnecessary
overhead and latency
• A socket in your browser!
If You Want to Build Web Apps for…
Financial trading
Social networking
System monitoring
RFID tracking
WebSocket to the rescue!
Serious Overhead Reduction
Huge Latency Reduction
Using Comet
Using WebSocket
(Fairly) Complete List of WebSocket Servers
Alchemy-Websockets (.NET)
Apache ActiveMQ (Java)
apache-websocket (C)
APE Project (C)
Autobahn (virtual appliance)
Cramp (Ruby)
Diffusion (Commercial product)
EM-WebSocket (Ruby)
Extendible Web Socket Server (PHP)
gevent-websocket (Python)
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) (Node.js)
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)
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)
 Any TCP-based protocol
• The browser becomes a first-class network citizen
• Demo: This presentation in real time!
Insert ritual dance to the demo gods here…
 You
Diagram and Presso system: @pmoskovi (based on impress.js)
WebSocket Demo
WebSocket Demo
Securing HTML5 Communication
Image: @ultrarunwild
Securing HTML5 Communication
• 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
• E-mail: [email protected]
• Twitter: @peterlubbers
• LinkedIn: Peter Lubbers
Buy the Book!
• Pro HTML5 Programming
2nd Edition (Apress, 2011)
• 40% off e-book coupon code:
Additional Resources
• SFHTML5 Talk about Connectivity and Real Time Presentation:
• HTML5 Weekly Newsletter:
• The Web Ahead Podcast:
• San Francisco HTML5 User Group
(monthly presentations and videos):
• Kaazing WebSocket Gateway:
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: [email protected]

similar documents