the past, present and future of real-time apps and communications
TRANSCRIPT
Real-Time Apps & Communications...
Past - how we got herePresent - what we're doing and building nowFuture - what we're going to build in the future
4 / 87
@leggetter
Realtime is required when there's a Need orDemand for:
Up to date informationInteraction to maintain engagement (UX)
8 / 87
@leggetter
Internet
“ a global computer network providing a varietyof information and communication facilities,consisting of interconnected networks usingstandardized communication protocols.
10 / 87
@leggetter
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
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
Technology Advancements
Memory & CPU speed and costThe CloudBrowser standardisation & enhancementsAny client can use the standards
21 / 87
@leggetter
Internet Usage (per day)
200 billion emails7 million blog posts written†
500 million tweets30 billion WhatsApp messages
24 / 87
@leggetter
Internet Usage (per day)
200 billion emails7 million blog posts written†
500 million tweets30 billion WhatsApp messages55 million Facebook status updates5 billion Google+ +1's60 million Instagram photos posted2 billion minutes spent on Skype33 million hours of Netflix watched750 million hours of YouTube watched
24 / 87
@leggetter
Realtime Apps in Now (Present)
Real-time Use CasesApplication Communication Patterns
26 / 87
@leggetter
Client
var ws = new WebSocket('wss://localhost/');
ws.onmessage = function(evt) { var data = JSON.parse(evt.data);
30 / 87
@leggetter
Client
var ws = new WebSocket('wss://localhost/');
ws.onmessage = function(evt) {
var data = JSON.parse(evt.data);
// ^5
performHighFive();
};
30 / 87
@leggetter
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
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
Client
var client = new Faye.Client('http://localhost:8000/faye');
client.subscribe('/news', function(data) {
34 / 87
@leggetter
Client
var client = new Faye.Client('http://localhost:8000/faye');
client.subscribe('/news', function(data) {
console.log(data.headline);});
34 / 87
@leggetter
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
Client
var status = io('/leggetter-status');status.on('created', function (data) { // Add activity to UI});
40 / 87
@leggetter
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
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
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
PubSub
client.subscribe('devexp-channel', function(data) { if(data.eventType === 'chat-message') { addMessage(data.message); }
46 / 87
@leggetter
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
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
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
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
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
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
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
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
Client
dnode({ newMessage: function(message) { console.log(message); }}).on('remote', function(remote) {
56 / 87
@leggetter
Client
dnode({ newMessage: function(message) { console.log(message); }}).on('remote', function(remote) { remote.sendMessage({text: 'dnode baby!'});});
56 / 87
@leggetter
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
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
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
The Internet...
1. is our main communications platform
2. is becoming our main entertainmentplatform
62 / 87
@leggetter
The Internet...
1. is our main communications platform
2. is becoming our main entertainmentplatform
3. should give users real-time experiences
62 / 87
@leggetter
Bayeux
DDP
dNode
EPCP
GRIP
gRPC
MQTT
Pusher Protocol
STOMP
SignalR Protocol
WAMP (Web App Messaging Protocol)
XMPP (various)
Communication Pattern ProtocolStandardisation
65 / 87
@leggetter
Firebase
GitHub
Iron.io
MailChimp
MailJet
PagerDuty
Nexmo
SendGrid
Real-Time APIs
67 / 87
@leggetter
A thing can be anything
SensorsAppliancesVehiclesSmart PhonesDevices (Arduino, Electric Imp, Raspberry Pi etc.)
72 / 87
@leggetter
A thing can be anything
SensorsAppliancesVehiclesSmart PhonesDevices (Arduino, Electric Imp, Raspberry Pi etc.)ServersBrowsersApps: Native, Web, running anywhere
72 / 87
@leggetter
The Majority of code we'll write will still befor "Apps"
ConfiguringMonitoringInteractingApp Logic
73 / 87
@leggetter
Real-Time Use Case Evolution
Notifications & SignallingActivity StreamsData Viz & PollsChatCollaborationMultiplayer Games
74 / 87
@leggetter
Notifications/Activity Streams -> Actions
75 / 87
@leggetterThe end of apps as we know it - Intercom
600M MAUs10M integrationsapp-within-an-app modeltaxi, order food, tickets, games etc.
80 / 87
@leggetter
Summary
The Internet is our communications platformEasier than ever to innovate on this platform
84 / 87
@leggetter
Summary
The Internet is our communications platformEasier than ever to innovate on this platformUsers expect real-time experiences
84 / 87
@leggetter
Summary
The Internet is our communications platformEasier than ever to innovate on this platformUsers expect real-time experiencesFuture:
InfrastructurestandardsIoTEvent streamsUse case evolutionChat everywhere
84 / 87
@leggetter
Realtime Internet Apps & Communications === IoT
Web Browsers +Web Servers +Native Apps +Devices +...
85 / 87
@leggetter
The Past, Present and Future of Real-TimeInternet Apps & Communications
PHIL @LEGGETTER
Head of Developer Relations
86 / 87
@leggetter