It has been possible to instantly push information from a web server to a web browser for around 15 years. It's now 2015 and real-time web technology has been mainstream for a while thanks to the experiences offered by applications like Twitter, Facebook, Uber and Google Docs, and more recently the rise of the Internet of Things (IoT). Technology advancements have also played their part with low-level improvements such as WebSockets and WebRTC, and high-level frameworks and hosted solutions such as Pusher. In this talk Phil will cover the past, present and future of real-time communication technology, the realtime web, provide a number of case studies and demonstrations of how the technology is actually used today (it's not just chat and spaceship games!) and discuss where things may go in the future..

1. The Past, Present and
Future of Real-Time
Apps &
Communications
FOWA Boston 2015
1 / 97
@leggetter

2. Real-Time FOWA
2 / 97
@leggetter

3. 5 talks on Real-Time
Real-Time FOWA
2 / 97
@leggetter

4. 5 talks on Real-Time 4 talks on IoT
Real-Time FOWA
2 / 97
@leggetter

5. 5 talks on Real-Time 4 talks on IoT
Real-Time FOWA
21 talks at FOWA 2105
2 / 97
@leggetter

6. 5 talks on Real-Time 4 talks on IoT
Real-Time FOWA
21 talks at FOWA 2105
Over 40%talks on Real-Time
2 / 97
@leggetter

8. PHIL @LEGGETTER
Head of Developer Relations
4 / 97
@leggetter

9. 5 / 97
@leggetter

10. Realtime Web Apps (Past)
“The World Wide Web (www) is an information
space where documents and other web resources
are identified by URLs, interlinked by hypertext
links, and can be accessed via the Internet
6 / 97
@leggetter

11. Realtime Web Apps
7 / 97
@leggetter

12. Realtime Web Apps
↓
s/Web/Internet
7 / 97
@leggetter

13. Realtime Web Apps
↓
s/Web/Internet
↓
Realtime Internet Apps
7 / 97
@leggetter

14. When do we need Realtime?
8 / 97
@leggetter

15. Data
Is there a timely nature to the data?
9 / 97
@leggetter

16. User Experience
Is there a timely nature to the experience?
10 / 97
@leggetter

17. Realtime is required when there's a Need or
Demand for:
Up to date information
Interaction to maintain engagement (UX)
11 / 97
@leggetter

18. These aren't new Needs or Demands
But...
12 / 97
@leggetter

19. These aren't new Needs or Demands
But...
The Internet
12 / 97
@leggetter

20. 13 / 97
@leggetter

21. 14 / 97
@leggetter

22. 15 / 97
@leggetter

23. HTTP was better. But many wanted more.
16 / 97
@leggetter

24. 17 / 97
@leggetter

25. 18 / 97
@leggetter

26. 19 / 97
@leggetter

27. HTTP wasn't enough!
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
20 / 97
@leggetter

28. Hacks & Tricks
Java Applets
Flash
HTTP Hacks
21 / 97
@leggetter

29. Then Real-Time Went Mainstream
22 / 97
@leggetter

30. Social
23 / 97
@leggetter

31. Technology Advancements
Memory & CPU speed and cost
The cloud
Browser standardisation & enhancements
Any client can use the standards
24 / 97
@leggetter

32. 25 / 97
@leggetter

33. MASSIVE Increase in Internet Usage
26 / 97
@leggetter

34. Internet Usage (per day)
200 billion emails
27 / 97
@leggetter

35. Internet Usage (per day)
200 billion emails
7 million blog posts written†
500 million tweets
27 / 97
@leggetter

36. 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
2 billion minutes spent on Skype
33 million hours of Netflix watched
200 million hours of YouTube watched
27 / 97
@leggetter

37. 28 / 97
@leggetter

38. Realtime Apps in 2015
29 / 97
@leggetter

39. Realtime Apps in 2015 (Present)
Real-time Use Cases
30 / 97
@leggetter

40. Realtime Apps in 2015 (Present)
Real-time Use Cases
Application Communication Patterns
30 / 97
@leggetter

41. Signalling
31 / 97
@leggetter

42. 0:00 32 / 97
@leggetter
Internet ^5 Machine

43. talky.io
33 / 97
@leggetter

44. Communication Pattern:
Simple Messaging
34 / 97
@leggetter

45. Client
var ws = new WebSocket('ws://localhost/');
35 / 97
@leggetter

