Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Realtime Web Apps in 2014 & Beyond

1,876 views

Published on

It has 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 thanks to technologies like WebSockets and solutions like SignalR, socket.io, Faye and Pusher. In this sessions I'll cover the past, present and future of client/server communication technology, the realtime web and provide a number of use cases and demonstrations of how the technology is actually used today (it's not just chat and spaceship games).

Published in: Technology
  • Be the first to comment

Realtime Web Apps in 2014 & Beyond

  1. 1. Realtime Web Apps In 2014 & Beyond Phil @leggetter
  2. 2. Realtime Web Apps ↓ s/Web/Internet ↓ Realtime Internet Apps
  3. 3. Internet Usage (per day) † 200 billion emails 7 million blog posts written 500 million tweets 55 million Facebook status updates 5 billion Google+ +1's 60 million Instagram photos posted 33 million hours of Netflix watched 200 million hours of YouTube watched 2 billion minutes spent on Skype
  4. 4. The Internet... 1. is the communications platform 2. is becoming the entertainment platform
  5. 5. When do we need Realtime?
  6. 6. Data Is there a timely nature to the data?
  7. 7. User Experience Is there a timely nature to the experience?
  8. 8. Realtime is required when there's a Need or Demand for: Up to date information Interaction to maintain engagement
  9. 9. These aren't new Needs or Demands
  10. 10. HTTP, Browsers & Servers made it Difficult
  11. 11. What made it difficult? HTTP - request/response paradigm Keeping persistent HTTP connections alive No cross-browser XMLHttpRequest 2 connection limit No browser cross origin support General cross browser incompatibilities
  12. 12. Hacks & Tricks Java Applets Flash HTTP Hacks
  13. 13. Driving Forces behind the Hacks?
  14. 14. Realtime Going Mainstream
  15. 15. A Realisation & Demonstration of Value
  16. 16. Accessible Realtime Technology
  17. 17. Improved Server Power Processors and Memory are cheaper & faster More data can be processes Connections can be dealt with Scaling is easier
  18. 18. Web Browser Capabilities and Consistency Cross browser XMLHTTPRequest support CORS Server Sent Events / EventSource WebSocket WebRTC
  19. 19. Software Choice Lots of language & runtime options More open source solutions Hosted services
  20. 20. Any Client Technology
  21. 21. Realtime Apps in 2014
  22. 22. Notifications & Signalling
  23. 23. Internet ^5 Machine 0:48
  24. 24. talky.io
  25. 25. Receive message var sock = new SockJS( 'http://localhost:9999/sockjs' ); sock.onmessage = function( e ) { console.log( 'message', e.data ); }; Send Message var http = require('http'); sockjs = require('sockjs'); var hello = sockjs.createServer(); hello.on( 'connection' , function( conn ) { conn.write( 'hello SockJS' ); } ); var server = http.createServer(); hello.installHandlers( server, { prefix:'/sockjs' } ); server.listen( 9999, '0.0.0.0' );
  26. 26. Simple Messaging Solutions Server/Server WebHooks Client/Server WebSocket-only or HTTP-only solutions Peer-to-Peer SockJS Engine.IO Primus simpleWebRTC PeerJS
  27. 27. Lots of Data
  28. 28. 0:55
  29. 29. Subscribe var pusher = new Pusher( APP_KEY ); var channel = pusher.subscribe( 'game-overview' ); channel.bind( 'goal_scored', function( data ) { // Handle Update } ); channel.bind( 'time_updated', function( data ) { } ); Publish var pusher = new Pusher( APP_KEY ); var data = { team_id = 'manchester_city', goals_scored: 2, goal_scorer: 'Sergio Agüero' }; pusher.trigger( 'game-overview', 'goal_scored', data );
  30. 30. PubSub Solutions Self Hosted Hosted Socket.IO Faye XSockets GoInstant Hydna PubNub Pusher Realtime.co
  31. 31. Complex Client/Server Interactions
  32. 32. Server public class GameHub : Hub { public void Move(Player p, int x, int y) { // Check if move is allowed // Call the broadcastMessage method to update clients. Clients.All.playerMoved(p, x, y); } } Client $.connection.hub.start(); // async var game = $.connection.gameHub; game.client.playerMoved = function (player, x, y) { // update game }; game.server.move( me, x, y );
  33. 33. RMI Solutions Self Hosted: Hosted: SignalR on Windows Azure? dNode SignalR Java.rmi
  34. 34. Collaborating on Data
  35. 35. Physical Collaborative Mapping 1:10
  36. 36. DataSync var myDataRef = new Firebase('https://my-app.firebaseio.com/'); myDataRef.push( {creator: '@leggetter', text: 'Not a Test!'} ); myDataRef.on( 'child_added', function(snapshot) { // Add the data }); myDataRef.on( 'child_changed', function(snapshot) { // Update the data }); myDataRef.on( 'child_removed', function(snapshot) { // Remove the data });
  37. 37. Data Sync Solutions Self Hosted: + Hosted: DerbyJS Meteor CouchDB pouchdb Firebase Google Drive Realtime API GoInstant Realtime.co Simperium
  38. 38. Choosing a Solution
  39. 39. Beyond
  40. 40. Network Infrastructure Reliablity Speed Beyond HTTP
  41. 41. More "Things"!
  42. 42. 0:32
  43. 43. And APIs...
  44. 44. Use Realtime Twilio SendGrid MailChimp Iron.io GitHub Trello ... APIs for APIs Fanout.io
  45. 45. IoT Platforms SmartThings NinjaBlocks EvryThing SKYNET.im
  46. 46. MQTT MQTT is a machine-to-machine (M2M)/"Internet of Things" connectivity protocol. MQTT HiveMQ Eclipse Paho
  47. 47. Multi-Device Experiences
  48. 48. Watch_Dogs
  49. 49. 1:07
  50. 50. Realtime Internet Apps = Internet of Things = Web Browsers + Web Servers + Native Apps + Devices +
  51. 51. Thanks! Questions? Phil @leggetter BladeRunnerJS j.mp/realtime-sotr14 j.mp/realtime-tech-guide

×