Writing Real Time Web Apps (Updated)

Writing Real Time Web Apps (Updated)

Given at SF JavaScript meetup group May 13, 2014

9d8e12bccfbfea63c86b38a2a27315cd?s=128

Wesley Hales

May 13, 2014
Tweet

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