Moving towards web components
summary
A concrete, production-tested component system is described: a modular Origami registry plus Origami build tools (Bower, gulp, Sass, CommonJS/browserify, uglify) and a build-on-demand CDN that serves CSS/JS bundles. Rules cover CSS encapsulation (O- prefixes, BEM, no ids), Sass !default, no extends, and responsive mixins. A polyfill service at cdn.polyfill.io tailors bundles per UA and runs tests in 26 browsers and 7,000 tests, supporting over 600 domain names in deployment.
AI-written summary · about
chapters (15)
- 0:00Start
- 1:11Bottlenecks Modern web development is slow because...
- 1:44Multiple formats Average article consumption by device (FT)
- 6:13Some home truths Modern web development is slow because...
- 10:51What we need The perfect component solution...
- 13:58Component dependencies Start with primitives, build on them to create higher level components
- 14:45Build process Standardise a build process for improved code reuse and lower learning curve
- 15:48Origami build tools
- 17:15Component-ready CSS Encapsulation doesn't come with CSS, we have to create it with rules
- 19:43Inheriting style using Sass Define reusable styles in dependent modules, don't rely on load order
- 28:15Build service A full build process for components' CSS and JavaScript, available as a service
- 32:37Managing legacy support (CSS) Provide a good, readable experience in all browsers
- 33:50Managing legacy support (JS) Use a 'cuts the mustard test to set a baseline for progressive enhancement
- 37:58Polyfills as a service? Using Polyfills at scale is hard, here's why
- 39:46Polyfill service for everyone
related talks
26mCan't You Just Make It More like Bootstrap?
30mPolymer + Webpack: Bringing Web Components to a Framework Near You
21mThe Year of Web Components
01h 12mMake Web Development Fun Again, with Web Components
36mECMAScript 6 & Web Components
41mHigh-Performance Web UI with Web Components
41mComponents Approach to Building Web Apps
24mThe Good, The Bad, and The Web Components