The document discusses the past, present, and future of real-time applications and communications. It describes how the internet enabled new types of real-time experiences and how demand for up-to-date information and engagement drove the need for real-time capabilities. The document outlines several common real-time communication patterns used in applications today like messaging, publish-subscribe, and data synchronization. It envisions continued growth in real-time technologies, protocols, and use cases across the internet of things and areas like notifications, collaboration, and gaming.

1. The Past, Present and
Future of Real-Time
Apps &
Communications
1 / 87
@leggetter

2. PHIL @LEGGETTER
Head of Developer Relations
2 / 87
@leggetter

3. 3 / 87
@leggetter

4. Real-Time Apps & Communications...
Past - how we got here
Present - what we're doing and building now
Future - what we're going to build in the future
4 / 87
@leggetter

5. When do we need Realtime?
5 / 87
@leggetter

6. WCaaS
6 / 87
@leggetter

7. WCaaS
Data: Is there a timely nature to the data?
6 / 87
@leggetter

8. 7 / 87
@leggetter

9. User Experience: Is there a timely nature to the
experience?
7 / 87
@leggetter

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

11. These aren't new Needs or Demands
But...
9 / 87
@leggetter

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

13. Internet
“a global computer network providing a variety
of information and communication facilities,
consisting of interconnected networks using
standardized communication protocols.
10 / 87
@leggetter

14. 11 / 87
@leggetter

15. 12 / 87
@leggetter

16. 13 / 87
@leggetter

17. HTTP was better. But many wanted more.
14 / 87
@leggetter

18. 15 / 87
@leggetter

19. 16 / 87
@leggetter

20. 17 / 87
@leggetter

21. HTTP + Browsers were restrictive
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
18 / 87
@leggetter

22. HTTP + Browsers were restrictive
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
So we HACKED! Java Applets, Flash, HTTP Hacks
18 / 87
@leggetter

23. Then Real-Time Went Mainstream
19 / 87
@leggetter

24. Social
20 / 87
@leggetter

25. Technology Advancements
Memory & CPU speed and cost
The Cloud
Browser standardisation & enhancements
Any client can use the standards
21 / 87
@leggetter

26. 22 / 87
@leggetter

27. MASSIVE Increase in Internet Usage
23 / 87
@leggetter

28. Internet Usage (per day)
200 billion emails
24 / 87
@leggetter

29. Internet Usage (per day)
200 billion emails
7 million blog posts written†
500 million tweets
30 billion WhatsApp messages
24 / 87
@leggetter

30. Internet Usage (per day)
200 billion emails
7 million blog posts written†
500 million tweets
30 billion WhatsApp messages
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
750 million hours of YouTube watched
24 / 87
@leggetter

31. 25 / 87
@leggetter

32. Realtime Apps in Now (Present)
26 / 87
@leggetter

33. Realtime Apps in Now (Present)
Real-time Use Cases
26 / 87
@leggetter

34. Realtime Apps in Now (Present)
Real-time Use Cases
Application Communication Patterns
26 / 87
@leggetter

35. Signalling
27 / 87
@leggetter

36. 0:00 28 / 87
@leggetter
Internet ^5 Machine

37. 0:00 28 / 87
@leggetter
Internet ^5 Machine

38. Communication Pattern:
Simple Messaging
29 / 87
@leggetter

39. Client
var ws = new WebSocket('wss://localhost/');
30 / 87
@leggetter

