The end of polling (Audrey Neveu)

@StreamdataIOstreamdataio

API StreamingWhy and how to transform a REST API

into a Data Streaming API

ABOUT ME

Developer Relation Co-Leader France

@Audrey_Neveu

@StreamdataIOstreamdataio

MODERN TIMES

@StreamdataIOstreamdataio

OUR GOAL

@StreamdataIOstreamdataio

ANIMATION IS THE KEY... BUT WHY?

@StreamdataIOstreamdataio

BECAUSE OF EVOLUTION

@StreamdataIOstreamdataio

USER INTERFACE

@StreamdataIOstreamdataio

KEEP CALM AND...

@StreamdataIOstreamdataio

LEAVE.

REFRESH BUTTON IS EVIL

@StreamdataIOstreamdataio

REAL-TIME USER EXPERIENCE

@StreamdataIOstreamdataio

API STREAMING

@StreamdataIOstreamdataio

SOLUTIONS FOR REAL-TIME APPLICATIONS

✓ Web Sockets

✓ Server-Sent Events

✓ (Long) Polling

@StreamdataIOstreamdataio

IS NOT A SOLUTIONPOLLING...

@StreamdataIOstreamdataio

(and neither is long polling)

*TRUE* SOLUTIONS

Push Technologies

Web-Sockets Server-Sent Events

2008 2006

@StreamdataIOstreamdataio

W3C Specification

PUSH TECHNOLOGIES

Web-Sockets Server-Sent Events

Text + Binary Text

@StreamdataIOstreamdataio

PROTOCOLS

GET /chat HTTP/1.1Host: example.comUpgrade: websocketConnection: UpgradeSec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==Sec-WebSocket-Protocol: chatSec-WebSocket-Version: 13

GET /stream HTTP/1.1 1Host: example.comAccept: text/event-stream

HTTP/1.1 101 Switching ProtocolsUpgrade: websocketConnection: UpgradeSec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=Sec-WebSocket-Protocol: chatSec-WebSocket-Version: 13

Web-Sockets (RFC-6455)

Server-Sent Events

@StreamdataIOstreamdataio

CONFIGURATION

Server-Sent Events

@StreamdataIOstreamdataio

Web-Sockets

MESSAGES FORMAT

var msg = {

type: "message",

text: "Hello Nordic APIs!",

id: 12345,

date: Date.now()

};

data: Hello Nordic APIs!

data: Hello Nordic APIs

data: with two lines

data: {"time": "16:34:36", "text": "Hello Nordic APIs!"}

id: 12345

event: foo

data: Hello Nordic APIs!

retry: 10000

@StreamdataIOstreamdataio

Web-Sockets Server-Sent Events

IMPLEMENTATIONServer-Sent Events

@StreamdataIOstreamdataio

Web-Socketsvar websocket = new WebSocket ('ws://websocketserver/echo');

var eventSource = new EventSource

('http://sseserver/echo');

websocket.onOpen = function(){ ...};

eventSource.onopen = function(){ ...};

websocket.onMessage = function(e){ var data = e.data; var message = data.msg; ...};

eventSource.onMessage = function(e){ var message = JSON.parse(e.data); ...};

websocket.onError = function(e){ ...};

eventSource.onError = function(e){ ...};

...

eventSource .addEventListener('foo',function(e){ // do something}, false);

eventSource .addEventListener('bar',function(e){ // do something else}, false);

LOST IN CONNECTION

Server-Sent Events

@StreamdataIOstreamdataio

Web-Sockets

BROWSER SUPPORT

Server-Sent Events

53. 49. 10. 39. 11. 14. 53. 49. 10. 39. 11. UC.

@StreamdataIOstreamdataio

Web-Sockets

source : http://caniuse.com/

MOBILE BROWSER SUPPORT

Server-Sent Events

51. 49. 10. 18. 52.

source : http://caniuse.com/

51. 49. 10. 18. 52.

@StreamdataIOstreamdataio

Web-Sockets

PERFORMANCES

8s 5s x1.6

8s 6s x1.3

16s 7s x.2.2

Web-Sockets SSE

source: http://matthiasnehlsen.com/blog/2013/05/01/server-sent-events-vs-websockets/

Diff

@StreamdataIOstreamdataio

CHOOSE WISELY

@StreamdataIOstreamdataio

Proxy-as-a-Service

✓ works with any JSON API

✓ streaming based on Server-Sent Events

✓ dynamic cache

✓ incremental updates

STREAMDATA.IO

@StreamdataIOstreamdataio

JSON-PATCH (RFC-6902)

[{"title":"Value 0","price":66,"param1":"1","param2":"22","param3":"33"}, {"title":"Value 1","price":63,"param1":"11","param2":"2","param3":"53"}, {"title":"Value 2","price":85,"param1":"1","param2":"22","param3":"33"}, {"title":"Value 3","price":21,"param1":"31","param2":"12","param3":"4"}, {"title":"Value 4","price":10,"param1":"151","param2":"22","param3":"33"}, {"title":"Value 5","price":6,"param1":"11","param2":"21","param3":"33"}, {"title":"Value 6","price":60,"param1":"11","param2":"222","param3":"33"}]

[{"title":"Value 0","price":66,"param1":"1","param2":"22","param3":"33"}, {"title":"Value 1","price":63,"param1":"11","param2":"2","param3":"53"}, {"title":"Value 2","price":5,"param1":"1","param2":"22","param3":"33"}, {"title":"Value 3","price":21,"param1":"31","param2":"32","param3":"4"}, {"title":"Value 4","price":10,"param1":"151","param2":"22","param3":"33"}, {"title":"Value 5","price":6,"param1":"11","param2":"21","param3":"33"}, {"title":"Value 6","price":60,"param1":"11","param2":"222","param3":"33"}]

[{"op":"replace","path":"/2/price","value":5}, {"op":"replace","path":"/3/param2","value":"32"}]

@StreamdataIOstreamdataio

THE API PROVIDER BEST FRIEND

Sample Case: Investment Mobile App

@StreamdataIOstreamdataio

Stockmarket API

Web & Mobile Apps

➢ 25bn calls/month

✓ 90% reduction of the outgoing

traffic & API Server Load

✓ 6 months acceleration in

development

DEMO

@StreamdataIOstreamdataio

VOTE SERVER-SENT EVENTS!

@StreamdataIOstreamdataio

@StreamdataIOstreamdataio

THANKS!Q&A