Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTTP/2 is coming! Unbundle all the things?!?

HTTP/2 is coming! Unbundle all the things?!?

HTTP - the way how clients and servers talk to each other on the internet - just got a major update. The first update in 15 years! HTTP/2 has landed and promises solutions to all the current performance workarounds we have for web applications: no more image sprites, no more concatenation, no domain sharding tricks. Just deploy like it's 1999! Well, that's at least what we got promised...

In this session, we will explore the major features of the new HTTP version and its implications for todays JavaScript developers. We will critically analyze recommendations for deployment strategies and find out which impact they have on our current applications, as well as on the applications to come.

Stefan Baumgartner

May 13, 2016
Tweet

More Decks by Stefan Baumgartner

Other Decks in Technology

Transcript

  1. HTTP/2 is coming!
    Unbundle all the things?
    main.js

    View Slide

  2. View Slide

  3. View Slide

  4. View Slide

  5. View Slide

  6. HTTP/2 is coming!
    Unbundle all the things?
    main.js

    View Slide

  7. HTTP/2 is here!
    Unbundle all the things?
    main.js

    View Slide

  8. Jumping to conclusions

    View Slide

  9. View Slide

  10. View Slide

  11. View Slide

  12. View Slide

  13. TCP Three Way Handshake
    Server
    Client
    SYN
    (got something)
    SYN+ACK
    (waddya want)
    ACK + Data
    image-1.jpg

    View Slide

  14. Head of line blocking

    View Slide

  15. HTTP1.1!!
    We need something
    better than
    1 request
    1 Request
    1 Requests
    2

    View Slide

  16. View Slide

  17. The best request is
    a request not being made

    View Slide

  18. triggering requests
    src=“…”
    url(…)
    link href=“…”

    View Slide

  19. reducing requests
    • Concatenation … 1 JS file, 1 CSS file
    • Image sprites
    • Inlining stuff

    View Slide

  20. httparchive.org

    View Slide

  21. 40 TCP connections
    on average

    View Slide

  22. View Slide

  23. CSS
    JS

    View Slide

  24. CSS
    JS

    View Slide

  25. CSS
    JS
    JPG

    View Slide

  26. CSS
    JS
    JPG

    View Slide

  27. Server
    Client
    HTTP/2
    Getting stuff …

    View Slide

  28. HTTP 1.1
    index.html
    a.js
    b.js
    c.js
    d.js

    View Slide

  29. HTTP 2
    index.html
    a.js
    b.js
    c.js
    d.js

    View Slide

  30. HTTP 2
    index.html
    a.js
    b.js
    c.js
    d.js

    View Slide

  31. HTTP 2
    index.html
    a.js
    b.js
    c.js
    d.js

    View Slide

  32. View Slide

  33. Desktop
    HTTP/2 ~1.8s
    HTTP1.1 ~2.6s

    View Slide

  34. mobile connections
    HTTP1.1 ~3.37s
    HTTP2 ~1.72

    View Slide

  35. A slow website on HTTP1.1 will
    still be a slow website on HTTP2

    View Slide

  36. Performance guidelines
    • Minifying JS and CSS
    • Optimising images
    • Gzipping your content
    • Do not block rendering
    These all still hold up!

    View Slide

  37. HTTP/2 is not (only) for Performance
    Optimisation,
    it is an Engineering Opportunity

    View Slide

  38. The best request is
    a request not being made

    View Slide

  39. HTTP 2
    index.html
    a.js
    b.js
    c.js
    d.js

    View Slide

  40. HTTP 2
    index.html
    a.js
    b.js
    d.js

    View Slide

  41. View Slide

  42. View Slide

  43. The best request is
    a request not being made

    View Slide

  44. agent.v1.svg cloud.v1.svg

    View Slide

  45. ExpiresDefault "access until Judgement Day”

    View Slide

  46. agent.v1.svg cloud.v2.svg

    View Slide

  47. So … yes!

    View Slide

  48. But wait …

    View Slide

  49. View Slide

  50. agent.v1.svg cloud.v2.svg

    View Slide

  51. agent.v1.svg

    View Slide

  52. agent.v1.svg

    View Slide

  53. agent.v1.svg
    That’s what we call
    a dependency

    View Slide

  54. In JavaScript
    payment.js
    hyped-
    framework.js
    lodash.js
    call-to-action.js
    validation.js

    View Slide

  55. In JavaScript
    payment.v1.js
    hyped-
    framework.v1
    .js
    lodash.v1..js
    call-to-
    action.v1.js
    validation.v1.js

    View Slide

  56. In JavaScript
    payment.v1.js
    hyped-
    framework.v1
    .js
    lodash.v1..js
    call-to-
    action.v2.js
    validation.v1.js

    View Slide

  57. In JavaScript
    payment.v1.js
    hyped-
    framework.v1
    .js
    lodash.v1..js
    call-to-
    action.v2.js
    validation.v2.js

    View Slide

  58. Frequency of change
    Libraries
    Utilities
    Module Module Module Module
    rigid
    high
    frequency
    some
    frequency

    View Slide

  59. Optimised utility layer
    Libraries
    Utilities
    Module Module Module
    rigid
    high
    frequency
    some
    frequency

    View Slide

  60. Extending the utility layer
    Libraries
    Utilities
    Module Module Module
    rigid
    high
    frequency
    some
    frequency

    View Slide

  61. Files to change
    Libraries
    Utilities
    Module Module Module
    rigid
    high
    frequency
    some
    frequency

    View Slide

  62. Tree Shaking
    // module.js
    import { helper } from ‘pretty-huge-utility-lib’;
    helper(10);

    View Slide

  63. Tree Shaking
    // module.js
    import { helper } from ‘pretty-huge-utility-lib’;
    helper(10);
    // module-built.js
    function neededByHelper(inp) { return true; }
    function helper(inp) { return neededByHelper(inp); }
    helper(10);

    View Slide

  64. Frequency of change
    Libraries
    Module Module Module
    rigid
    high
    frequency
    Module

    View Slide

  65. What to do with
    your application?

    View Slide

  66. The best request is
    a request not being made

    View Slide

  67. Create independent,
    exchangeable components

    View Slide

  68. Create small,
    detached bundles

    View Slide

  69. Code duplication and weight is okay
    if the file can stay longer

    View Slide

  70. Think about long lasting applications
    and frequency of change

    View Slide

  71. JS framework
    HTTP/2 bundling predictions!

    View Slide

  72. Tools not Rules

    View Slide

  73. View Slide

  74. @ddprrt
    Thank you Budapest!

    View Slide

  75. @scriptconf
    @stahlstadtjs

    View Slide