LWPG: The Future Is Realtime

Transcript

1. Micheil Smith - @miksago The future is realtime

2. I work at Pusher BUILDING THE REALTIME WEB

3. • Part 1: Background & History • Part 2: Using

   the Realtime Web

4. • Part 1: Background & History • Part 2: Using

   the Realtime Web

5. • Part 1: Background & History • Overview of the

   past • The Shift to Realtime • Realtime Web in Action

6. • Overview of the past • The Shift to Realtime

   • Realtime Web in Action

7. • Early web • PHP / LAMP Stack • MVC

   • Social Web Overview of the past

8. http://www.mikealrogers.com/posts/a-new- direction-for-web-applications-.html Overview of the past

9. • Overview of the past • The Shift to Realtime

   • Realtime Web in Action

10. The Shift to Realtime • The web has become more

    interactive • Users expect things to be “now” • And why should they have to wait?

11. • We researched page-load time • We used AJAX to

    decrease wait-time on interactions • We then tried to simulate “realtime” with AJAX and related technologies The Shift to Realtime

12. The Simulations of Realtime • HTTP Polling • LiveConnect •

    Forever iFrame • XHR Long-polling • XHR Streaming

13. A more complete history http://blog.pusher.com/2011/8/10/what- came-before-websockets

14. Going Properly Realtime • HTML5 Introduces many new API’s •

    One of those is WebSockets

15. What are WebSockets? • Bi-directional socket connection between browser and

    server • API is fairly low level • Low-latency/high-frequency messaging

16. The Uses of WebSockets • Progressively Realtime Applications • Entirely

    Realtime Applications • Multiplayer HTML5 Gaming

17. • Overview of the past • The Shift to Realtime

    • Realtime in Action

18. Progressively Realtime Apps CloudApp Tastebuds

19. Collaborative Editing Codr.cc Google Docs

20. Realtime Analytics Guag.es

21. Realtime HTML5 Gaming Rawkets Metris

22. There’s a lot more uses...

23. ...and even more that we haven’t thought of yet.

24. • Part 1: Background & History • Part 2: Using

    the Realtime Web

25. var socket = new WebSocket('ws://localhost:8080/') socket.onopen = function() { /*...*/

    }; socket.onmessage = function(messageEvent) { /*...*/ }; socket.onclose = function(closeEvent) { /*...*/ }; socket.onerror = function() { /*...*/ }; socket.send('my data'); The WebSocket API

26. var socket = new WebSocket(url, protocol) var socket = new

    WebSocket(url, [protocol1, protocol2]) socket.addEventListener('open', function() { /*...*/ }); socket.addEventListener('message', /*...*/ ); socket.addEventListener('close', /*...*/ ); socket.addEventListener('error', /*...*/ ); The WebSocket API (alt)

27. WebSocket Servers • worlize/WebSocket-node • miksago/node-websocket-server • oberstet/Autobahn (python) •

    igrigorik/em-websocket (ruby) • Jetty/7.5.2 (java) • ostinelli/misultin (erlang)

28. Warning! There are currently multiple versions of WebSockets supported by

    Browsers, not all of the previously listed Servers support all the versions.

29. Extra’s!

30. Portland, OR 7th & 8th November http://krtconf.com Keeping It Realtime

    Conference

31. Questions?

32. Thanks for listening! @miksago on Twitter / Github / Geekli.st