Application

Report
The HTML5 Connectivity Revolution
@peterlubbers
License plate: @peterlubbers
Image: @rdclark
Image: @jeffreypalermo
Agenda
• A is for Applications
• B is for Bi-Directional
• C is for Connectivity
#devcon5
@peterlubbers
#html5
‘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
HTML5 Feature Areas
HTML5 Feature Areas
Browser Support
Native Support:
• http://caniuse.com
• http://mobilehtml5.org/
Polyfills (emulation):
• Modernizr’s All in One page: http://goo.gl/szvyv
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
Architecture
100% Hipster
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/
Cross Document
Messaging
PostMessage
Architecture
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
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/
 Level 1
XMLHttpRequest
 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
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 unnecessary
overhead and latency
• A socket in your browser!
If You Want to Build Web Apps for…
•
•
•
•
•
•
Financial trading
Social networking
Gaming
Gambling
System monitoring
RFID tracking
…
WebSocket to the rescue!
Serious Overhead Reduction
Huge Latency Reduction
Using Comet
Using WebSocket
http://webtide.intalio.com/2011/09/cometd-2-4-0-websocket-benchmarks/
(Fairly) Complete List of WebSocket Servers
•
•
•
•
•
•
•
•
•
•
•
•
Alchemy-Websockets (.NET)
http://alchemywebsockets.net/
Apache ActiveMQ (Java)
http://activemq.apache.org/
apache-websocket (C)
https://github.com/disconnect/apachewebsocket#readme
APE Project (C)
http://www.ape-project.org/
Autobahn (virtual appliance)
http://www.caucho.com/
Cowboy
https://github.com/extend/cowboy
Cramp (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-WebSocket-Server
gevent-websocket (Python)
http://www.gelens.org/code/geventwebsocket/
GlassFish (Java)
http://glassfish.java.net/
Goliath (Ruby)
https://github.com/postrank-labs/goliath
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
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/rabbitmqwebsockets
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
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
Insert ritual dance to the demo gods here…
http://demo.kaazing.com/presso
http://demo.kaazing.com/presso
 You
WebSocket
Diagram and Presso system: @pmoskovi (based on impress.js)
WebSocket Demo
http://demo.kaazing.com/forex/
WebSocket Demo
http://demo.kaazing.com/racer/
Securing HTML5 Communication
Image: @ultrarunwild
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 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:
HTL528
http://goo.gl/Dzq4A
Additional Resources
• SFHTML5 Talk about Connectivity and Real Time Presentation:
http://www.slideshare.net/peterlubbers/html5-realtime-andconnectivity
• 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/
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: [email protected]
-

similar documents