Notre cerveau est très attentif aux éléments en mouvement : de nombreux sites l’ont bien compris et utilisent désormais le CSS pour animer l’apparition de leur contenu. Et si au lieu d’intégrer des “objets inanimés qui bougent”, nous choisissions de faire évoluer des données en temps réel ? L’impact sur les utilisateurs en serait bien plus grand. Bonne nouvelle : le temps réel n’est plus réservé aux traders new-yorkais à chemise rayée ! Les données en temps réel sont partout : sur les réseaux sociaux, dans les transports, en économie collaborative, sur les ventes privées, etc. La mise à jour de la donnée a à la fois une utilité pratique et commerciale, tant pour l’annonceur que l’utilisateur final. Au programme : - Qu’est-ce que la donnée animée ? - Quels sont les différents types de données animées ? - Comment la mettre en oeuvre ? (Polling vs Server-sent events vs Websockets) - Présentation de la solution Streamdata.io - Samples clients de données animées (iOS, Android, JS, etc.). Speaker : Cédric Tran Xuan, Développeur chez Streamdata.io Développeur chez Streamdata.io, Cédric participe à l’élaboration d’une plate-forme de push temps réel. Pendant son temps libre, il écume l’Alpes JUG, les HumanTalks et les Meetups de Grenoble ainsi que quelques MOOCs. Il joue avec des technos comme Java, Scala et Web (AngularJS, EmberJS, Riot.js, etc.).

1. Les donnéesLes données
animéesanimées
@ctranxuan
@StreamdataIO

3. Refresh and WaitingRefresh and Waiting
Poor UX: low emotional engagementPoor UX: low emotional engagement
Poor SEO: poor dwell timePoor SEO: poor dwell time

5. Animated DataAnimated Data

6. What is real-time?What is real-time?
It's relative to the userIt's relative to the user

9. Real-time UX... i$ Rea£-timeReal-time UX... i$ Rea£-time
Mon€¥Mon€¥
Amazon found every 100 milliseconds ofAmazon found every 100 milliseconds of
apps latency cost them 1% in sales.apps latency cost them 1% in sales.
Source: http://perspectives.mvdirona.com/2009/10/31/TheCostOfLatency.aspx
Google found an extra 0.5 seconds inGoogle found an extra 0.5 seconds in
search page generation time droppedsearch page generation time dropped
traffic by 20%traffic by 20%
Source: http://highscalability.com/latency-everywhere-and-it-costs-you-sales-how-crush-it

16. Round Trip Delays (ping time)Round Trip Delays (ping time)
In ADSL, first useful piece of data in 60ms (HTTPS) In 4G / LTE, first
useful piece of data in 300 ms (450 ms in 3G)

19. ConstraintsConstraints
HTTP 1.1HTTP 1.1
SSL / TLSSSL / TLS
Increasing global trafficIncreasing global traffic
Mobile First (3G / 4G)Mobile First (3G / 4G)

20. Which ingredients forWhich ingredients for
real-time UX?real-time UX?

21. Solutions for dynamicSolutions for dynamic
datadata
Long pollingLong polling
WebSocketsWebSockets
Server-Sent EventsServer-Sent Events

22. Long-PollingLong-Polling
HTTP HackHTTP Hack Don't use it anymoreDon't use it anymore

23. WebSocketsWebSockets Server-SentServer-Sent
EventsEvents
Push techno
W3C
2008
Push techno
W3C
2006

24. WebSocketsWebSockets Server-SentServer-Sent
EventsEvents

25. WebSocketsWebSockets Server-SentServer-Sent
EventsEvents
TCP
low-level protocol
HTTP upgrade
handshake
GET /chat HTTP/1.1
Host: example.com:8000
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Sec-WebSocket-Version: 13
GET /stream HTTP/1.1 1
Host: example.com
Accept: text/event-stream

