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.

State-of-the-art real-time web applications

1,177 views

Published on

Published in: Technology
  • Be the first to comment

State-of-the-art real-time web applications

  1. 1. State-of-the-art Real-Time WebApplicationsPaul Seiffert I November 22rd 2012 © 2012 Mayflower GmbH
  2. 2. /** * @author Paul Seiffert <paul.seiffert@mayflower.de> */•Developer @ Mayflower•Studied @ TU München•Jabber/E-Mail: paul.seiffert@mayflower.de State-of-the-art Realtime Web I Mayflower GmbH I November 22nd 2012 I 2
  3. 3. // Topic Real-Time Web State-of-the-art Realtime Web I Mayflower GmbH I November 22nd 2012 I 3
  4. 4. // User’s Expectations Information displayed on websites is up-to-date State-of-the-art Realtime Web I Mayflower GmbH I November 22nd 2012 I 4
  5. 5. // User’s Expectations Information displayed on websites is up-to-date 30 minutes later: State-of-the-art Realtime Web I Mayflower GmbH I November 22nd 2012 I 4
  6. 6. // User’s Expectations Information displayed on websites is up-to-date 30 minutes later: Information is still up-to-date / updated State-of-the-art Realtime Web I Mayflower GmbH I November 22nd 2012 I 4
  7. 7. // HTTP State-of-the-art Realtime Web I Mayflower GmbH I November 22nd 2012 I 5
  8. 8. // Next step: XHR-Polling Web applications started to ask the server for new information State-of-the-art Realtime Web I Mayflower GmbH I November 22nd 2012 I 6
  9. 9. Probably not a good idea. State-of-the-art Realtime Web I Mayflower GmbH I November 22nd 2012 I 8
  10. 10. Good idea:WebSockets! State-of-the-art Realtime Web I Mayflower GmbH I November 22nd 2012 I 9
  11. 11. // Browsers support WebSockets! source: http://caniuse.com/ websockets State-of-the-art Realtime Web I Mayflower GmbH I November 22nd 2012 I 11
  12. 12. // Browsers support WebSockets! source: http://caniuse.com/ websockets State-of-the-art Realtime Web I Mayflower GmbH I November 22nd 2012 I 11
  13. 13. // Architecture PHP + Symfony2 HTTPJavaScript App DB / Redis WebSocket Node.js State-of-the-art Realtime Web I Mayflower GmbH I November 22nd 2012 I 12
  14. 14. // Approach: Reactive Programming Changes to entity objects have to be communicated to all browsers that are currently connected! State-of-the-art Realtime Web I Mayflower GmbH I November 22nd 2012 I 13
  15. 15. // Approach: Reactive Programming Changes to entity objects have to be communicated to all browsers that are currently connected! This communication has to be done transparently. State-of-the-art Realtime Web I Mayflower GmbH I November 22nd 2012 I 13
  16. 16. // Approach: Reactive Programming Changes to entity objects have to be communicated to all browsers that are currently connected! This communication has to be done transparently.Reactive Programming State-of-the-art Realtime Web I Mayflower GmbH I November 22nd 2012 I 13
  17. 17. // DemoI Simon Waibl’s Bachelor Thesis “Real-Time Model Synchronization with Symfony2” State-of-the-art Realtime Web I Mayflower GmbH I November 22nd 2012 I 14
  18. 18. Demo State-of-the-art Realtime Web I Mayflower GmbH I November 22nd 2012 I 15
  19. 19. // “Real-Real-Time”I Sportactics: Live-Tracking of Soccer Players State-of-the-art Realtime Web I Mayflower GmbH I November 22nd 2012 I 16
  20. 20. // ChallengeI Tracking and visualizing the position of I 22 Soccer Players + 1 Ball I with a sample rate of 20hz I for 90 minutes State-of-the-art Realtime Web I Mayflower GmbH I November 22nd 2012 I
  21. 21. // ChallengeI Tracking and visualizing the position of I 22 Soccer Players + 1 Ball I with a sample rate of 20hz I for 90 minutes State-of-the-art Realtime Web I Mayflower GmbH I November 22nd 2012 I
  22. 22. // ChallengeI Tracking and visualizing the position of I 22 Soccer Players + 1 Ball I with a sample rate of 20hz I for 90 minutes 80Byte × 23 (Tags) × 20Hz ≈ 36 KB/s State-of-the-art Realtime Web I Mayflower GmbH I November 22nd 2012 I
  23. 23. // ChallengeI Tracking and visualizing the position of I 22 Soccer Players + 1 Ball I with a sample rate of 20hz I for 90 minutes 80Byte × 23 (Tags) × 20Hz ≈ 36 KB/s 36KB/s × 60s × 90 (min) ≈ 200 MB State-of-the-art Realtime Web I Mayflower GmbH I November 22nd 2012 I
  24. 24. // TechnologyI PHP-Backend: Symfony2, Doctrine storage: MySQLI Node-Backend: Node.js, Socket.ioI Frontend: Backbone.js, Raphaël, ... State-of-the-art Realtime Web I Mayflower GmbH I November 22nd 2012 I 18
  25. 25. Demo State-of-the-art Realtime Web I Mayflower GmbH I November 22nd 2012 I 19
  26. 26. +State-of-the-art Realtime Web I Mayflower GmbH I November 22nd 2012 I 20
  27. 27. +State-of-the-art Realtime Web I Mayflower GmbH I November 22nd 2012 I 21
  28. 28. +mmmmh... tasty! State-of-the-art Realtime Web I Mayflower GmbH I November 22nd 2012 I 21
  29. 29. // Thanks!Contact Paul Seiffert paul.seiffert@mayflower.de +49 89 242054-1172 Mayflower GmbH Mannhardtstr. 6 80538 München © 2012 Mayflower GmbH

×