Writing Real Time Web Apps

Given at Fluent 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.
6. But we’re concerned with page load time (PLT)…
7. Today’s HTTP Congestion - No Multiplexing http://www.igvita.com/slides/2012/http2-spdy-devconf.pdf @wesleyhales
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 (Goal is 50% reduction in PLT) • Almost everything we’re doing on the front end to improve perf is handled by SPDY • Resource Inlining (SPDY Push) • No need for spriting! • A pushed resource goes into your browsers cache - nothing more, nothing less.! • GZIP (Headers but not content/images)! • Prioritization @wesleyhales
12. Pre-Concat over SPDY3 Post-Concat over SPDY3 SPDY Antipatterns - File Concatenation
13. Demo SPDY Push @wesleyhales
14. 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
15. 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
16. 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
17. 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
18. SPDY+WebSocket • Jetty 9 • Node • Ruby • Proxy (nginx , HAProxy) • Apache (mod_spdy) @wesleyhales
19. 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
20. WAMP @wesleyhales
21. WAMP - RPC When the execution of the remote procedure finishes, the server responds by sending a message of type CALLRESULT or CALLERROR. @wesleyhales
22. WAMP - PUBSUB @wesleyhales
23. WAMP @wesleyhales
24. Demo @wesleyhales
25. Security @wesleyhales
26. Battery Consumption @wesleyhales
27. Services @wesleyhales
28. PubNub Uses WAMP @wesleyhales
29. @wesleyhales
30. @wesleyhales
31. Testing Fallbacks (Polling) @wesleyhales
32. Prissy Vegas
33. Thanks! ! @wesleyhales shapesecurity.com