1) Realtime applications are becoming more mainstream as internet usage grows and technologies improve to enable realtime experiences. The internet is now a communications and entertainment platform. 2) Factors driving realtime applications include accessible technologies like WebSockets, improved server capabilities, and the need for up-to-date and engaging experiences with notifications, signaling, and data synchronization. 3) Popular realtime technologies now include messaging/signaling solutions like Socket.IO, data streaming with Pusher, collaborative editing with Firebase, and integrating realtime with other APIs and devices for IoT applications. Realtime connects the internet of things, web browsers, servers, native apps, and devices.

1. Realtime
Web
Apps
In 2014 & Beyond
Phil @leggetter

4. Realtime Web Apps
↓
s/Web/Internet
↓
Realtime Internet Apps

5. 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

6. The Internet...
1. is
the
communications
platform
2. is
becoming
the
entertainment
platform

8. When
do
we
need
Realtime?

9. Data
Is there a timely nature to the data?

11. User Experience
Is there a timely nature to the experience?

12. Realtime is required when there's a
Need or Demand for:
Up to date information
Interaction to maintain engagement

13. These
aren't
new
Needs
or
Demands

14. HTTP,
Browsers
&
Servers
made
it
Difficult

15. 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

17. Hacks & Tricks
Java Applets
Flash
HTTP Hacks

18. Driving
Forces
behind
the
Hacks?

23. Realtime
Going
Mainstream

24. A
Realisation
&
Demonstration
of
Value

25. Accessible
Realtime
Technology

26. Improved Server Power
Processors and Memory are cheaper & faster
More data can be processes
Connections can be dealt with
Scaling is easier

27. Web Browser Capabilities and
Consistency
Cross browser XMLHTTPRequest support
CORS
Server Sent Events / EventSource
WebSocket
WebRTC

28. Software Choice
Lots of language & runtime options
More open source solutions
Hosted services

30. Any
Client
Technology

32. Realtime
Apps
in
2014

33. Notifications
&
Signalling

35. Internet ^5 Machine
0:48

36. talky.io

37. 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' );

38. Simple Messaging Solutions
Server/Server
WebHooks
Client/Server
WebSocket-only or HTTP-only solutions
Peer-to-Peer
SockJS
Engine.IO
Primus
simpleWebRTC
PeerJS

40. Lots
of
Data

43. 0:55

44. 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 );

45. PubSub Solutions
Self Hosted
Hosted
Socket.IO
Faye
XSockets
GoInstant
Hydna
PubNub
Pusher
Realtime.co

47. Complex
Client/Server
Interactions

50. 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 );

51. RMI Solutions
Self Hosted:
Hosted:
SignalR
on
Windows
Azure?
dNode
SignalR
Java.rmi

53. Collaborating
on
Data

56. Physical Collaborative Mapping
1:10

57. 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
});

58. Data Sync Solutions
Self Hosted:
+
Hosted:
DerbyJS
Meteor
CouchDB pouchdb
Firebase
Google Drive Realtime API
GoInstant
Realtime.co
Simperium

60. Choosing
a
Solution

63. Beyond

64. Network Infrastructure
Reliablity
Speed
Beyond HTTP

65. More
"Things"!

67. 0:32

68. And
APIs...

69. Use Realtime
Twilio
SendGrid
MailChimp
Iron.io
GitHub
Trello
...
APIs for APIs
Fanout.io

71. IoT Platforms
SmartThings
NinjaBlocks
EvryThing
SKYNET.im

73. MQTT
MQTT
is
a
machine-to-machine
(M2M)/"Internet
of
Things"
connectivity
protocol.
MQTT
HiveMQ
Eclipse Paho

74. Multi-Device
Experiences

75. Watch_Dogs

76. 1:07

77. Realtime
Internet
Apps
=
Internet
of
Things
=
Web Browsers +
Web Servers +
Native Apps +
Devices +

78. Thanks!
Questions?
Phil @leggetter
BladeRunnerJS
j.mp/realtime-sotr14
j.mp/realtime-tech-guide