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.

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