Writing Real Time Web Apps (Updated)

Given at SF JavaScript meetup group May 13, 2014

Transcript

1. Writing Real Time Web Apps @wesleyhales shapesecurity.com
2. 2013 Q2 Connection Speeds http://www.akamai.com/dl/documents/akamai_soti_q213.pdf @wesleyhales
3. 2013 Q3 Connection Speeds http://www.akamai.com/dl/documents/akamai_soti_q213.pdf @wesleyhales
4. Bandwidth doesn’t help http://bit.ly/18tM3BX - More Bandwidth Doesn't Matter (Much) @wesleyhales
5. Video, Music and other large files benefit from bandwidth increase. @wesleyhales
6. But we’re concerned with page load time (PLT)… @wesleyhales
7. Today’s HTTP Congestion - No Multiplexing @wesleyhales http://www.guypo.com/mobile/http-pipelining-big-in-mobile/
8. TCP Connections per host http://www.igvita.com/slides/2012/http2-spdy-devconf.pdf @wesleyhales
9. Blame RTT @wesleyhales http://bit.ly/18tM3BX - More Bandwidth Doesn't Matter (Much)
10. Overall, round-trip-times dominate performance more than bandwidth does (and pipelining doesn’t help). @wesleyhales
11. Enter SPDY • SPDY addresses RTTs and PLTs • Almost everything we’re doing on the front end to improve perf is handled by SPDY (Push) • No need for spiriting! • A pushed resource goes into your browsers cache - nothing more, nothing less.! • GZIP (Headers but not content/images)! • Prioritization @wesleyhales
12. SPDY The starting point of HTTP 2.0 - Nov 2014 Proposed Standard ! http://zoompf.com/blog/2013/04/maximizing-spdy-and-ssl-performance Encapsulates HTTP Requests Transmits Content over SSL Channel 
 (for better security and compatibility with existing network infrastructure) ! @wesleyhales
13. Pre-Concat over SPDY3 Post-Concat over SPDY3 SPDY Antipatterns - File Concatenation @wesleyhales
14. No SPDY - 6 Connections 13 Requests - 1.2 MB Load Time: 131 ms SPDY - 1 Connection 13 Requests - 1.2 MB Load Time: 57 ms https://www.onslyde.com/index-test.html @wesleyhales
15. Demo SPDY Push @wesleyhales
16. SPDY • Google property latency improvements from Nov 20th 2013 • Time to first byte request to window onload event http://blog.chromium.org/2013/11/making-web-faster-with-spdy-and-http2.html @wesleyhales
17. HTTP 2.0 “HTTP/2 isn’t magic Web performance pixie dust; you can’t drop it in and expect your page load times to decrease by 50%.” - Mark Nottingham (chair) @wesleyhales
18. HTTP2 Servers https://github.com/http2/http2-spec/wiki/Implementations @wesleyhales
19. chrome://flags/#enable-http2-draft-04 HTTP2 Browser Support @wesleyhales
20. WebSockets • Don’t confuse with SPDY push. And It’s not a spec with intentions of increasing PLT (Page Load Time) • WebSockets can be layered over a SPDY connection @wesleyhales
21. SPDY+WebSocket • Jetty 9 • Node • Ruby • Proxy (nginx , HAProxy) • Apache (mod_spdy) @wesleyhales
22. Writing Real Time Apps • RPC (Remote Procedure Call) and PubSub (Publish & Subscribe) messaging patterns on top of raw WebSocket • WebSocket requires a sub-protocol • WAMP, JSON-RPC, custom @wesleyhales
23. WAMP @wesleyhales
24. WAMP - RPC When the execution of the remote procedure finishes, the server responds by sending a message of type CALLRESULT or CALLERROR. @wesleyhales
25. WAMP - PUBSUB @wesleyhales
26. WAMP @wesleyhales
27. Onslyde Demo @wesleyhales
28. Security @wesleyhales
29. Battery Consumption @wesleyhales
30. Services @wesleyhales
31. PubNub Uses WAMP @wesleyhales
32. @wesleyhales
33. @wesleyhales
34. Thanks! ! @wesleyhales shapesecurity.com