Building Better Components - A Journey to a More Resilient Frontend

on YouTube ↗49m

" summary

Shows concrete fixes: replace many booleans with group similar props into unions (string literal types) to avoid defensive checks; extend platform HTML types in TypeScript so components extend native HTML attributes instead of reimplementing name/placeholder/type; expose full event objects not just value to avoid breaking changes; build a shared hook/store (example: usePopoverMenu, inspired by aria-kit) to keep triggers and popovers synced and handle aria IDs and focus, enabling predictable defaults like size=medium, variant=filled.

AI-written summary · about

" chapters (6)

1. 0:00Introduction and goals
2. 5:19Grouping similar props
3. 14:00Consistency in design systems
4. 22:15Leveraging HTML standards
5. 37:33Managing state with stores
6. 46:04Recap and building trust

" related talks

• 51mBuilding Better Components — A Journey to a More Resilient FrontendDaniel Yuschick · NDC Oslo 2025
• 34mSecrets of building robust UI componentsGlenn Reyes · NDC Oslo 2023
• 24mDesigning Components for Fun, Profit and SanityYishu See · JSConf.Asia 2019
• 44mWriting good componentsSiddharth Kshetrapal · ReactFoo 2019
• 56mThe Web, Its Frameworks and Its Standards: Deconstruct to (Re?)ConstructHubert Sablonnière · DevFest Lille 2019
• 36mBuilding framework agnostic UI with Web ComponentsPiotr Nalepa · 4Developers Katowice 2019
• 44mA Practical Guide for Crafting Resilient UI ComponentsGlenn Reyes · Copenhagen Developers Festival 2023
• 23mBuilding Accessible Components: Best Practices and Business Buy-InWayne Jones · Commit Your Code 2025