Architecting A Component Compiler
summary
A component compiler generates framework‑agnostic web components from one source and proves it with numbers and artifacts not promises. It uses TypeScript custom transformers and Rollup to statically analyze and tree‑shake code, converts functions to arrow form, adds build conditionals, and emits ES modules, ES5/SystemJS bundles, framework bindings for Angular and React, and a Node hydrate file. Small outputs show it works: a hello world at 87 bytes, a TODO MVC at 2.2 KB, Ionic usage hits 0.5M and 1M monthly downloads.
AI-written summary · about
chapters (15)
- 0:00Intro
- 0:27Choose what's best for your team
- 1:02An organization of teams and projects and teams and projects
- 1:29Innovation waits for no one
- 2:22Choose one component model
- 3:57Common component model
- 4:31Application architecture
- 5:23Stencil Compiler
- 5:54TypeScript custom transformers
- 6:49Build conditionals and dead code removal
- 7:20Optimizing for minification
- 9:55Component-level graph analysis
- 10:35Native Module Preloading
- 12:39@ionic/angular
- 14:32lonic Angular Universal
related talks
29mStencil: a built-time approach to the web
16mScaling Components Across Multiple Frameworks
26mBuilding StencilJS with TypeScript
28mAngular and Webcomponents
49mCross Framework Components using Custom Elements or Mitosis
06mLightning talk from John Leidegren
52mWeb Components Can Do That?
36mAngular, React, Vue and co: Harmoniously united by web components and micro apps?