Web Components as micro apps
summary
Web Components function as portable micro‑apps: the demos show concrete code for custom elements with observed attributes (props down) and custom events (events up), conversion of a PHP/MySQL WordPress site into independent components that interoperate, and a working offline PWA using the Cache API, IndexedDB and a service worker; authentication returns a JWT and lazy loading uses IntersectionObserver to cut initial JS. Examples use vanilla JS and the Stencil compiler; adoption notes: ~5% of pages and Google/Ionic ecosystems with 20,000+ components.
AI-written summary · about
chapters (20)
- 0:00Start
- 0:48Web Components as Micro Apps
- 1:39What Is a Web Component
- 9:18Custom Ui Component
- 10:23Communication
- 11:21Javascript Custom Events
- 14:51Encapsulation
- 16:07Google Accelerated Mobile Pages
- 16:55Lightning Web Components
- 17:24What Types of Web Components
- 18:18References
- 20:05Can We Create Web Components Using Webassembly
- 21:32Features of Web Components
- 25:54Example of Props
- 26:16State Rendered on Change
- 30:54Demo
- 32:53Lazy Loading
- 40:35When Is an App a Micro App
- 40:53Converting Frameworks to Web Components
- 45:34Deployment
related talks
58mWeb components and micro apps, the web technologies peacekeeper
36mWeb components - A whirlwind tour thru the future of the web
51mBuilding web applications with Web Components
41mComponents Approach to Building Web Apps
51mGoing Web Native
44mWeb Components An Introduction to the Future
47mnative-like PWAs in Web Components live-code
28mThe (Real) State of Web Components