$30 off During Our Annual Pro Sale. View Details »

Writing Real Time Web Apps

Writing Real Time Web Apps

Given at Fluent 2014

Wesley Hales

March 14, 2014

More Decks by Wesley Hales

Other Decks in Technology


  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)

  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

  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