Hands-On Session
Angular-based Micro Frontends with Module Federation
Ever more companies are choosing Micro Frontends. However, they are anything but easy to implement. Fortunately, webpack 5’s Module Federation available since Angular 12 has initiated a crucial change of direction.
In this interactive workshop, you will learn from Manfred Steyer — Angular GDE and Trusted Collaborator in the Angular team — how to plan and implement Micro-Frontend architectures with Angular and Module Federation.
We learn about integrating multiple Micro Frontends into a shell and about sharing libraries. We also work with different approaches for dealing with version mismatches, and dynamic Module Federation. In a further step, we integrate Micro Frontends built with other frameworks like React and different versions of the same framework (“Frankenstein Architectures”).
After the individual exercises, you will have a case study you can use as a template for your projects. By the end, you will be able to evaluate the individual options for your projects.
8<—-
Timetable
– 5 Minutes: Overview
– 5 Minutes: Integrating Micro Frontends in a Shell with Static and Dynamic Federation
– 10 Minutes: Lab
– 5 Minutes: Sharing Libs and Data
– 10 Minutes: Lab
– 5 Minutes: Combining multiple frameworks
– 10 Minutes: Lab
– 5 Minutes: Conclusion and Outlook
To prepare for the workshop, please clone the following repository and install the depenencies:
git clone https://github.com/manfredsteyer/module-federation-plugin-example.git –branch starter
cd module-federation-plugin-example
npm i
Hands-On Session
Angular-based Micro Frontends with Module Federation
Ever more companies are choosing Micro Frontends. However, they are anything but easy to implement. Fortunately, webpack 5’s Module Federation available since Angular 12 has initiated a crucial change of direction.
In this interactive workshop, you will learn from Manfred Steyer — Angular GDE and Trusted Collaborator in the Angular team — how to plan and implement Micro-Frontend architectures with Angular and Module Federation.
We learn about integrating multiple Micro Frontends into a shell and about sharing libraries. We also work with different approaches for dealing with version mismatches, and dynamic Module Federation. In a further step, we integrate Micro Frontends built with other frameworks like React and different versions of the same framework (“Frankenstein Architectures”).
After the individual exercises, you will have a case study you can use as a template for your projects. By the end, you will be able to evaluate the individual options for your projects.
8<—-
Timetable
– 5 Minutes: Overview
– 5 Minutes: Integrating Micro Frontends in a Shell with Static and Dynamic Federation
– 10 Minutes: Lab
– 5 Minutes: Sharing Libs and Data
– 10 Minutes: Lab
– 5 Minutes: Combining multiple frameworks
– 10 Minutes: Lab
– 5 Minutes: Conclusion and Outlook
To prepare for the workshop, please clone the following repository and install the depenencies:
git clone https://github.com/manfredsteyer/module-federation-plugin-example.git –branch starter
cd module-federation-plugin-example
npm i