The HTML5 Connectivity Revolution

Peter Lubbers' talk from DevCon5. See the video at: http://mrkn.co/xjjmk

Transcript

1. The  HTML5  Connec-vity  Revolu-on     @peterlubbers  
2. License  plate:  @peterlubbers  
3. Image:  @rdclark  
4. Image:  @jeffreypalermo  
5. Agenda   •  A  is  for  Applica-ons   •  B  is  for  Bi-­‐Direc-onal   •  C  is  for  Connec-vity   #devcon5   @peterlubbers   #html5  
6. ‘A’  is  for  (Web)  Applica-ons   •  June  2004  W3C  Mee-ng  in  San  Jose,  California:   –  Discussion  about  the  rise  of  web  applica-ons   –  Vote  on  upda-ng  HTML  for  web  applica-ons:   ü 8  For   ü 14  Against   •  Result:   –  Web  Hypertext  Applica*on     Technology  Working  Group     (WHATWG)     formed  2  days  later   –  Web  Applica*ons  1.0  à  HTML5  
7. HTML5  Feature  Areas  
8. HTML5  Feature  Areas  
9. Browser  Support   Na*ve  Support:   •  h]p://caniuse.com     •  h]p://mobilehtml5.org/     Polyfills  (emula*on):   •  Modernizr’s  All  in  One  page:  h]p://goo.gl/szvyv      
10. HTML5  “Paves  the  Cow  Paths”   •  A  pragma-c  approach     •  Fix  real-­‐world  problems   •  Especially  true  for     Connec-vity  features  
11. HTML5  Connec-vity  
12. Hang  on,  I  can  already  do  that!   Yes,  but…   •  Same-­‐origin  restric-ons   •  JSON  with  Padding  (JSONP)  vulnerabili-es   •  Half-­‐duplex  HTTP  architecture   •  Reverse  Ajax  (COMplExiTy!)   –  Excessive  Overhead   –  High  Latency  
13. Tradi-onal  Architecture   100%  Half  Duplex  
14. Modern  Web  Applica-on   Architecture   100%  Hipster  
16. Cross  Document  Messaging   •  Enables  secure  cross-­‐origin  communica-on   across  iframes,  tabs,  and  windows   •  PostMessage  API  (also  used  in  Web   Workers)   •  Demo:  DZSLides  (Paul  Rouget,  Mozilla):   h]p://paulrouget.com/dzslides/    
17. PostMessage  Architecture   Cross  Document   Messaging  
18. CORS   •  HTML5  introduces  Cross-­‐Origin  Resource  Sharing   (CORS)   –  h]p://www.w3.org/TR/cors/     –  h]p://enable-­‐cors.org   •  Allows  (safe)  exemp-ons     from  the  Same-­‐Origin  Policy   –  “With  CORS  you  receive  data  instead  of  [JSONP]  code,   which  you  can  parse  safely”   —Frank  Salim  
19. XMLH]pRequest  Level  2   •  Improvements  over  Level  1:   – Cross-­‐origin  XMLH]pRequest   – Progress  events   – Binary  support   •  Specifica-on:   h]p://www.w3.org/TR/XMLH]pRequest/     •  Demo:   h]p://www.html5rocks.com/en/tutorials/file/xhr2/    
20. ß  Level  2   XMLH]pRequest   ß  Level  1  
21. Server-­‐Sent  Events   •  Standardizes  sending  a  con-nuous  stream  of   data  from  server  to  browser   •  EventSource  API   •  Great  for  newsfeeds,  one-­‐way  streams  of  data   •  SSE-­‐specific  features:   ü  Automa-c  reconnec-on   ü  Event  IDs  
22. SSE  Architecture  
23. WebSocket     •  New  API  (W3C)  and  Protocol  (IETF  RFC  6455)   •  Allows  browser  to  communicate  with  a  remote  host   •  Full-­‐duplex  (bi-­‐direc-onal),  single  socket   •  Port  80/443  (ws://  and  wss://)   •  Huge  reduc-on  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  Reduc-on  
26. Huge  Latency  Reduc-on   Using  Comet   Using  WebSocket   h]p://web-de.intalio.com/2011/09/cometd-­‐2-­‐4-­‐0-­‐websocket-­‐benchmarks/    
27. http://autobahn.ws/
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  ci-zen   •  Demo:  This  presenta-on  in  real  -me!   h]p://demo.kaazing.com/presso      
29. Insert  ritual  dance  to  the  demo  gods  here…   h]p://demo.kaazing.com/presso      
30. ß  You   WebSocket   h]p://demo.kaazing.com/presso       Diagram  and  Presso  system:  @pmoskovi  (based  on  impress.js)  
31. WebSocket  Demo     h]p://demo.kaazing.com/forex/    
32. WebSocket  Demo   h]p://demo.kaazing.com/racer/    
33. Image:  @ultrarunwild   Securing  HTML5  Communica*on  
34. Securing  HTML5  Communica-on   •  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  geCng  this  (SPDY)  protocol  out   in  our  live  Hme”   —Roberto  Peon  (Google)   •  And  more:   –  Single  Sign-­‐On,  Authen-ca-on  and  Authoriza-on     For  example,  Kaazing  Kerberos  protocol  over  WS  
35. •  E-­‐mail:  peter.lubbers@kaazing.com   •  TwiVer:  @peterlubbers   •  LinkedIn:  Peter  Lubbers  
36. Buy  the  Book!       •  Pro  HTML5  Programming     2nd  EdiHon  (Apress,  2011)   •  40%  off  e-­‐book  coupon  code:   HTL528   h]p://goo.gl/Dzq4A    
37. Addi-onal  Resources     •  SFHTML5  Talk  about  Connec-vity  and  Real  Time  Presenta-on:   h]p://www.slideshare.net/peterlubbers/html5-­‐real-me-­‐and-­‐ connec-vity     •  HTML5  Weekly  Newsle]er:   h]p://html5weekly.com/     •  The  Web  Ahead  Podcast:   h]p://5by5.tv/webahead/     •  San  Francisco  HTML5  User  Group     (monthly  presenta-ons  and  videos):   h]p://sutml5.org     •  Kaazing  WebSocket  Gateway:   h]p://kaazing.com/    
38. HTML5  Training   •  Kaazing  University  provides  proven,  prac-cal  HTML5   training  worldwide  (experts,  not  just  trainers)   •  Customers  include  Google,  Cisco,  Intel,  and  more   •  Web  site:  h]p://kaazing.com/training/   •  E-­‐mail  us:  training@kaazing.com  
39. -­‐