Angular, React, Vue and Co. – peacefully united thanks to Web Components and Micro Apps

on YouTube ↗40m

" summary

Argument: combine web components and micro front-ends to decompose large enterprise UIs into independently deployable pieces that can use Angular, React, Vue or legacy apps. Implementation details: use custom elements (ES2015 classes), bundle as ES modules, apply shadow DOM for style isolation, use shells, iframes or hyperlinks for composition, and polyfills for older browsers. Demonstration boots an Angular shell that dynamically loads mixed-framework micro apps (including AngularJS), and the decision tree recommends hyperlinks, shell, server composition or monolith based on shared state and isolation needs.

AI-written summary · about

" chapters (8)

1. 0:00Start
2. 2:58Contents
3. 3:29About me...
4. 16:45Deployment Monolith
5. 21:39Composing on Server-Side
6. 22:56Providing a (SPA based) Shell
7. 31:00Some General Advice
8. 35:35Conclusion

" related talks

• 34mWeb Components & Micro Apps: Angular, React & Vue peacefully united?Manfred Steyer · iJS 2018 Spring
• 26mAngular, React, Vue and Co. – Peacefully United Thanks to Web Components and Micro AppsManfred Steyer · JS Kongress 2019
• 34mWeb Components & Micro Apps: Angular, React & Vue peacefully united?Manfred Steyer · iJS 2018
• 36mAngular, React, Vue and co: Harmoniously united by web components and micro apps?Manfred Steyer · Voxxed Days Frontend Bucharest 2019
• 58mWeb components and micro apps, the web technologies peacekeeperYaser Adel Mehraban · NDC Oslo 2019
• 31mMicro frontends and the multiverse of FrameworksAdrian Iskandar Espinosa Caballero · ng-conf 2022
• 54mMicro Frontends with Angular Elements and Web Components — A Perfect Combination?Manuel Stoer · W-JAX 2019
• 46mMicro Frontend: the microservice puzzle extended to frontendaudrey neveu · Voxxed Days Microservices 2019