The document discusses the state of real-time web applications. It describes how user expectations for up-to-date information led to the development of techniques like AJAX polling to periodically request updates from servers. The introduction of WebSockets allowed for true real-time updates by keeping a persistent connection open between client and server. The document demonstrates several real-time applications including tracking soccer players and synchronizing data models. It advocates using a reactive programming approach along with technologies like Node.js, Socket.io, and Backbone.js to build real-time web applications.

1. State-of-the-art Real-Time Web
Applications
Paul Seiffert I November 22rd 2012
© 2012 Mayflower GmbH

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. // Topic
Real-Time
Web
State-of-the-art Realtime Web I Mayflower GmbH I November 22nd 2012 I 3

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. // 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. // 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. // HTTP
State-of-the-art Realtime Web I Mayflower GmbH I November 22nd 2012 I 5

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

10. Probably not a good
idea.
State-of-the-art Realtime Web I Mayflower GmbH I November 22nd 2012 I 8

11. Good idea:
WebSockets!
State-of-the-art Realtime Web I Mayflower GmbH I November 22nd 2012 I 9

13. // Browsers support WebSockets!
source: http://caniuse.com/
websockets
State-of-the-art Realtime Web I Mayflower GmbH I November 22nd 2012 I 11

14. // Browsers support WebSockets!
source: http://caniuse.com/
websockets
State-of-the-art Realtime Web I Mayflower GmbH I November 22nd 2012 I 11

15. // Architecture
PHP +
Symfony2
HTTP
JavaScript App DB / Redis
WebSocket
Node.js
State-of-the-art Realtime Web I Mayflower GmbH I November 22nd 2012 I 12

16. // 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

17. // 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

18. // 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

19. // Demo
I 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

20. Demo
State-of-the-art Realtime Web I Mayflower GmbH I November 22nd 2012 I 15

21. // “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

22. // Challenge
I 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

23. // Challenge
I 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

24. // Challenge
I 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

25. // Challenge
I 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

26. // Technology
I PHP-Backend: Symfony2, Doctrine
storage: MySQL
I Node-Backend: Node.js, Socket.io
I Frontend: Backbone.js, Raphaël, ...
State-of-the-art Realtime Web I Mayflower GmbH I November 22nd 2012 I 18

27. Demo
State-of-the-art Realtime Web I Mayflower GmbH I November 22nd 2012 I 19

28. +
State-of-the-art Realtime Web I Mayflower GmbH I November 22nd 2012 I 20

29. +
State-of-the-art Realtime Web I Mayflower GmbH I November 22nd 2012 I 21

30. +
mmmmh... tasty!
State-of-the-art Realtime Web I Mayflower GmbH I November 22nd 2012 I 21

31. // Thanks!
Contact Paul Seiffert
paul.seiffert@mayflower.de
+49 89 242054-1172
Mayflower GmbH
Mannhardtstr. 6
80538 München
© 2012 Mayflower GmbH