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
6. HTTP/2 is coming! Unbundle all the things? main.js
7. HTTP/2 is here! Unbundle all the things? main.js
8. Jumping to conclusions
13. TCP Three Way Handshake Server Client SYN (got something) SYN+ACK (waddya want) ACK + Data image-1.jpg
14. Head of line blocking
15. HTTP1.1!! We need something better than 1 request 1 Request 1 Requests 2
17. The best request is a request not being made
18. triggering requests src=“…” url(…) link href=“…”
19. reducing requests • Concatenation … 1 JS file, 1 CSS file • Image sprites • Inlining stuff
20. httparchive.org
21. 40 TCP connections on average
23. CSS JS
24. CSS JS
25. CSS JS JPG
26. CSS JS JPG
27. Server Client HTTP/2 Getting stuff …
28. HTTP 1.1 index.html a.js b.js c.js d.js
29. HTTP 2 index.html a.js b.js c.js d.js
30. HTTP 2 index.html a.js b.js c.js d.js
31. HTTP 2 index.html a.js b.js c.js d.js
33. Desktop HTTP/2 ~1.8s HTTP1.1 ~2.6s
34. mobile connections HTTP1.1 ~3.37s HTTP2 ~1.72
35. A slow website on HTTP1.1 will still be a slow website on HTTP2
36. Performance guidelines • Minifying JS and CSS • Optimising images • Gzipping your content • Do not block rendering These all still hold up!
37. HTTP/2 is not (only) for Performance Optimisation, it is an Engineering Opportunity
38. The best request is a request not being made
39. HTTP 2 index.html a.js b.js c.js d.js
40. HTTP 2 index.html a.js b.js d.js
43. The best request is a request not being made
44. agent.v1.svg cloud.v1.svg
45. ExpiresDefault "access until Judgement Day”
46. agent.v1.svg cloud.v2.svg
47. So … yes!
48. But wait …
50. agent.v1.svg cloud.v2.svg
51. agent.v1.svg
52. agent.v1.svg
53. agent.v1.svg That’s what we call a dependency
54. In JavaScript payment.js hyped- framework.js lodash.js call-to-action.js validation.js
55. In JavaScript payment.v1.js hyped- framework.v1 .js lodash.v1..js call-to- action.v1.js validation.v1.js
56. In JavaScript payment.v1.js hyped- framework.v1 .js lodash.v1..js call-to- action.v2.js validation.v1.js
57. In JavaScript payment.v1.js hyped- framework.v1 .js lodash.v1..js call-to- action.v2.js validation.v2.js
58. Frequency of change Libraries Utilities Module Module Module Module rigid high frequency some frequency
59. Optimised utility layer Libraries Utilities Module Module Module rigid high frequency some frequency
60. Extending the utility layer Libraries Utilities Module Module Module rigid high frequency some frequency
61. Files to change Libraries Utilities Module Module Module rigid high frequency some frequency
62. Tree Shaking // module.js import { helper } from ‘pretty-huge-utility-lib’; helper(10);
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);
64. Frequency of change Libraries Module Module Module rigid high frequency Module
65. What to do with your application?
66. The best request is a request not being made
67. Create independent, exchangeable components
68. Create small, detached bundles
69. Code duplication and weight is okay if the file can stay longer
70. Think about long lasting applications and frequency of change
71. JS framework HTTP/2 bundling predictions!
72. Tools not Rules
74. @ddprrt Thank you Budapest!
75. @scriptconf @stahlstadtjs