Web Components: Maintaining and Reusing your Frontend

on YouTube ↗41m

" summary

Builds a reusable component called Bella web component and shows how HTML and CSS alone provide accessible, robust behavior by using forms for HTTP requests and aria labels for screen readers then adds optional JavaScript: serialize the form and use fetch to replace table HTML asynchronously and register behavior with custom elements connectedCallback The workflow includes templating (Handlebars/JSX), publishing as a library/npm, CSS Grid for layout, and rules for backward compatibility and team ownership.

AI-written summary · about

" chapters (8)

1. 0:00Start
2. 1:54Spring 2016
3. 5:06What is a web component
4. 10:53How to find web components?
5. 11:49Filter Field Component
6. 15:36Sort Button Component
7. 23:47Cross-functional Team
8. 32:46Table Header Component

" related talks

• 43mWeb Components: Designing Frontends for ReusabilityJoy Heron · Ruby on Ice 2019
• 44mWeb Components An Introduction to the FutureTobias Ljungstrom · NDC Oslo 2021
• 39mWeb components - A whirlwind tourMartin Naumann · Jazoon TechDays Spring 2016 Bern
• 32mLet's talk about Web ComponentsJemima Abu · React Advanced 2021
• 36mBuilding framework agnostic UI with Web ComponentsPiotr Nalepa · 4Developers Katowice 2019
• 41mComponents Approach to Building Web AppsVinci Rufus · Meta Refresh 2015
• 51mBuilding web applications with Web ComponentsMartin Splitt · Voxxed Days Ticino 2017
• 17mEnhance your Functional Web Apps with Web ComponentsBrian LeRoux · CascadiaJS 2022