26. WebSocketsWebSockets Server-SentServer-Sent
EventsEvents
proxies and load balancers
reconfiguration
No need to
reconfigure!
(it's HTTP)

27. WebSocketsWebSockets Server-SentServer-Sent
EventsEvents

28. WebSocketsWebSockets Server-SentServer-Sent
EventsEvents
binary + textbinary + text
native browsersnative browsers
supportsupport
texttext
... but polyfills!... but polyfills!

29. https://goo.gl/cCMIGf https://goo.gl/HjJDIv

30. WebSocketsWebSockets Server-SentServer-Sent
EventsEvents
var websocket =
new WebSocket('ws://websocketserver/echo');
websocket.onopen = function () {
...
};
websocket.onmessage = function (e) {
...
};
websocket.onerror = function (error) {
...
};
var eventSource =
new EventSource('http://sseserver/echo');
eventSource.onopen = function () {
...
};
eventSource.onmessage = function (e) {
...
};
eventSource.onerror = function (error) {
...
};
eventSource.addEventListener('foo', function(e) {
...
}, false);

31. "Perfs""Perfs"
Use case: Préchargement de 500 Tweets sur une page web (nginx
configuré en tant que proxy)
Source http://matthiasnehlsen.com/blog/2013/05/01/server-sent-events-vs-websockets/

32. Solutions for Dynamic DataSolutions for Dynamic Data

33. Streaming vs HTTP PollingStreaming vs HTTP Polling
10 messages of 1 byte : 7ms vs 220 ms10 messages of 1 byte : 7ms vs 220 ms
100 messages of 10 bytes : 57 vs 986 ms100 messages of 10 bytes : 57 vs 986 ms
1000 messages of 100 bytes : 200 vs 10210 ms1000 messages of 100 bytes : 200 vs 10210 ms
5000 messages of 1000 bytes : 1,2 sec vs 54 sec5000 messages of 1000 bytes : 1,2 sec vs 54 sec
Source http://blog.arungupta.me/rest-vs-websocket-comparison-benchmarks/​

34. What if...?What if...?
... I have just a... I have just a
REST API?REST API?

35. Proxy as a Service: push to clientProxy as a Service: push to client

36. API Server LoadAPI Server Load
pollingpolling w/ streamdata.iow/ streamdata.io
10,000 concurrent clients
API Server CPUAPI Server CPU

37. CacheCache

38. JSON-Patch (RFC 6902)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"}]
[{"op":"replace","path":"/2/price","value":5},
{"op":"replace","path":"/3/param2","value":"32"}]
[{"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"}]

39. Efficiently Turn APIs intoEfficiently Turn APIs into
Real-Time ExperiencesReal-Time Experiences
Push,
don't poll
Dynamic
Cache
Incremental
Data

40. Which ingredients forWhich ingredients for
real-time UX?real-time UX?

41. Friendly frameworks / libsFriendly frameworks / libs
AndroidAndroid
SwiftSwift
ObjectiveCObjectiveC

42. DemosDemos

43. Poll DemoPoll Demo

44. Xignite DemoXignite Demo

45. JCDecaux DemoJCDecaux Demo

46. 0.5s is the latency objective
“The more others invest in amazing UI, the
more yours seems louzy”
Einstein « Relativity concepts applied to UI »,
OpenRoadMedia, 1937
ConclusionsConclusions
The world is more and more dynamic and we've
got the tools
Be ready to animate data, become streamers!

47. Thank you!Thank you!
@StreamdataIO@StreamdataIO

48. https://goo.gl/cCMIGf https://goo.gl/HjJDIv

49. ReferencesReferences
Streamdata.io fork from AMVTek
AMVTek
Yaffle
Remi
JS PolyfillsJS Polyfills

50. ReferencesReferences
What is Server-Sent Events?
WebSockets vs SSE
Getting started with WebSockets and SSE
Server-Sent Events: The simplest realtime
browser spec
WebSockets / SSEWebSockets / SSE