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

905 views
811 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
905
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
26
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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

    ×