Using Lit and Web Components to build Single-Page Applications
summary
Claims that Lit plus Web Components can power full SPAs, backed by demos: a router that updates properties instead of recreating components and supports lazy imports, a small runtime of 5 KB compressed, animation and i18n packages from Lit Labs, a form-builder experiment that reproduces Angular reactive forms in hours, and reusable reactive controllers (mouse, tasks) that wire state and async loading. Performance and interoperability show practical, measurable outcomes rather than vague benefits.
AI-written summary · about
chapters (20)
- 0:00Introduction
- 2:19Today’s topics
- 3:02Web components purpose
- 7:47Lit versus React
- 9:51Simple Lit element
- 10:55Tagged template literals
- 12:19Why choose Lit
- 13:22Reactive controllers
- 15:11Mouse position controller demo
- 16:58Slides with components
- 17:19Lit directives
- 18:44Async directives
- 20:32Angular forms in Lit
- 23:42Lit Labs intro
- 24:24Lit localized for internationalization
- 25:29Motion directives
- 26:10Task controller
- 27:17SPAs with router
- 30:29Lit Labs packages
- 31:58Closing thoughts
related talks
39mWhy Lit is 🔥
46mFuture-proof your Web Apps with Web Components and LitElement
32m"Future-proof your Web Apps with Web Components and Lit"
53mFuture-proof your Web Apps with Web Components and LitElement
02h 32mBuild next gen web apps using web components
20mAvoiding vendor lock-in through Web Components
28mSingle Page Applications - was it a good idea?
23mNot Every App is a SPA