Make Web Components Great Again with StencilJS

on YouTube ↗20m

" summary

Claims that Stencil is a compiler that outputs standard custom elements and demonstrates concrete tradeoffs: code size and verbosity vs native, plus benchmarked first meaningful paint numbers where Stencil ranks near native. Shows toolchain details — TypeScript decorators, virtual DOM, a dynamic polyfill loader, server rendering and prerendering. Reports that prerendering gives a measurable win, pre-rendering/SSR yields faster first meaningful paint and that Ionic 4 becomes framework-agnostic so its components can be reused across apps.

AI-written summary · about

" chapters (6)

1. 0:00Start
2. 3:31OBSERVING ATTRIBUTES NEEDS TO BE EXPLICIT
3. 4:33PROPERTIES
4. 5:27EVENTS
5. 16:54CODE LENGTH
6. 19:05OVERALL LIGHTHOUSE PERFORMANCE

" related talks

• 10mStencil: the Time for Vanilla Web Components ArrivedGil Fink · You Gotta Love Frontend 2017
• 33mWeb Components with StencilJSMartin Reinhardt, Martin Brecht-Precht · code.talks 2022
• 44mStencil: From Frameworks to CompilersManuel Martinez-Almeida · JSDayES 2018
• 27mUsing Web Components in IonicAdam Bradley, Max Lynch · Polymer Summit 2017
• 26mBuilding StencilJS with TypeScriptJosh Thomas · TSConf 2018
• 29mStencil: a built-time approach to the webManuel Martinez-Almeida · JSConf EU 2019
• 52mWeb Components Can Do That?Vincent Ogloblinsky · DevFest Lille 2019
• 16mScaling Components Across Multiple FrameworksAdam Bradley · React Summit Remote Edition 2021