Realtime
 Web
 Apps
In 2014 & Beyond
Phil @leggetter
Realtime Web Apps
↓
s/Web/Internet
↓
Realtime Internet Apps
Internet Usage (per day)
†
200 billion emails
7 million blog posts written
500 million tweets
55 million Facebook status u...
The Internet...
1. is
 the
 communications
 platform
2. is
 becoming
 the
 entertainment
 platform
When
 do
 we
 need
 Realtime?
Data
Is there a timely nature to the data?
User Experience
Is there a timely nature to the experience?
Realtime is required when there's a
Need or Demand for:
Up to date information
Interaction to maintain engagement
These
 aren't
 new
 Needs
 or
Demands
HTTP,
 Browsers
 &
 Servers
 made
it
 Difficult
What made it difficult?
HTTP - request/response paradigm
Keeping persistent HTTP connections alive
No cross-browser XMLHtt...
Hacks & Tricks
Java Applets
Flash
HTTP Hacks
Driving
 Forces
 behind
 the
 Hacks?
Realtime
 Going
 Mainstream
A
 Realisation
 &
 Demonstration
 of
Value
Accessible
 Realtime
 Technology
Improved Server Power
Processors and Memory are cheaper & faster
More data can be processes
Connections can be dealt with
...
Web Browser Capabilities and
Consistency
Cross browser XMLHTTPRequest support
CORS
Server Sent Events / EventSource
WebSoc...
Software Choice
Lots of language & runtime options
More open source solutions
Hosted services
Any
 Client
 Technology
Realtime
 Apps
 in
 2014
Notifications
 &
 Signalling
Internet ^5 Machine
0:48
talky.io
Receive
 message
var sock = new SockJS( 'http://localhost:9999/sockjs' );
sock.onmessage = function( e ) {
console.log( 'm...
Simple Messaging Solutions
Server/Server
WebHooks
Client/Server
WebSocket-only or HTTP-only solutions
Peer-to-Peer
SockJS
...
Lots
 of
 Data
0:55
Subscribe
var pusher = new Pusher( APP_KEY );
var channel = pusher.subscribe( 'game-overview' );
channel.bind( 'goal_score...
PubSub Solutions
Self Hosted
Hosted
Socket.IO
Faye
XSockets
GoInstant
Hydna
PubNub
Pusher
Realtime.co
Complex
 Client/Server
Interactions
Server
public class GameHub : Hub {
public void Move(Player p, int x, int y) {
// Check if move is allowed
// Call the bro...
RMI Solutions
Self Hosted:
Hosted:
SignalR
 on
 Windows
 Azure?
dNode
SignalR
Java.rmi
Collaborating
 on
 Data
Physical Collaborative Mapping
1:10
DataSync
var myDataRef = new Firebase('https://my-app.firebaseio.com/');
myDataRef.push( {creator: '@leggetter', text: 'No...
Data Sync Solutions
Self Hosted:
+
Hosted:
DerbyJS
Meteor
CouchDB pouchdb
Firebase
Google Drive Realtime API
GoInstant
Rea...
Choosing
 a
 Solution
Beyond
Network Infrastructure
Reliablity
Speed
Beyond HTTP
More
 "Things"!
0:32
And
 APIs...
Use Realtime
Twilio
SendGrid
MailChimp
Iron.io
GitHub
Trello
...
APIs for APIs
Fanout.io
IoT Platforms
SmartThings
NinjaBlocks
EvryThing
SKYNET.im
MQTT
MQTT
 is
 a
 machine-to-machine
(M2M)/"Internet
 of
 Things"
connectivity
 protocol.
MQTT
HiveMQ
Eclipse Paho
Multi-Device
 Experiences
Watch_Dogs
1:07
Realtime
 Internet
 Apps
 =
Internet
 of
 Things
 =
Web Browsers +
Web Servers +
Native Apps +
Devices +
Thanks!
Questions?
Phil @leggetter
BladeRunnerJS
j.mp/realtime-sotr14
j.mp/realtime-tech-guide
Realtime Web Apps in 2014 & Beyond
Realtime Web Apps in 2014 & Beyond
Realtime Web Apps in 2014 & Beyond
Realtime Web Apps in 2014 & Beyond
Realtime Web Apps in 2014 & Beyond
Realtime Web Apps in 2014 & Beyond
Realtime Web Apps in 2014 & Beyond
Realtime Web Apps in 2014 & Beyond
Realtime Web Apps in 2014 & Beyond
Realtime Web Apps in 2014 & Beyond
Realtime Web Apps in 2014 & Beyond
Realtime Web Apps in 2014 & Beyond
Realtime Web Apps in 2014 & Beyond
Realtime Web Apps in 2014 & Beyond
Realtime Web Apps in 2014 & Beyond
Realtime Web Apps in 2014 & Beyond
Realtime Web Apps in 2014 & Beyond
Realtime Web Apps in 2014 & Beyond
Realtime Web Apps in 2014 & Beyond
Realtime Web Apps in 2014 & Beyond
Realtime Web Apps in 2014 & Beyond
Realtime Web Apps in 2014 & Beyond
Realtime Web Apps in 2014 & Beyond
Realtime Web Apps in 2014 & Beyond
Realtime Web Apps in 2014 & Beyond
Realtime Web Apps in 2014 & Beyond
Realtime Web Apps in 2014 & Beyond
Upcoming SlideShare
Loading in …5
×

Realtime Web Apps in 2014 & Beyond

1,768 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
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,768
On SlideShare
0
From Embeds
0
Number of Embeds
60
Actions
Shares
0
Downloads
34
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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

×