Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The end of polling (Audrey Neveu)

This is a session given by Audrey Neveu at Nordic APIs 2016 Platform Summit on October 25th, in Stockholm Sweden.

Description:

We know interactivity is the key to keep our user’s interest alive but we can’t reduce animation to UI anymore. Twitter, Waze, Slack… users are used to have real-time data in applications they love. But how can you turn your static API into a stream of data?
When talking about data streaming, we often think about WebSockets. But have you ever heard of Server-Sent Events? In this tools-in-action we will compare both technologies to understand which one you should opt for depending on your usecase and I’ll show you how we have been even further by reducing the amount of data to transfer with JSON-Patch.
And because real-time data is not only needed by web (and because it’s much more fun), I’ll show you how we can make drone dance on streamed APIs.

  • Be the first to comment

  • Be the first to like this

The end of polling (Audrey Neveu)

  1. 1. @StreamdataIOstreamdataio API Streaming Why and how to transform a REST API into a Data Streaming API
  2. 2. ABOUT ME Developer Relation Co-Leader France @Audrey_Neveu @StreamdataIOstreamdataio
  3. 3. MODERN TIMES @StreamdataIOstreamdataio
  4. 4. OUR GOAL @StreamdataIOstreamdataio
  5. 5. ANIMATION IS THE KEY... BUT WHY? @StreamdataIOstreamdataio
  6. 6. BECAUSE OF EVOLUTION @StreamdataIOstreamdataio
  7. 7. USER INTERFACE @StreamdataIOstreamdataio
  8. 8. KEEP CALM AND... @StreamdataIOstreamdataio LEAVE.
  9. 9. REFRESH BUTTON IS EVIL @StreamdataIOstreamdataio
  10. 10. REAL-TIME USER EXPERIENCE @StreamdataIOstreamdataio
  11. 11. API STREAMING @StreamdataIOstreamdataio
  12. 12. SOLUTIONS FOR REAL-TIME APPLICATIONS ✓ Web Sockets ✓ Server-Sent Events ✓ (Long) Polling @StreamdataIOstreamdataio
  13. 13. IS NOT A SOLUTIONPOLLING... @StreamdataIOstreamdataio (and neither is long polling)
  14. 14. *TRUE* SOLUTIONS Push Technologies Web-Sockets Server-Sent Events 2008 2006 @StreamdataIOstreamdataio W3C Specification
  15. 15. PUSH TECHNOLOGIES Web-Sockets Server-Sent Events Text + Binary Text @StreamdataIOstreamdataio
  16. 16. PROTOCOLS GET /chat HTTP/1.1 Host: example.com Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ== Sec-WebSocket-Protocol: chat Sec-WebSocket-Version: 13 GET /stream HTTP/1.1 1 Host: example.com Accept: text/event-stream HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk= Sec-WebSocket-Protocol: chat Sec-WebSocket-Version: 13 Web-Sockets (RFC-6455) Server-Sent Events @StreamdataIOstreamdataio
  17. 17. CONFIGURATION Server-Sent Events @StreamdataIOstreamdataio Web-Sockets
  18. 18. MESSAGES FORMAT var msg = { type: "message", text: "Hello Nordic APIs!", id: 12345, date: Date.now() }; data: Hello Nordic APIs! data: Hello Nordic APIs data: with two lines data: {"time": "16:34:36", "text": "Hello Nordic APIs!"} id: 12345 event: foo data: Hello Nordic APIs! retry: 10000 @StreamdataIOstreamdataio Web-Sockets Server-Sent Events
  19. 19. IMPLEMENTATION Server-Sent Events @StreamdataIOstreamdataio Web-Sockets var websocket = new WebSocket ('ws://websocketserver/echo'); var eventSource = new EventSource ('http://sseserver/echo'); websocket.onOpen = function(){ ... }; eventSource.onopen = function(){ ... }; websocket.onMessage = function(e){ var data = e.data; var message = data.msg; ... }; eventSource.onMessage = function(e){ var message = JSON.parse(e.data); ... }; websocket.onError = function(e){ ... }; eventSource.onError = function(e){ ... }; ... eventSource .addEventListener('foo',function(e){ // do something }, false); eventSource .addEventListener('bar',function(e){ // do something else }, false);
  20. 20. LOST IN CONNECTION Server-Sent Events @StreamdataIOstreamdataio Web-Sockets
  21. 21. BROWSER SUPPORT Server-Sent Events 53. 49. 10. 39. 11. 14. 53. 49. 10. 39. 11. UC. @StreamdataIOstreamdataio Web-Sockets source : http://caniuse.com/
  22. 22. MOBILE BROWSER SUPPORT Server-Sent Events 51. 49. 10. 18. 52. source : http://caniuse.com/ 51. 49. 10. 18. 52. @StreamdataIOstreamdataio Web-Sockets
  23. 23. PERFORMANCES 8s 5s x1.6 8s 6s x1.3 16s 7s x.2.2 Web-Sockets SSE source: http://matthiasnehlsen.com/blog/2013/05/01/server-sent-events-vs-websockets/ Diff @StreamdataIOstreamdataio
  24. 24. CHOOSE WISELY @StreamdataIOstreamdataio
  25. 25. Proxy-as-a-Service ✓ works with any JSON API ✓ streaming based on Server-Sent Events ✓ dynamic cache ✓ incremental updates STREAMDATA.IO @StreamdataIOstreamdataio
  26. 26. 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"}] [{"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"}] [{"op":"replace","path":"/2/price","value":5}, {"op":"replace","path":"/3/param2","value":"32"}] @StreamdataIOstreamdataio
  27. 27. THE API PROVIDER BEST FRIEND Sample Case: Investment Mobile App @StreamdataIOstreamdataio Stockmarket API Web & Mobile Apps ➢ 25bn calls/month ✓ 90% reduction of the outgoing traffic & API Server Load ✓ 6 months acceleration in development
  28. 28. DEMO @StreamdataIOstreamdataio
  29. 29. VOTE SERVER-SENT EVENTS! @StreamdataIOstreamdataio
  30. 30. @StreamdataIOstreamdataio THANKS! Q&A

×