Embrace Component Tranquility

on YouTube ↗18m

" summary

Identifies concrete costs of componentization—three named taxes: payload tax, execution tax and container element tax—and a fourth for compositions, the tree coupling tax. Uses Angular (Angular 2→4), compiler behavior, services, observables, Redux-style store and OnPush change detection, plus attribute selectors to avoid extra wrapper elements. Builds a sample list+map tool with a shared Avatar coin global component in a shared NgModule, and shows these choices reduce payload and coupling while keeping views in sync.

AI-written summary · about

" chapters (6)

1. 0:00Introduction
2. 2:02The Web Dev Game is Changing
3. 6:00The Execution Tax
4. 7:25The Container Element Tax
5. 10:56The Tree Coupling Tax
6. 15:15Finding Harmony

" related talks

• 27mThe good, the bad and the ugly - Component architecture at scaleAna Cidre, Sherry List · Angular Connect 2018
• 20mEngineering Scalable Angular ComponentsAlex Rickabaugh · EnterpriseNG 2021
• 28mAngular and WebcomponentsAna Cidre, Sherry List · Frontend Developer Love 2019
• 26m3L-C's- Three Level Components TechniqueAziz Yazit · Reliable Web Summit 2021
• 24mThe Architecture of ComponentsErin Coughlan · AngularConnect 2019
• 31mAngular IVY with Composition API: the next level of reusabilityDmitriy Shekhovtsov · AngularUP Experience 2020
• 01h 18mA Deep Look At Angular ElementsManfred Steyer · ng-conf 2019
• 32mLightweight Architectures with Angular's Latest InnovationsManfred Steyer · NG-BE 2023