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

Writing Real Time Web Apps (Updated)

Writing Real Time Web Apps (Updated)

Given at SF JavaScript meetup group May 13, 2014

Wesley Hales

May 13, 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)… @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