Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The HTML5 Connectivity Revolution

The HTML5 Connectivity Revolution

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


May 02, 2012

More Decks by marakana

Other Decks in Technology


  1. Agenda   •  A  is  for  Applica-ons   •  B

     is  for  Bi-­‐Direc-onal   •  C  is  for  Connec-vity   #devcon5   @peterlubbers   #html5  
  2. ‘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  
  3. 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      
  4. HTML5  “Paves  the  Cow  Paths”   •  A  pragma-c  approach

        •  Fix  real-­‐world  problems   •  Especially  true  for     Connec-vity  features  
  5. 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  
  6. 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/    
  7. 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  
  8. 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/    
  9. 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  
  10. 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!  
  11. If  You  Want  to  Build  Web  Apps  for…   • 

    Financial  trading   •  Social  networking   •  Gaming     •  Gambling     •  System  monitoring   •  RFID  tracking   …          WebSocket  to  the  rescue!  
  12. Huge  Latency  Reduc-on   Using  Comet   Using  WebSocket  

  13. 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      
  14. ß  You   WebSocket   h]p://demo.kaazing.com/presso       Diagram

     and  Presso  system:  @pmoskovi  (based  on  impress.js)  
  15. 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  
  16. Buy  the  Book!       •  Pro  HTML5  Programming

        2nd  EdiHon  (Apress,  2011)   •  40%  off  e-­‐book  coupon  code:   HTL528   h]p://goo.gl/Dzq4A    
  17. 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/    
  18. 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:  [email protected]