Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Breizhcamp 2016
@StreamdataIO
Application Latency and
Streaming API
Sensory memory
Length: 0,5s for video
2 sec for audio
Short-term memory
Length: 30 secondes
Long-term memory
5
Reaction time
of an
application
Impact /
Feeling
0,1 Secondes0,5 2 3 5 101 4
« Slow »
40 à 60% drops
on desktop web
« Ve...
-100 ms = - 1% revenue & - 5% page
views
Source : http://blog.radware.com/applicationdelivery/applicationaccelerationoptim...
Round Trop Delays (ping time)
300
150
110
100
30
25
10
0 50 100 150 200 250 300 350
EDGE/2G
3G
4G
Trans-continental optic ...
Latency requires a global approach
Perception
Network latency
Bandwidth
Data requirements Protocols
API calls
Dynamic data for your UI
• Stock prices & betting odds
• Social networks info / status
• Search options / words
• News
• S...
Netflix / Google / Twitter
Netflix
Netflix
Note : Table size 
device screen
JSON Path + cache local + polling
optimized query
http://www.infoq.com/presentat...
Standard for incremental data :
JSON Patch
http://jsonpatch.com/
{
"baz": "qux",
"foo": "bar"
}
[
{ "op": "replace", "path...
Solutions for dynamic data
Browser
support
Web infra
compatibility
Easiness to
dev
Load
(network /
Device)
Down
stream
App...
Demo !
C’est l’heure de sortir vos mobiles
=>
http://bit.ly/survey-demo1
et
Votez !
Show me some fuckin’code !
Introduisons un peu de
dynamisme …
Example with Uber API
https://api.uber.com/v1/estimates/time?sta
rt_latitude=33.9799396&start_longitude=-
118.3343132&serv...
Second tour
… because of « properties bindings » !
Votez encore !
http://bit.ly/survey-demo2
More code ?
https://github.com/streamdataio/
poll-demo.git
Conclusions
• App latency objective : 0,5 sec
• Enable dynamic data display
• « The more others invest in amazing UI, the
...
Application latency and streaming API
Application latency and streaming API
Application latency and streaming API
Application latency and streaming API
Application latency and streaming API
Application latency and streaming API
Application latency and streaming API
Application latency and streaming API
Application latency and streaming API
Application latency and streaming API
Application latency and streaming API
Application latency and streaming API
Prochain SlideShare
Chargement dans…5
×

Application latency and streaming API

459 vues

Publié le

Why latency, reactivity and interactivity matter
What the GAFA are doing
How to build a reactive and interactive app (Websocket, SSE and Longpolling & JSONPatch
Code review based on a voting app https://github.com/streamdataio/poll-demo

Publié dans : Logiciels
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Application latency and streaming API

  1. 1. Breizhcamp 2016 @StreamdataIO Application Latency and Streaming API
  2. 2. Sensory memory Length: 0,5s for video 2 sec for audio Short-term memory Length: 30 secondes Long-term memory
  3. 3. 5 Reaction time of an application Impact / Feeling 0,1 Secondes0,5 2 3 5 101 4 « Slow » 40 à 60% drops on desktop web « Very slow » 30 à 40% drops on mobile web Loss of attention Nervousness Tiredness « Regular »« Instant » Perfect (eq. Human Realtionship) No waiting
  4. 4. -100 ms = - 1% revenue & - 5% page views Source : http://blog.radware.com/applicationdelivery/applicationaccelerationoptimization/2013/06/web-performance-poverty-line/ Source : http://www.ebaytechblog.com/2013/03/29/measuring-real-user-experience-with-site-speed-gauge/#.VFIHLvTF9CN Source : http://www.webperformancetoday.com/2011/11/08/velocity-faster-mobile-sites-business-kpis-case-studies/
  5. 5. Round Trop Delays (ping time) 300 150 110 100 30 25 10 0 50 100 150 200 250 300 350 EDGE/2G 3G 4G Trans-continental optic fiber Trans-country optic fiber ADSL In-town private network 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) Exc. RRC (Radio Resource Controler)
  6. 6. Latency requires a global approach Perception Network latency Bandwidth Data requirements Protocols API calls
  7. 7. Dynamic data for your UI • Stock prices & betting odds • Social networks info / status • Search options / words • News • Stock of services /products (Sharing economy & promotions) • Prices • Dashboard (Cash, Sales, …) • Collaborative works/inputs (chats, texte, drawings, …) • Online games (Leader boards & in-game info) • …
  8. 8. Netflix / Google / Twitter
  9. 9. Netflix
  10. 10. Netflix Note : Table size  device screen JSON Path + cache local + polling optimized query http://www.infoq.com/presentations/netflix-reactive-rest (Jafar Husain)
  11. 11. Standard for incremental data : JSON Patch http://jsonpatch.com/ { "baz": "qux", "foo": "bar" } [ { "op": "replace", "path": "/baz", "value": "boo" }, { "op": "add", "path": "/hello", "value": ["world"] }, { "op": "remove", "path": "/foo"} ] The original document The patch { "baz": "boo", "hello": ["world"] } The result
  12. 12. Solutions for dynamic data Browser support Web infra compatibility Easiness to dev Load (network / Device) Down stream App latency Polling/Lon g Polling Websocket SSE
  13. 13. Demo !
  14. 14. C’est l’heure de sortir vos mobiles => http://bit.ly/survey-demo1 et Votez !
  15. 15. Show me some fuckin’code !
  16. 16. Introduisons un peu de dynamisme …
  17. 17. Example with Uber API https://api.uber.com/v1/estimates/time?sta rt_latitude=33.9799396&start_longitude=- 118.3343132&server_token=LNiO_-f8xKfUM4qPDYnX4UbCNxSQd061k1NIhfLK
  18. 18. Second tour
  19. 19. … because of « properties bindings » !
  20. 20. Votez encore ! http://bit.ly/survey-demo2
  21. 21. More code ? https://github.com/streamdataio/ poll-demo.git
  22. 22. Conclusions • App latency objective : 0,5 sec • Enable dynamic data display • « The more others invest in amazing UI, the more yours seems louzy » A. Einstein « Relativity concepts applied to UI », OpenRoadMedia, 1937 • Become Streamers !

×