Web Browsers &
 the Realtime Web 
       the past, present & future
Techmeetup Edinburgh ­ 08/02/2012
Who is this guy?
 Phil Leggetter
 www.leggetter.co.uk
 @leggetter
 Developer Evangelist at Pusher
Overview
     What is Realtime & the Realtime web
     History of browsers & the Realtime web*
     What technology can we use now?
     Future
     Questions
* ­ according to me
What is Realtime?
     systems that are subject to a "real-time constraint"— e.g. operational
     deadlines from event to system response

Source: Wikipedia: Realtime Computing




What is the Realtime web?
     The real-time web is a set of technologies and practices that enable
     users to receive information as soon as it is published by its authors,
     rather than requiring that they or their software check a source
     periodically for updates.
Source: Wikipedia: Realtime web
Publish & Subscribe
+Phil Search Images Videos Maps News Shopping Gmail More


                            aliens
Why the Realtime Web
matters
 Opportunity
 Convenience
 Interaction
 Engagement
History (according to me)
  My first Job = WOW!
Java Applets
<PLTCD=ra_iesufcas WDH10
APE OE"eltm_tf.ls" IT=5
HIH=5MYCIT
EGT1 ASRP>



 LiveConnect
     "Allows Java and JavaScript software to
     intercommunicate within a Web page"

 Applets were a problem.
     Microsoft had to drop support their JVM (were sued).
     Sun Microsystems releases kept breaking stuff.
Users/Sys admins
  didn't want to
 install plugins!
<frame> Polling




Source
<frame> Long­Polling




Source
<frame> Streaming




Source
XMLHttpRequest
 IE5 in 1999 via ActiveX
 Slowly but surely adopted by all web browser
 Allows
     Polling
     Long­Polling
     Streaming

 AJAX term coined in 2005
     The term Ajax was coined on 18 February 2005 by
     Jesse James Garrett in an article entitled "Ajax: A New
     Approach to Web Applications"
W3C working draft in 2006
    That's how fast technology used to move!
Crossdomain restrictions
     www.example.com ­> www.example.com √
     subdomain.example.com ­> www.example.com
     √*
     www.example.com ­> www.leggetter.co.uk X**
     CORS (Cross Origin Resource Sharing)
             Problem: Browser support (FF3.6+, IE8+ etc.)

* you need to set d c m n . o a n
                   o u e t d m i  to be 'example.com'
** there are ways around this with JSONP
Comet
 Term 'coined' in 2006 by Alex Russell

     Comet is a web application model in
     which a long-held HTTP request allows a
     web server to push data to a browser,
     without the browser explicitly requesting
     it. Comet is an umbrella term,
     encompassing multiple techniques for
     achieving this interaction.
WebSockets
 A protocol and an API
 Single bi­directional connection
 Supports cross domain communication

vrw =
 a s
  nwWbokt"s/mwboktevrcm8";
   e eSce(w:/yescesre.o:0)
w.npn=fnto( {
 sooe   ucin)
  / cneto etbihd
   / oncin salse
};

w.nesg =fnto(aa {/ rcieamsae
somsae   ucindt)  / eev   esg
 w.ed"e,gt "+dt) / sn amsae
 ssn(Yp o:    aa; / ed  esg

  w.ls(;
   scoe)
};

w.nls =fnto(v {;
socoe   ucine) }
w.nro =fnto( {;/ ?
soerr   ucin) } /
What can we use now?
      HTTP Polling √ß
      HTTP Long­Polling √ß
      HTTP Streaming √
      HTML5 WebSockets √*
* ­ See next slide
ß ­ Boo!


Also checkout: http://html5please.us | http://caniuse.com | http://html5readiness.com
WebSocket Support




     Can use on IE6, IE7, IE8, IE9 and other older
     mainstream browsers with web­socket­js Polyfil
     Can use on Android with FlashLite or using
     Firefox for Android and probably Chrome for
     Android.
Source: http://caniuse.com
How is this
technology being
   used now?
Realtime data
 Sports, Finance, betting, grids etc.
Notifications
 Alerts or system
 events e.g. long running
 process has completed (async
 web).

 Realtime comments
 Activity streams
 Live blogging
Chat
 Probably the No.1 use case
Collaboration
 Document collaboration and synchronisation
Social TV
 2nd screen experiences, 2­Screen, Sit forward
 TV
Multiplayer Games
 Game actions
    Player/object moves, etc

 Game state changes
WordSquared
WordSquared (Map)
Iso City
Built on Isogenic Engine
Free Civ




Not available anymore ­ don't know why
Rawkets
Built by Rob Hawkes: Technology Evangelist at Mozilla.
Sierra Games
Technologies
 Self Hosted:
     socket.io ­ node.js
     SockJS ­ Client library with multiple server options
     (node.js/erlang/lua/python)
     FAYE ­ node.js/ruby
     XSockets ­ .NET
     PHP developer? No chance! Well, there are a few options.

 Hosted (platform agnostic)
     Pusher
     There might be others :o)

 Full Guide here:
     http://www.leggetter.co.uk/real­time­web­technologies­guide
The future of Realtime Web
technology
 WebSockets
     Full native browser support
     Not just web browsers

 UX considerations
 Performance considerations
 WebHooks
     We still live in a HTTP World
     Realtime server to server communication
The Internet of Things
Arduino's taking over the
World!
Questions?/Thanks
 I'm putting together a realtime web workshop. If
 you are interested in attending please give me a
 shout.
 Pusher (@pusher) are hiring
     http://pusher.com/jobs
     Mobile Evangelist, Developer Evangelist, Engineer,
     Head of Ops

 Phil Leggetter, @leggetter

Web browsers & the realtime web