Components Approach to Building Web Apps

on YouTube ↗41m

" summary

Claims that building apps as reusable components cuts front/backend friction and maintenance and shows how web components (custom elements + HTML Imports + templates + Shadow DOM) work in practice using Google Polymer and alternatives. Demonstrations build a responsive product list and detail UI that mostly works but exposes Shadow DOM CSS limits, polyfill costs (notably webcomponents.js 100KB vs webcomponents-lite 28KB), and the need to bundle with tools like vulcanize/waniz to avoid hundreds of HTTP requests.

AI-written summary · about

" chapters (9)

1. 0:00Web components intro
2. 3:07Page-based design problems
3. 7:20Core technologies
4. 12:16Custom elements demo
5. 17:27Browser support & polyfills
6. 20:15Atomic design for components
7. 23:25Full app challenges
8. 27:17Performance optimization
9. 29:24Future & getting started

" related talks

• 19mWeb ComponentsJeff Tapper · FITC Web Unleashed 2014
• 36mWeb components - A whirlwind tour thru the future of the webMartin Naumann · FutureJS 2014
• 51mBuilding web applications with Web ComponentsMartin Splitt · Voxxed Days Ticino 2017
• 59mIntroduction to Web ComponentsHoracio Gonzalez · DevFest Nantes 2014
• 20mAvoiding vendor lock-in through Web ComponentsMatias Huhta · React Finland 2022
• 58mWeb components and micro apps, the web technologies peacekeeperYaser Adel Mehraban · NDC Oslo 2019
• 28mPolymer and Web ComponentsTaylor Savage · Google Developer Days India 2017
• 34mWeb Components & Micro Apps: Angular, React & Vue peacefully united?Manfred Steyer · iJS 2018