Les donnéesLes données
animéesanimées
@ctranxuan
@StreamdataIO
Refresh and WaitingRefresh and Waiting
Poor UX: low emotional engagementPoor UX: low emotional engagement
Poor SEO: poor d...
Animated DataAnimated Data
What is real-time?What is real-time?
It's relative to the userIt's relative to the user
Real-time UX... i$ Rea£-timeReal-time UX... i$ Rea£-time
Mon€¥Mon€¥
Amazon found every 100 milliseconds ofAmazon found eve...
Round Trip Delays (ping time)Round Trip Delays (ping time)
In ADSL, first useful piece of data in 60ms (HTTPS) In 4G / LTE,...
ConstraintsConstraints
HTTP 1.1HTTP 1.1
SSL / TLSSSL / TLS
Increasing global trafficIncreasing global traffic
Mobile First...
Which ingredients forWhich ingredients for
real-time UX?real-time UX?
Solutions for dynamicSolutions for dynamic
datadata
Long pollingLong polling
WebSocketsWebSockets
Server-Sent EventsServer...
Long-PollingLong-Polling
HTTP HackHTTP Hack Don't use it anymoreDon't use it anymore
WebSocketsWebSockets Server-SentServer-Sent
EventsEvents
Push techno
W3C
2008
Push techno
W3C
2006
WebSocketsWebSockets Server-SentServer-Sent
EventsEvents
WebSocketsWebSockets Server-SentServer-Sent
EventsEvents
TCP
low-level protocol
HTTP upgrade
handshake
GET /chat HTTP/1.1
...
WebSocketsWebSockets Server-SentServer-Sent
EventsEvents
proxies and load balancers
reconfiguration
No need to
reconfigure!
...
WebSocketsWebSockets Server-SentServer-Sent
EventsEvents
WebSocketsWebSockets Server-SentServer-Sent
EventsEvents
binary + textbinary + text
native browsersnative browsers
support...
https://goo.gl/cCMIGf https://goo.gl/HjJDIv
WebSocketsWebSockets Server-SentServer-Sent
EventsEvents
var websocket =
new WebSocket('ws://websocketserver/echo');
webso...
"Perfs""Perfs"
Use case: Préchargement de 500 Tweets sur une page web (nginx
configuré en tant que proxy)
Source http://mat...
Solutions for Dynamic DataSolutions for Dynamic Data
Streaming vs HTTP PollingStreaming vs HTTP Polling
10 messages of 1 byte : 7ms vs 220 ms10 messages of 1 byte : 7ms vs 220...
What if...?What if...?
... I have just a... I have just a
REST API?REST API?
Proxy as a Service: push to clientProxy as a Service: push to client
API Server LoadAPI Server Load
pollingpolling w/ streamdata.iow/ streamdata.io
10,000 concurrent clients
API Server CPUAPI...
CacheCache
JSON-Patch (RFC 6902)JSON-Patch (RFC 6902)
[{"title":"Value 0","price":66,"param1":"1","param2":"22","param3":"33"},
{"tit...
Efficiently Turn APIs intoEfficiently Turn APIs into
Real-Time ExperiencesReal-Time Experiences
Push,
don't poll
Dynamic
C...
Which ingredients forWhich ingredients for
real-time UX?real-time UX?
Friendly frameworks / libsFriendly frameworks / libs
AndroidAndroid
SwiftSwift
ObjectiveCObjectiveC
DemosDemos
Poll DemoPoll Demo
Xignite DemoXignite Demo
JCDecaux DemoJCDecaux Demo
0.5s is the latency objective
“The more others invest in amazing UI, the
more yours seems louzy”
Einstein « Relativity con...
Thank you!Thank you!
@StreamdataIO@StreamdataIO
https://goo.gl/cCMIGf https://goo.gl/HjJDIv
ReferencesReferences
Streamdata.io fork from AMVTek
AMVTek
Yaffle
Remi
JS PolyfillsJS Polyfills
ReferencesReferences
What is Server-Sent Events?
WebSockets vs SSE
Getting started with WebSockets and SSE
Server-Sent Eve...
Données animées
Données animées
Données animées
Données animées
Données animées
Données animées
Données animées
Données animées
Données animées
Données animées
Données animées
Données animées
Prochain SlideShare
Chargement dans…5
×

Données animées

407 vues

Publié le

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

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
407
Sur SlideShare
0
Issues des intégrations
0
Intégrations
4
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Données animées

  1. 1. Les donnéesLes données animéesanimées @ctranxuan @StreamdataIO
  2. 2. Refresh and WaitingRefresh and Waiting Poor UX: low emotional engagementPoor UX: low emotional engagement Poor SEO: poor dwell timePoor SEO: poor dwell time
  3. 3. Animated DataAnimated Data
  4. 4. What is real-time?What is real-time? It's relative to the userIt's relative to the user
  5. 5. 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
  6. 6. 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)
  7. 7. ConstraintsConstraints HTTP 1.1HTTP 1.1 SSL / TLSSSL / TLS Increasing global trafficIncreasing global traffic Mobile First (3G / 4G)Mobile First (3G / 4G)
  8. 8. Which ingredients forWhich ingredients for real-time UX?real-time UX?
  9. 9. Solutions for dynamicSolutions for dynamic datadata Long pollingLong polling WebSocketsWebSockets Server-Sent EventsServer-Sent Events
  10. 10. Long-PollingLong-Polling HTTP HackHTTP Hack Don't use it anymoreDon't use it anymore
  11. 11. WebSocketsWebSockets Server-SentServer-Sent EventsEvents Push techno W3C 2008 Push techno W3C 2006
  12. 12. WebSocketsWebSockets Server-SentServer-Sent EventsEvents
  13. 13. 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
  14. 14. WebSocketsWebSockets Server-SentServer-Sent EventsEvents proxies and load balancers reconfiguration No need to reconfigure! (it's HTTP)
  15. 15. WebSocketsWebSockets Server-SentServer-Sent EventsEvents
  16. 16. WebSocketsWebSockets Server-SentServer-Sent EventsEvents binary + textbinary + text native browsersnative browsers supportsupport texttext ... but polyfills!... but polyfills!
  17. 17. https://goo.gl/cCMIGf https://goo.gl/HjJDIv
  18. 18. 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);
  19. 19. "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/
  20. 20. Solutions for Dynamic DataSolutions for Dynamic Data
  21. 21. 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/​
  22. 22. What if...?What if...? ... I have just a... I have just a REST API?REST API?
  23. 23. Proxy as a Service: push to clientProxy as a Service: push to client
  24. 24. API Server LoadAPI Server Load pollingpolling w/ streamdata.iow/ streamdata.io 10,000 concurrent clients API Server CPUAPI Server CPU
  25. 25. CacheCache
  26. 26. 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"}]
  27. 27. Efficiently Turn APIs intoEfficiently Turn APIs into Real-Time ExperiencesReal-Time Experiences Push, don't poll Dynamic Cache Incremental Data
  28. 28. Which ingredients forWhich ingredients for real-time UX?real-time UX?
  29. 29. Friendly frameworks / libsFriendly frameworks / libs AndroidAndroid SwiftSwift ObjectiveCObjectiveC
  30. 30. DemosDemos
  31. 31. Poll DemoPoll Demo
  32. 32. Xignite DemoXignite Demo
  33. 33. JCDecaux DemoJCDecaux Demo
  34. 34. 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!
  35. 35. Thank you!Thank you! @StreamdataIO@StreamdataIO
  36. 36. https://goo.gl/cCMIGf https://goo.gl/HjJDIv
  37. 37. ReferencesReferences Streamdata.io fork from AMVTek AMVTek Yaffle Remi JS PolyfillsJS Polyfills
  38. 38. 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

×