Pro Yearly is on sale from $80 to $50! »

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.

187d92c9284160ad908885ab096f5209?s=128

Stefan Baumgartner

May 13, 2016
Tweet

Transcript

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

  2. None
  3. None
  4. None
  5. None
  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

  9. None
  10. None
  11. None
  12. None
  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
  16. None
  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

  22. None
  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

  32. None
  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

  41. None
  42. None
  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 …

  49. None
  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

  73. None
  74. @ddprrt Thank you Budapest!

  75. @scriptconf @stahlstadtjs