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.).
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
10.
11.
12.
13.
14.
15.
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)
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/
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/
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!
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