40. Client
var ws = new WebSocket('wss://localhost/');
ws.onmessage = function(evt) {
var data = JSON.parse(evt.data);
30 / 87
@leggetter

41. Client
var ws = new WebSocket('wss://localhost/');
ws.onmessage = function(evt) {
var data = JSON.parse(evt.data);
// ^5
performHighFive();
};
30 / 87
@leggetter

42. Client
var ws = new WebSocket('wss://localhost/');
ws.onmessage = function(evt) {
var data = JSON.parse(evt.data);
// ^5
performHighFive();
};
Server
// server
server.on('connection', function(socket){
30 / 87
@leggetter

43. Client
var ws = new WebSocket('wss://localhost/');
ws.onmessage = function(evt) {
var data = JSON.parse(evt.data);
// ^5
performHighFive();
};
Server
// server
server.on('connection', function(socket){
socket.send(JSON.stringify({action: 'high-5'}));
});
30 / 87
@leggetter

44. 31 / 87
@leggetter

45. Notifications
32 / 87
@leggetter

46. Communication Pattern:
Publish-Subscribe (PubSub)
33 / 87
@leggetter

47. Client
var client = new Faye.Client('http://localhost:8000/faye');
34 / 87
@leggetter

48. Client
var client = new Faye.Client('http://localhost:8000/faye');
client.subscribe('/news', function(data) {
34 / 87
@leggetter

49. Client
var client = new Faye.Client('http://localhost:8000/faye');
client.subscribe('/news', function(data) {
console.log(data.headline);
});
34 / 87
@leggetter

50. Client
var client = new Faye.Client('http://localhost:8000/faye');
client.subscribe('/news', function(data) {
console.log(data.headline);
});
Server
server.publish('/news', {headline: 'Nexmo Rocks!'});
34 / 87
@leggetter

51. 35 / 87
@leggetter

52. Data Visualizations
36 / 87
@leggetter

53. 37 / 87
@leggetter

54. PubSub ... or something else?
37 / 87
@leggetter

55. Activity Streams
38 / 87
@leggetter

56. Communication Pattern
Evented PubSub
39 / 87
@leggetter

57. Client
var status = io('/leggetter-status');
40 / 87
@leggetter

58. Client
var status = io('/leggetter-status');
status.on('created', function (data) {
// Add activity to UI
});
40 / 87
@leggetter

59. Client
var status = io('/leggetter-status');
status.on('created', function (data) {
// Add activity to UI
});
status.on('updated', function(data) {
// Update activity
});
status.on('deleted', function(data) {
// Remove activity
});
40 / 87
@leggetter

60. Client
var status = io('/leggetter-status');
status.on('created', function (data) {
// Add activity to UI
});
status.on('updated', function(data) {
// Update activity
});
status.on('deleted', function(data) {
// Remove activity
});
Server
var io = require('socket.io')();
var status = io.of('/leggetter-status');
status.emit('created', {text: 'PubSub Rocks!', id: 1});
40 / 87
@leggetter

61. Client
var status = io('/leggetter-status');
status.on('created', function (data) {
// Add activity to UI
});
status.on('updated', function(data) {
// Update activity
});
status.on('deleted', function(data) {
// Remove activity
});
Server
var io = require('socket.io')();
var status = io.of('/leggetter-status');
status.emit('created', {text: 'PubSub Rocks!', id: 1});
status.emit('updated', {text: 'Evented PubSub Rocks!', id: 1});
status.emit('deleted', {id: 1});
40 / 87
@leggetter

62. 41 / 87
Chat
@leggetter

63. 42 / 87
@leggetter

64. PubSub vs. Evented PubSub
43 / 87
@leggetter

65. 44 / 87
@leggetter

66. 45 / 87
@leggetter

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

68. 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 */) {
}
})
46 / 87
@leggetter

69. 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 = io('/devexp-channel');
channel.on('chat-message', addMessage);
channel.on('channel-purposed-changed', updateChannelPurpose);
46 / 87
@leggetter

70. 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 = io('/devexp-channel');
channel.on('chat-message', addMessage);
channel.on('channel-purposed-changed', updateChannelPurpose);
channel.on('current-topic-changed', updateChannelTopic);
channel.on('user-online', userOnline);
channel.on('user-offline', userOffline);
46 / 87
@leggetter

71. 47 / 87
@leggetter

72. Real-Time Location Tracking
48 / 87
@leggetter

73. Multi-User Collaboration
49 / 87
@leggetter

74. Multiplayer Games / Art
50 / 87
@leggetter

75. Communication Pattern
Data Synchronisation (DataSync)
51 / 87
@leggetter

76. Client
var ref = new Firebase("https://<APP>.firebaseio.com/doc1/lines");
52 / 87
@leggetter

77. Client
var ref = new Firebase("https://<APP>.firebaseio.com/doc1/lines");
ref.on('child_added', function(childSnapshot, prevChildKey) {
// code to handle new child.
});
52 / 87
@leggetter

78. Client
var ref = new Firebase("https://<APP>.firebaseio.com/doc1/lines");
ref.on('child_added', function(childSnapshot, prevChildKey) {
// code to handle new child.
});
ref.on('child_changed', function(childSnapshot, prevChildKey) {
// code to handle child data changes.
});
52 / 87
@leggetter

79. Client
var ref = new Firebase("https://<APP>.firebaseio.com/doc1/lines");
ref.on('child_added', function(childSnapshot, prevChildKey) {
// code to handle new child.
});
ref.on('child_changed', function(childSnapshot, prevChildKey) {
// code to handle child data changes.
});
ref.on('child_removed', function(oldChildSnapshot) {
// code to handle child removal.
});
52 / 87
@leggetter

80. Client
var ref = new Firebase("https://<APP>.firebaseio.com/doc1/lines");
ref.on('child_added', function(childSnapshot, prevChildKey) {
// code to handle new child.
});
ref.on('child_changed', function(childSnapshot, prevChildKey) {
// code to handle child data changes.
});
ref.on('child_removed', function(oldChildSnapshot) {
// code to handle child removal.
});
ref.push({ 'editor_id': 'leggetter', 'text': 'Nexmo Rocks!' });
52 / 87
@leggetter

81. Client
var ref = new Firebase("https://<APP>.firebaseio.com/doc1/lines");
ref.on('child_added', function(childSnapshot, prevChildKey) {
// code to handle new child.
});
ref.on('child_changed', function(childSnapshot, prevChildKey) {
// code to handle child data changes.
});
ref.on('child_removed', function(oldChildSnapshot) {
// code to handle child removal.
});
ref.push({ 'editor_id': 'leggetter', 'text': 'Nexmo Rocks!' });
Framework handles updates to other clients
52 / 87
@leggetter

82. 53 / 87
@leggetter

83. Complex Client/Server Interactions
54 / 87
@leggetter

84. Communication Pattern
RPC/RMI
55 / 87
@leggetter

85. Client
dnode({
56 / 87
@leggetter

86. Client
dnode({
newMessage: function(message) {
console.log(message);
}
})
56 / 87
@leggetter

87. Client
dnode({
newMessage: function(message) {
console.log(message);
}
})
.on('remote', function(remote) {
56 / 87
@leggetter

88. Client
dnode({
newMessage: function(message) {
console.log(message);
}
})
.on('remote', function(remote) {
remote.sendMessage({text: 'dnode baby!'});
});
56 / 87
@leggetter

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

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

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

92. 57 / 87
@leggetter

93. Choosing a Communication Pattern
58 / 87
@leggetter

94. Communication Patterns
59 / 87
@leggetter

95. Communication Patterns & Use Cases
60 / 87
@leggetter

96. Real-Time is Essential
61 / 87
@leggetter

97. Real-Time is Essential
61 / 87
@leggetter

98. The Internet...
62 / 87
@leggetter

99. The Internet...
1. is our main communications platform
62 / 87
@leggetter

100. The Internet...
1. is our main communications platform
2. is becoming our main entertainment
platform
62 / 87
@leggetter

101. The Internet...
1. is our main communications platform
2. is becoming our main entertainment
platform
3. should give users real-time experiences
62 / 87
@leggetter

102. Future
63 / 87
@leggetter

103. Network Infrastructure & Protocols
Reliability
Speed
Beyond HTTP
HTTP2
64 / 87
@leggetter

104. Bayeux
DDP
dNode
EPCP
GRIP
gRPC
MQTT
Pusher Protocol
STOMP
SignalR Protocol
WAMP (Web App Messaging Protocol)
XMPP (various)
Communication Pattern Protocol
Standardisation
65 / 87
@leggetter

105. 66 / 87
@leggetter

106. Firebase
GitHub
Iron.io
MailChimp
MailJet
PagerDuty
Nexmo
SendGrid
Real-Time APIs
67 / 87
@leggetter

107. 68 / 87
@leggetter

108. More "Things"!
69 / 87
@leggetter

109. The Physical Web
70 / 87
@leggetter

110. IoT, Apps & Developers
71 / 87
@leggetter

111. A thing can be anything
72 / 87
@leggetter

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

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

114. The Majority of code we'll write will still be
for "Apps"
Configuring
Monitoring
Interacting
App Logic
73 / 87
@leggetter

115. Real-Time Use Case Evolution
Notifications & Signalling
Activity Streams
Data Viz & Polls
Chat
Collaboration
Multiplayer Games
74 / 87
@leggetter

116. Notifications/Activity Streams -> Actions
75 / 87
@leggetter
The end of apps as we know it - Intercom

117. Subscriptions
76 / 87
@leggetter

118. Personalised Event Streams
77 / 87
@leggetter

119. Unified UIs
78 / 87
@leggetter

120. Chat & Bots for Everything
The rise of the .ai domain
79 / 87
@leggetter

121. 600M MAUs
10M integrations
app-within-an-app model
taxi, order food, tickets, games etc.
WeChat
80 / 87
@leggetter

122. Chat Integrations
81 / 87
@leggetter

123. Siri
Google Now
Microsoft Cortana
Facebook M
Chat "Virtual Assistants"
82 / 87
@leggetter

124. Chat has evolved. Chat is now a platform!
83 / 87
@leggetter

125. Summary
84 / 87
@leggetter

126. Summary
The Internet is our communications platform
84 / 87
@leggetter

127. Summary
The Internet is our communications platform
Easier than ever to innovate on this platform
84 / 87
@leggetter

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

129. 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
84 / 87
@leggetter

130. Realtime Internet Apps & Communications
===
IoT
Web Browsers +
Web Servers +
Native Apps +
Devices +
...
85 / 87
@leggetter

131. The Past, Present and Future of Real-Time
Internet Apps & Communications
PHIL @LEGGETTER
Head of Developer Relations
86 / 87
@leggetter

132. References
Nexmo
These slides - leggetter.github.io/realtime-internet-apps/
Mary Meeker's internet trend report
Real-Time Web Tech Guide
87 / 87
@leggetter