Web browsers & the realtime web

1,874 views

Published on

It's been possible to instantly push information from a web server to a web browser for at least 10 years, but this technology has finally gone mainstream. In this talk I'll cover the past, present and future of web browser technology and the realtime web.

Slides saved as PDF from HTML presentation. Original presentation available here:
http://www.leggetter.co.uk/pres/techmeetup_edi_2012-02-08/

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,874
On SlideShare
0
From Embeds
0
Number of Embeds
23
Actions
Shares
0
Downloads
11
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Web browsers & the realtime web

  1. 1. Web Browsers & the Realtime Web  the past, present & futureTechmeetup Edinburgh ­ 08/02/2012
  2. 2. Who is this guy? Phil Leggetter www.leggetter.co.uk @leggetter Developer Evangelist at Pusher
  3. 3. Overview What is Realtime & the Realtime web History of browsers & the Realtime web* What technology can we use now? Future Questions* ­ according to me
  4. 4. What is Realtime? systems that are subject to a "real-time constraint"— e.g. operational deadlines from event to system responseSource: Wikipedia: Realtime ComputingWhat 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.
  5. 5. Source: Wikipedia: Realtime web
  6. 6. Publish & Subscribe+Phil Search Images Videos Maps News Shopping Gmail More aliens
  7. 7. Why the Realtime Webmatters Opportunity Convenience Interaction Engagement
  8. 8. History (according to me) My first Job = WOW!
  9. 9. Java Applets<PLTCD=ra_iesufcas WDH10APE OE"eltm_tf.ls" IT=5HIH=5MYCITEGT1 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.
  10. 10. Users/Sys admins didnt want to install plugins!
  11. 11. <frame> PollingSource
  12. 12. <frame> Long­PollingSource
  13. 13. <frame> StreamingSource
  14. 14. 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"
  15. 15. W3C working draft in 2006 Thats how fast technology used to move!
  16. 16. 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
  17. 17. 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.
  18. 18. WebSockets A protocol and an API Single bi­directional connection Supports cross domain communicationvrw = a s nwWbokt"s/mwboktevrcm8"; e eSce(w:/yescesre.o:0)w.npn=fnto( { sooe ucin) / cneto etbihd / oncin salse};w.nesg =fnto(aa {/ rcieamsaesomsae 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) } /
  19. 19. 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
  20. 20. 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
  21. 21. How is thistechnology being used now?
  22. 22. Realtime data Sports, Finance, betting, grids etc.
  23. 23. Notifications Alerts or system events e.g. long running process has completed (async web). Realtime comments Activity streams Live blogging
  24. 24. Chat Probably the No.1 use case
  25. 25. Collaboration Document collaboration and synchronisation
  26. 26. Social TV 2nd screen experiences, 2­Screen, Sit forward TV
  27. 27. Multiplayer Games Game actions Player/object moves, etc Game state changes
  28. 28. WordSquared
  29. 29. WordSquared (Map)
  30. 30. Iso City
  31. 31. Built on Isogenic Engine
  32. 32. Free CivNot available anymore ­ dont know why
  33. 33. Rawkets
  34. 34. Built by Rob Hawkes: Technology Evangelist at Mozilla.
  35. 35. Sierra Games
  36. 36. 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
  37. 37. The future of Realtime Webtechnology 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
  38. 38. The Internet of Things
  39. 39. Arduinos taking over theWorld!
  40. 40. Questions?/Thanks Im 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

×