The next big thing in (client side) templating
summary
Claims that combining ES6 template literals with the template element yields a templating layer that caches static parts by identity, updates only expression parts (scaling with expressions not nodes), and ships tiny runtime code — cites lit-html at ~2 KB and a custom 1KB router demo. Shows concrete tools: template tag functions, property/event binding syntax, directives (e.g. until), and web components with shadow DOM; builds a working riders list with per-item components and event bubbling to prove it actually runs.
AI-written summary · about
chapters (20)
- 0:00Start
- 3:36What Is Templating for the Web Look like
- 4:44Imperative Dom Creation
- 10:28Job of the Templating System
- 11:48Template Element
- 13:15Template Literals
- 14:05Embed Expressions
- 20:00Lead Html
- 22:00Text Content
- 22:47Property Binding
- 23:27Syntax for Event Handling
- 24:15Dom Nodes
- 24:56Directives
- 26:57Updating the Dom
- 30:11Web Components
- 30:41Shadow Dom
- 31:19Custom Element
- 34:51Property Decorator
- 39:26Single Rider Component
- 44:05Closing Thoughts
related talks
17mEfficient, Expressive, and Extensible HTML Templates
39mWhy Lit is 🔥
29mHTMLBars: The Next-Generation of Templating in Ember.js
34mTemplating - you're doing it wrong
37mUsing Lit and Web Components to build Single-Page Applications
27mThe future of frontend tooling
29mWhen to Use Web Components
46mFuture-proof your Web Apps with Web Components and LitElement