Animated Data @ PaloIT Barcamp

Come and discover how our brain works and how it has an effect on how we perceive the latency. Why our brain pays attention to movements? Why we will shift smoother from animated UI to animated data?

Transcript

1. Les données Les données animées animées @ctranxuan @StreamdataIO
3. Refresh and Waiting Refresh and Waiting Poor UX: low emotional engagement Poor UX: low emotional engagement Poor SEO: poor dwell time Poor SEO: poor dwell time
5. Animated Data Animated Data
6. What is real-time? What is real-time? It's relative to the user It's relative to the user
9. Real-time UX... i$ Rea£-time Real-time UX... i$ Rea£-time Mon€¥ Mon€¥ Amazon found every 100 milliseconds of Amazon 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 in Google found an extra 0.5 seconds in search page generation time dropped search 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. Constraints Constraints HTTP 1.1 HTTP 1.1 SSL / TLS SSL / TLS Increasing global traffic Increasing global traffic Mobile First (3G / 4G) Mobile First (3G / 4G)
20. Which ingredients for Which ingredients for real-time UX? real-time UX?
21. Solutions for dynamic Solutions for dynamic data data Long polling Long polling WebSockets WebSockets Server-Sent Events Server-Sent Events
22. Long-Polling Long-Polling HTTP Hack HTTP Hack 㱺 㱺 Don't use it anymore Don't use it anymore
23. WebSockets WebSockets Server-Sent Server-Sent Events Events Push techno W3C 2008 Push techno W3C 2006
24. WebSockets WebSockets Server-Sent Server-Sent Events Events
25. WebSockets WebSockets Server-Sent Server-Sent Events Events 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. WebSockets WebSockets Server-Sent Server-Sent Events Events proxies and load balancers reconfiguration No need to reconfigure! (it's HTTP)
27. WebSockets WebSockets Server-Sent Server-Sent Events Events
28. WebSockets WebSockets Server-Sent Server-Sent Events Events binary + text binary + text native browsers native browsers support support text text ... but polyfills! ... but polyfills!
29. https://goo.gl/cCMIGf https://goo.gl/HjJDIv
30. WebSockets WebSockets Server-Sent Server-Sent Events Events 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 Data Solutions for Dynamic Data
33. Streaming vs HTTP Polling Streaming vs HTTP Polling 10 messages of 1 byte : 7ms vs 220 ms 10 messages of 1 byte : 7ms vs 220 ms 100 messages of 10 bytes : 57 vs 986 ms 100 messages of 10 bytes : 57 vs 986 ms 1000 messages of 100 bytes : 200 vs 10210 ms 1000 messages of 100 bytes : 200 vs 10210 ms 5000 messages of 1000 bytes : 1,2 sec vs 54 sec 5000 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 client Proxy as a Service: push to client
36. API Server Load API Server Load polling polling w/ streamdata.io w/ streamdata.io 10,000 concurrent clients API Server CPU API Server CPU
37. Cache Cache
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 into Efficiently Turn APIs into Real-Time Experiences Real-Time Experiences Push, don't poll Dynamic Cache Incremental Data
40. Which ingredients for Which ingredients for real-time UX? real-time UX?
41. Friendly frameworks / libs Friendly frameworks / libs Android Android Swift Swift ObjectiveC ObjectiveC
42. Demos Demos
43. Poll Demo Poll Demo
44. Xignite Demo Xignite Demo
45. JCDecaux Demo JCDecaux 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 Conclusions Conclusions 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. References References Streamdata.io fork from AMVTek AMVTek Yaffle Remi JS Polyfills JS Polyfills
50. References References What is Server-Sent Events? WebSockets vs SSE Getting started with WebSockets and SSE Server-Sent Events: The simplest realtime browser spec WebSockets / SSE WebSockets / SSE