Modernizing Large Frontends with Web Components

on YouTube ↗56m

" summary

Web Components act as an incremental migration path: write Angular components, turn them into Angular Elements with createCustomElement and customElements.define, bundle via Angular CLI (use ngx-build-plus to produce a single bundle), inject polyfills and the script into the AngularJS index.html, and replace leaf components one by one. Shared state uses vanilla JS singletons wrapped for Angular and AngularJS; watch polyfills, change‑detection coupling, and routing. This approach suits very large, high‑complexity apps and avoids a full rewrite.

AI-written summary · about

" chapters (38)

1. 0:00Intro
2. 2:49Choosing the right path is critical.
3. 5:08Modern Frontends
4. 5:48Single Page Applications (SPAs)
5. 6:25DOM Manipulation
6. 9:35What are Web Components?
7. 10:03Use Cases
8. 10:15Micro Frontends
9. 10:56Shared Components
10. 12:52Anatomy of a Custom Element
11. 13:12Selector String
12. 13:24JavaScript Class
13. 13:38Options Object
14. 14:55Bells & Whistles
15. 15:19Lifecycle Methods
16. 16:55HTML Templates
17. 17:38It's complicated...
18. 18:33Custom Element Libraries
19. 20:26Stencil
20. 22:07Modernization
21. 25:35Why Angular Elements?
22. 28:30Tightly Coupled
23. 28:42Dependency Injection
24. 31:48The Elements Upgrade Strategy
25. 32:04Set Up Bottom-up components Create vanilla j5 services with wrappers Convert routing and remove Elements
26. 33:03Setting Up Angular Elements
27. 35:51Add Angular Elements
28. 38:39Upgrading Components
29. 41:14AngularJS 1.7+ Helpers
30. 41:28ng-custom-element
31. 46:22Tip: Group into Modules
32. 46:38Sharing Data with Services
33. 47:13Off-Roading with JS
34. 47:31Wrap Shared JS Services
35. 49:53Inputs & Outputs
36. 51:39Wrapping Up the Upgrade
37. 52:10Switch Routing
38. 52:27Drop Elements

" related talks

• 54mMicro Frontends with Angular Elements and Web Components — A Perfect Combination?Manuel Stoer · W-JAX 2019
• 19mWeb Components with Angular Elements: Beyond the BasicsManfred Steyer · ng-conf 2019
• 40mAngular, React, Vue and Co. – peacefully united thanks to Web Components and Micro AppsManfred Steyer · Voxxed Days Ticino 2019
• 28mAngular and WebcomponentsAna Cidre, Sherry List · Frontend Developer Love 2019
• 25mI'm with Web Components and Web Components Are with MeGil Fink · AngularUP 2019
• 25mWeb components with Angular: The what, the why and the how.Ana Cidre · ngAtlanta 2019
• 34mWeb Components & Micro Apps: Angular, React & Vue peacefully united?Manfred Steyer · iJS 2018
• 05mMigrating a Portfolio of Front-End Apps to AngularCraig Shipton, Mike Smith · AngularConnect 2017