Refactoring the polyfills recipe
summary
Looks at polyfill delivery for web apps using tools like core-js, babel-preset-env and browserslist; explains current out-of-the-box delivery, configuration and build steps for polyfills; analyzes challenges introduced by microfrontends and evolving language specs and suggests ways to improve polyfill packaging and delivery.
AI-written summary · about
chapters (35)
- 0:00Polyfills introduction
- 1:23Speaker intro
- 2:06What are polyfills
- 3:53Polyfills vs ponifills
- 4:34Detecting browser support
- 5:41Core JS size issues
- 7:03Transpiling: when and why
- 8:46Polyfill vs transpile choice
- 10:11Polyfill/transpile limits
- 10:32Automating polyfills/transpiling
- 12:00Babel and SVelite tools
- 12:21Browserlist optimization
- 14:04Browserlist for polyfills
- 15:54MDN vs Core JS Compat
- 18:00Transpiler entry vs usage
- 19:42Transformer Time mode
- 20:23Delivering polyfills: entry vs usage
- 21:50Problem with full polyfills
- 22:33Conditional polyfills by agent
- 24:45Conditional polyfills via checks
- 27:14Why document.write is bad
- 28:39Future polyfill candidates
- 29:00Conditional polyfill results
- 30:48Reducing polyfill delivery
- 31:52Semi-manual polyfill management
- 32:54Legacy vs modern bundles
- 33:58Static feature checks
- 35:41ESLint static checks
- 37:04Polyfills in microfrontends
- 38:50Organizing microfrontend polyfills
- 40:16Checking polyfills in build
- 40:59Optimization results
- 41:22Q&A: browser support
- 43:08Q&A: adding polyfills
- 44:13Q&A: CSS and Web API polyfills
related talks
11m99 Ways to Take Away Your Ugly Polyfills
03mMoving JS from Libraries to Polyfills
47mOptimize the frontend by running your own polyfill.io server
20mMoving JS from Libraries to Polyfills
53mPolyfilling the gaps
30mThe Frankenstein Framework - The Polyglot future of the web
30mPolymer + Webpack: Bringing Web Components to a Framework Near You
27mCompile Like It's 2017