Transitioning to modern JavaScript

on YouTube ↗14m

" summary

Claim: legacy dependency code is one of the biggest web performance problems today, causing roughly 80 PB/month of extra bandwidth and an estimated 54,000 metric tons CO2. Measured examples show an async arrow function (21 bytes) transpiles to ~7 KB and executes >6× slower (62 VM instructions vs ~1100). NPM analysis finds median package syntax is ES5, <25% use newer syntax, and only ~9–11% use module/browser fields. Practical fix: publish modern exports, target ES2017 sweet spot, and ship dual bundles via module/nomodule or transpile built bundles.

AI-written summary · about

" chapters (13)

1. 0:00Start
2. 1:42Modern JavaScript
3. 2:34Classes
4. 2:59Block Scoping
5. 3:15Destructuring
6. 4:35Transpilation
7. 6:35Which JavaScript?
8. 6:59Estimated cost of Legacy JavaScript
9. 8:03Why legacy is the default on npm
10. 11:092. Need to support IE11? Opera Mini?
11. 11:45Option 1: Compile Twice
12. 12:45is a tax you don't have to pay
13. 13:02Optimal bundle configurations

" related talks

• 26mWeb Performance in modern JavaScript worldFilip Rakowski · JavaScript fwdays'19
• 35mBrowser Package ManagementGuy Bedford · MountainWest JavaScript 2014
• 21mAsk not what JavaScript can do for youJon Bretman · JSConf EU 2013
• 11mRevolutionizing JavaScript PerformanceDeepika Annam · Conf42 JavaScript 2025
• 23mThe third age of JavaScript: Three years inswyx · Reactathon 2022
• 58m10KB or Bust: The Delicate Power of Webpack and BabelBrian Holt · Voxxed Days Bucharest 2018
• 36mES6 Modules & HTTP/2 - Will We Stop Packaging Our JavaScript Code?Vincent Ogloblinsky · DevFest Toulouse 2017
• 34mTowards a simpler JavaScript ecosystemGil Tayar · ReactNext 2024