Données animées

440 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
440
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

×