Create Architecture and not Frameworks

on YouTube ↗36m

" summary

A concrete recipe: a small manifest lists JS and CSS files, the host app lazy-appends them to head and uses a react-module-container to instantiate by a global ID from a module registry, then calls angular.bootstrap (or equivalent) to mount the legacy app into a React DOM node. Lifecycle hooks forward updates (call Angular digest) and teardown destroys scopes. Result: independent, lazily loaded modules, legacy Angular or React left unchanged, independently deployable and updated by swapping manifests rather than rebuilding the host.

AI-written summary · about

" chapters (8)

1. 0:00Introduction
2. 1:51Legacy frameworks and iframes
3. 6:10Ideal architecture for large apps
4. 13:50Demo: Angular in React
5. 21:35react-module-container library
6. 28:43Isolated lazy-loaded modules
7. 30:51Library code deep dive
8. 34:09Where this architecture helps

" related talks

• 20mArchitectures for huge Angular based Enterprise Applications...Manfred Steyer · NG Poland 2018
• 39mSustainable Client Architectures with Micro AppsManfred Steyer · FrontEnd Con 2018
• 31mArchitectures for huge Angular based enterprise applications npm Packages, Monorepos and Micro AppsManfred Steyer · Angular Connect 2018
• 32mLightweight Architectures with Angular's Latest InnovationsManfred Steyer · NG-BE 2023
• 35mArchitectures for Huge Angular Based Enterprise ApplicationsManfred Steyer · AngularNL 2019
• 21mAngular based Micro frontends with module federationManfred Steyer · ng-conf 2022
• 40mAngular, React, Vue and Co. – peacefully united thanks to Web Components and Micro AppsManfred Steyer · Voxxed Days Ticino 2019
• 30mFederated Angular: Micro Frontends with Module FederationManfred Steyer · JSWorld Conference 2021