46. Client
var ws = new WebSocket('ws://localhost/');
ws.onmessage = function(evt) {
var data = JSON.parse(evt.data);
35 / 97
@leggetter

47. Client
var ws = new WebSocket('ws://localhost/');
ws.onmessage = function(evt) {
var data = JSON.parse(evt.data);
if(data.action) {
// ^5
}
35 / 97
@leggetter

48. Client
var ws = new WebSocket('ws://localhost/');
ws.onmessage = function(evt) {
var data = JSON.parse(evt.data);
if(data.action) {
// ^5
}
else if(data.peerId) {
var connectTo = data.peerId;
}
};
35 / 97
@leggetter

49. Client
var ws = new WebSocket('ws://localhost/');
ws.onmessage = function(evt) {
var data = JSON.parse(evt.data);
if(data.action) {
// ^5
}
else if(data.peerId) {
var connectTo = data.peerId;
}
};
Server
// server
server.on('connection', function(socket){
35 / 97
@leggetter

50. Client
var ws = new WebSocket('ws://localhost/');
ws.onmessage = function(evt) {
var data = JSON.parse(evt.data);
if(data.action) {
// ^5
}
else if(data.peerId) {
var connectTo = data.peerId;
}
};
Server
// server
server.on('connection', function(socket){
socket.send(JSON.stringify({action: 'high-5'}));
});
35 / 97
@leggetter

51. 36 / 97
@leggetter

52. Notifications
37 / 97
@leggetter

53. Communication Pattern:
Publish-Subscribe (PubSub)
38 / 97
@leggetter

54. Client
var client = new Client('http://localhost:8000/');
39 / 97
@leggetter

55. Client
var client = new Client('http://localhost:8000/');
client.subscribe('news', function(data) {
39 / 97
@leggetter

56. Client
var client = new Client('http://localhost:8000/');
client.subscribe('news', function(data) {
console.log(data.headline);
});
39 / 97
@leggetter

57. Client
var client = new Client('http://localhost:8000/');
client.subscribe('news', function(data) {
console.log(data.headline);
});
Server
server.publish('news', {headline: 'Pusher Rocks!'});
39 / 97
@leggetter

58. 40 / 97
@leggetter

59. Activity Streams
41 / 97
@leggetter

60. Communication Pattern
Evented PubSub
42 / 97
@leggetter

61. Client
var pusher = new Pusher(APP_KEY);
var channel = pusher.subscribe('status');
43 / 97
@leggetter

62. Client
var pusher = new Pusher(APP_KEY);
var channel = pusher.subscribe('status');
channel.bind('created', function(data) {
// Add activity to UI
});
43 / 97
@leggetter

63. Client
var pusher = new Pusher(APP_KEY);
var channel = pusher.subscribe('status');
channel.bind('created', function(data) {
// Add activity to UI
});
channel.bind('updated', function(data) {
// Update activity
});
channel.bind('deleted', function(data) {
// Remove activity
});
43 / 97
@leggetter

64. Client
var pusher = new Pusher(APP_KEY);
var channel = pusher.subscribe('status');
channel.bind('created', function(data) {
// Add activity to UI
});
channel.bind('updated', function(data) {
// Update activity
});
channel.bind('deleted', function(data) {
// Remove activity
});
Server
pusher.trigger('status', 'created', {text: 'PubSub Rocks!', id: 1});
43 / 97
@leggetter

65. Client
var pusher = new Pusher(APP_KEY);
var channel = pusher.subscribe('status');
channel.bind('created', function(data) {
// Add activity to UI
});
channel.bind('updated', function(data) {
// Update activity
});
channel.bind('deleted', function(data) {
// Remove activity
});
Server
pusher.trigger('status', 'created', {text: 'PubSub Rocks!', id: 1});
pusher.trigger('status', 'updated', {text: 'Evented PubSub Rocks!', id: 1});
pusher.trigger('status', 'deleted', {id: 1});
43 / 97
@leggetter

66. Data Visualizations
44 / 97
@leggetter

67. 45 / 97
@leggetter

68. 46 / 97
Chat
@leggetter

69. 47 / 97
@leggetter

70. PubSub vs. Evented PubSub
48 / 97
@leggetter

71. 49 / 97
@leggetter

72. 50 / 97
@leggetter

73. PubSub
client.subscribe('devexp-channel', function(data) {
if(data.eventType === 'chat-message') {
addMessage(data.message);
}
51 / 97
@leggetter

74. PubSub
client.subscribe('devexp-channel', function(data) {
if(data.eventType === 'chat-message') {
addMessage(data.message);
}
else if(data.eventType === 'channel-purposed-changed') {
updateRoomTitle(data.purpose);
}
else if(/* and so on */) {
}
})
51 / 97
@leggetter

75. PubSub
client.subscribe('devexp-channel', function(data) {
if(data.eventType === 'chat-message') {
addMessage(data.message);
}
else if(data.eventType === 'channel-purposed-changed') {
updateRoomTitle(data.purpose);
}
else if(/* and so on */) {
}
})
Evented PubSub
var channel = pusher.subscribe('devexp-channel');
channel.bind('chat-message', addMessage);
channel.bind('channel-purposed-changed', updateChannelPurpose);
51 / 97
@leggetter

76. PubSub
client.subscribe('devexp-channel', function(data) {
if(data.eventType === 'chat-message') {
addMessage(data.message);
}
else if(data.eventType === 'channel-purposed-changed') {
updateRoomTitle(data.purpose);
}
else if(/* and so on */) {
}
})
Evented PubSub
var channel = pusher.subscribe('devexp-channel');
channel.bind('chat-message', addMessage);
channel.bind('channel-purposed-changed', updateChannelPurpose);
channel.bind('current-topic-changed', updateChannelTopic);
channel.bind('user-online', userOnline);
channel.bind('user-offline', userOffline);
51 / 97
@leggetter

77. 52 / 97
@leggetter

78. Real-Time Location Tracking
53 / 97
@leggetter

79. Multi-User Collaboration
54 / 97
@leggetter

80. 55 / 97
@leggetter

81. Multiplayer Games / Art
56 / 97
@leggetter

82. Communication Pattern
Data Synchronisation (DataSync)
57 / 97
@leggetter

83. Client
var sync = new DataSync();
var ref = sync.get('document-1');
58 / 97
@leggetter

84. Client
var sync = new DataSync();
var ref = sync.get('document-1');
ref.on(function(val) {
console.log(val)
});
58 / 97
@leggetter

85. Client
var sync = new DataSync();
var ref = sync.get('document-1');
ref.on(function(val) {
console.log(val)
});
ref.put({text: 'Hello, DataSync!'}).key('unique-key');
58 / 97
@leggetter

86. Client
var sync = new DataSync();
var ref = sync.get('document-1');
ref.on(function(val) {
console.log(val)
});
ref.put({text: 'Hello, DataSync!'}).key('unique-key');
ref.path('unique-key').set(null);
58 / 97
@leggetter

87. Client
var sync = new DataSync();
var ref = sync.get('document-1');
ref.on(function(val) {
console.log(val)
});
ref.put({text: 'Hello, DataSync!'}).key('unique-key');
ref.path('unique-key').set(null);
Framework handles updates to other clients
58 / 97
@leggetter

88. 59 / 97
@leggetter

89. Communication Pattern
RPC/RMI
Use Cases?
60 / 97
@leggetter

90. 61 / 97
@leggetter

91. Client
rmi({
62 / 97
@leggetter

92. Client
rmi({
newMessage: function(message) {
console.log(message);
}
})
62 / 97
@leggetter

93. Client
rmi({
newMessage: function(message) {
console.log(message);
}
})
.on('remote', function(remote) {
62 / 97
@leggetter

94. Client
rmi({
newMessage: function(message) {
console.log(message);
}
})
.on('remote', function(remote) {
remote.sendMessage({text: 'dnode baby!'});
});
62 / 97
@leggetter

95. Client
rmi({
newMessage: function(message) {
console.log(message);
}
})
.on('remote', function(remote) {
remote.sendMessage({text: 'dnode baby!'});
});
Server
var remotes = [];
rmi({
sendMessage: function(message) {
62 / 97
@leggetter

96. Client
rmi({
newMessage: function(message) {
console.log(message);
}
})
.on('remote', function(remote) {
remote.sendMessage({text: 'dnode baby!'});
});
Server
var remotes = [];
rmi({
sendMessage: function(message) {
remotes.forEach(function(remote) {
remote.newMessage(message);
});
}
})
62 / 97
@leggetter

97. Client
rmi({
newMessage: function(message) {
console.log(message);
}
})
.on('remote', function(remote) {
remote.sendMessage({text: 'dnode baby!'});
});
Server
var remotes = [];
rmi({
sendMessage: function(message) {
remotes.forEach(function(remote) {
remote.newMessage(message);
});
}
})
.on('remote', function(remote) {
remotes.push(remote);
}); 62 / 97
@leggetter

98. 63 / 97
@leggetter

99. Choosing a Communication Pattern
64 / 97
@leggetter

100. Communication Patterns
65 / 97
@leggetter

101. Communication Patterns & Use Cases
66 / 97
@leggetter

102. Real-Time is Essential
67 / 97
@leggetter

103. Real-Time is Essential
67 / 97
@leggetter

104. Max Williams (@maxthelion) - CEO, Pusher
‘I'm not sure I believe that there is such a thing as
"realtime apps" any more. Apps either update
instantly and smoothly, or they appear broken. I feel
that "realtime" as a feature has moved down the
Kano graph. It is much more of an expectation, than
an "exciter".
68 / 97
@leggetter

105. 69 / 97
@leggetter

106. The Internet...
70 / 97
@leggetter

107. The Internet...
1. is our main communications platform
70 / 97
@leggetter

108. The Internet...
1. is our main communications platform
2. is becoming our main entertainment
platform
70 / 97
@leggetter

109. The Internet...
1. is our main communications platform
2. is becoming our main entertainment
platform
3. should give users real-time experiences
70 / 97
@leggetter

110. Future
71 / 97
@leggetter

111. Network Infrastructure & Protocols
Reliability
Speed
Beyond HTTP
HTTP2
72 / 97
@leggetter

112. Bayeux
DDP
dNode
EPCP
GRIP
MQTT
Pusher Protocol
STOMP
SignalR Protocol
WAMP (Web App Messaging Protocol)
XMPP (various)
Communication Pattern Protocol
Standardisation
73 / 97
@leggetter

113. 74 / 97
@leggetter

114. GitHub
Iron.io
MailChimp
MailJet
PagerDuty
Pusher
SendGrid
Twilio
Real-Time APIs
75 / 97
@leggetter

115. 76 / 97
@leggetter

116. More "Things"!
77 / 97
@leggetter

117. The Physical Web
78 / 97
@leggetter

118. IoT, Apps & Developers
79 / 97
@leggetter

119. A thing can be anything
80 / 97
@leggetter

120. A thing can be anything
Sensors
Appliances
Vehicles
Smart Phones
Devices (Arduino, Electric Imp, Raspberry Pi etc.)
80 / 97
@leggetter

121. A thing can be anything
Sensors
Appliances
Vehicles
Smart Phones
Devices (Arduino, Electric Imp, Raspberry Pi etc.)
Servers
Browsers
Apps: Native, Web, running anywhere
80 / 97
@leggetter

122. The Majority of code we'll write will still be
for "Apps"
Configuring
Monitoring
Interacting
App Logic
81 / 97
@leggetter

123. Real-Time Use Case Evolution
Notifications & Signalling
Activity Streams
Data Viz & Polls
Chat
Collaboration
Multiplayer Games
82 / 97
@leggetter

124. Notifications/Activity Streams -> Actions
83 / 97
@leggetter
The end of apps as we know it - Intercom

125. Subscriptions
84 / 97
@leggetter

126. Personalised Event Streams
85 / 97
@leggetter

127. Unified UIs
86 / 97
@leggetter

128. Chat for Everything
87 / 97
@leggetter

129. 549M MAUs
10k integrations
app-within-an-app model
taxi, order food, tickets, games etc.
WeChat
88 / 97
@leggetter

130. Chat Integrations
89 / 97
@leggetter

131. Siri
Google Now
Microsoft Cortana
Facebook M
Chat "Virtual Assistants"
90 / 97
@leggetter

132. Chat has evolved. Chat is now a platform!
91 / 97
@leggetter

133. Multi-Device Experiences
92 / 97
@leggetter

134. Ben Foxall - A conceptual future for the multi-device web (FutureJS 2014)
93 / 97
@leggetter

135. Summary
94 / 97
@leggetter

136. Summary
The Internet is our communications platform
94 / 97
@leggetter

137. Summary
The Internet is our communications platform
Easier than ever to innovate on this platform
94 / 97
@leggetter

138. Summary
The Internet is our communications platform
Easier than ever to innovate on this platform
Users expect real-time experiences
94 / 97
@leggetter

139. Summary
The Internet is our communications platform
Easier than ever to innovate on this platform
Users expect real-time experiences
Future:
Infrastructure
standards
IoT
Event streams
Use case evolution
Chat everywhere
94 / 97
@leggetter

140. Realtime Internet Apps === IoT
Web Browsers +
Web Servers +
Native Apps +
Devices +
...
95 / 97
@leggetter

141. The Past, Present and Future of Real-Time Apps
& Communications
Thanks! Feedback & Questions!
PHIL @LEGGETTER
Head of Evangelism
96 / 97
@leggetter

142. References
Pusher
These slides - leggetter.github.io/realtime-internet-apps/
Mary Meeker's internet trend report
Kano model
DDP Protocol
Socket.IO protocol
MQTT
Real-Time Web Tech Guide
The end of apps as we know them - Intercom
97 / 97
@leggetter