the past, present and future of real-time apps and communications

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

Upload: phil-leggetter

Post on 16-Feb-2017

397 views

Category:

Software


4 download

TRANSCRIPT

The Past, Present andFuture of Real-Time

Apps &Communications

1 / 87

@leggetter

PHIL @LEGGETTER

Head of Developer Relations

2 / 87

@leggetter

3 / 87

@leggetter

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

When do we need Realtime?

5 / 87

@leggetter

WCaaS

6 / 87

@leggetter

WCaaS

Data: Is there a timely nature to the data?

6 / 87

@leggetter

7 / 87

@leggetter

User Experience: Is there a timely nature to theexperience?

7 / 87

@leggetter

Realtime is required when there's a Need orDemand for:

Up to date informationInteraction to maintain engagement (UX)

8 / 87

@leggetter

These aren't new Needs or Demands

But...

9 / 87

@leggetter

These aren't new Needs or Demands

But...

The Internet

9 / 87

@leggetter

Internet

“ a global computer network providing a varietyof information and communication facilities,consisting of interconnected networks usingstandardized communication protocols.

10 / 87

@leggetter

11 / 87

@leggetter

12 / 87

@leggetter

13 / 87

@leggetter

HTTP was better. But many wanted more.

14 / 87

@leggetter

15 / 87

@leggetter

16 / 87

@leggetter

17 / 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

Then Real-Time Went Mainstream

19 / 87

@leggetter

Social

20 / 87

@leggetter

Technology Advancements

Memory & CPU speed and costThe CloudBrowser standardisation & enhancementsAny client can use the standards

21 / 87

@leggetter

22 / 87

@leggetter

MASSIVE Increase in Internet Usage

23 / 87

@leggetter

Internet Usage (per day)

200 billion emails

24 / 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

25 / 87

@leggetter

Realtime Apps in Now (Present)

26 / 87

@leggetter

Realtime Apps in Now (Present)

Real-time Use Cases

26 / 87

@leggetter

Realtime Apps in Now (Present)

Real-time Use CasesApplication Communication Patterns

26 / 87

@leggetter

Signalling

27 / 87

@leggetter

0:00 28 / 87

@leggetter

Internet ^5 Machine

0:00 28 / 87

@leggetter

Internet ^5 Machine

Communication Pattern:

Simple Messaging

29 / 87

@leggetter

Client

var ws = new WebSocket('wss://localhost/');

30 / 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

31 / 87

@leggetter

Notifications32 / 87

@leggetter

Communication Pattern:

Publish-Subscribe (PubSub)

33 / 87

@leggetter

Client

var client = new Faye.Client('http://localhost:8000/faye');

34 / 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

35 / 87

@leggetter

Data Visualizations

36 / 87

@leggetter

37 / 87

@leggetter

PubSub ... or something else?

37 / 87

@leggetter

Activity Streams38 / 87

@leggetter

Communication Pattern

Evented PubSub

39 / 87

@leggetter

Client

var status = io('/leggetter-status');

40 / 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

41 / 87

Chat@leggetter

42 / 87

@leggetter

PubSub vs. Evented PubSub

43 / 87

@leggetter

44 / 87

@leggetter

45 / 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

47 / 87

@leggetter

Real-Time Location Tracking48 / 87

@leggetter

Multi-User Collaboration49 / 87

@leggetter

Multiplayer Games / Art

50 / 87

@leggetter

Communication Pattern

Data Synchronisation (DataSync)

51 / 87

@leggetter

Client

var ref = new Firebase("https://<APP>.firebaseio.com/doc1/lines");

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

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

53 / 87

@leggetter

Complex Client/Server Interactions54 / 87

@leggetter

Communication Pattern

RPC/RMI

55 / 87

@leggetter

Client

dnode({

56 / 87

@leggetter

Client

dnode({ newMessage: function(message) { console.log(message); }})

56 / 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

57 / 87

@leggetter

Choosing a Communication Pattern

58 / 87

@leggetter

Communication Patterns59 / 87

@leggetter

Communication Patterns & Use Cases60 / 87

@leggetter

Real-Time is Essential

61 / 87

@leggetter

Real-Time is Essential

61 / 87

@leggetter

The Internet...

62 / 87

@leggetter

The Internet...

1. is our main communications platform

62 / 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

Future

63 / 87

@leggetter

Network Infrastructure & Protocols

Reliability

Speed

Beyond HTTP

HTTP2

64 / 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

66 / 87

@leggetter

Firebase

GitHub

Iron.io

MailChimp

MailJet

PagerDuty

Nexmo

SendGrid

Real-Time APIs

67 / 87

@leggetter

68 / 87

@leggetter

More "Things"!

69 / 87

@leggetter

The Physical Web70 / 87

@leggetter

IoT, Apps & Developers

71 / 87

@leggetter

A thing can be anything

72 / 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

Subscriptions

76 / 87

@leggetter

Personalised Event Streams

77 / 87

@leggetter

Unified UIs

78 / 87

@leggetter

Chat & Bots for EverythingThe rise of the .ai domain

79 / 87

@leggetter

600M MAUs10M integrationsapp-within-an-app modeltaxi, order food, tickets, games etc.

WeChat

80 / 87

@leggetter

Chat Integrations81 / 87

@leggetter

SiriGoogle Now

Microsoft CortanaFacebook M

Chat "Virtual Assistants"

82 / 87

@leggetter

Chat has evolved. Chat is now a platform!

83 / 87

@leggetter

Summary

84 / 87

@leggetter

Summary

The Internet is our communications platform

84 / 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

References

NexmoThese slides - leggetter.github.io/realtime-internet-apps/Mary Meeker's internet trend reportReal-Time Web Tech Guide

87 / 87

@leggetter