Angular micro-frontend architecture. Part 1/3 — The concept of micro-frontend architecture.
Hello everyone! 👋
In this series of posts I will try to show with a real example how you can use the micro-frontend architecture (hereinafter abbreviated as MFE) in an Angular application. For implementation, we need libraries ngx-mfe, which depends on @angular-architects/module-federation.
If you find an error, please leave a note or leave a comment.
This is post 1 of 3 in the series “Angular micro-frontend architecture”
- The concept of micro-frontend architecture.
- Installing the Nx monorepo and creating micro-frontend apps.
- MFE plugin-based approach. How to load micro-frontend component(s) inside HTML template?
Preface
Today, no one framework (React, Angular or Vue) can offer support for the micro-frontend architecture out of the box.
Therefore, in order to use micro-frontends, you will have to deal with Webpack 5, in particular, with the ModuleFederationPlugin and understand how the browser loads the js bundle.
If you are already familiar with the micro-frontend concept, then feel free to skip this part and go to the next part of this series.
Why Webpack 5 and what is ModuleFederationPlugin
“The
ModuleFederationPluginallows a build to provide or consume modules with other independent builds at runtime.”Official definition from webpack.js.org
This means that we can compile our micro-frontend applications into separate builds and load them on demand at runtime.
This gives us ability to developed and deployed each MFE individually.
The ModuleFederationPlugin allows an approach called “Module Federation” for referencing program parts that are not yet known at compile time. These can be separately compiled micro-frontends. In addition, the individual program parts can share libraries with each other, so that the individual bundles do not contain any duplicates.
More about ModuleFederationPlugin here, in official documentation.
Ok, but what about Webpack 5? — Everything is pretty simple, The ModuleFederationPlugin integrated in Webpack beginning with version 5.
For now, this is all you need to know about Webpack 5 and the ModuleFederationPlugin. Further, in the following parts, we will get to know the ModuleFederationPlugin in more detail and learn how to configure it.
Concept of Module Federation
First, let’s deal with local and remote modules in terms of Module Federation.
- Local modules / Host are normal modules which are part of the current build.
- Remote modules are modules that are not part of the current build and loaded from a so-called container at the runtime.
Loading remote modules is an asynchronous operation. It’s not possible to use a remote module without a chunk loading operation.
Each build acts as a container and also consumes other builds as containers. This way each build is able to access any other exposed module by loading it from its container.
Shared modules are modules that are both overridable and provided as overrides to nested container. They usually point to the same module in each build, this mechanism uses to share libraries between independent apps, be it Host or Remote app.
Example
The following are examples of Host and Remote applications.
Host :
The example below shows a shell application that is running locally on localhost:4200. This shell application loads another MFE application that displays a form for the delivery address.
Remote :
The screenshot below shows that the address form application is builds and serve independently from the Host app. Running on localhost: 4201.
Conclusion
With the advent of Webpack 5 and the ModuleFederationPlugin, we have the opportunity to use the micro-frontends architecture. Finally, separately compiled and provided program parts can be loaded.
The key features of Micro-frontend architecture and Module Federation is that you can use different frameworks (React, Angular and Vue) for different Micro-frontend applications, as well as build and deploy independent Micro-frontend applications.
Since there is no ready-made solution out of the box, development teams that decide to use the micro-frontend architecture must manually ensure that the individual parts interact. Importantly, you must define and enforce contracts between individual micro-frontends.
If this article was helpful to you, clap 👏 , thanks!
References and Further Reading
- Module Federation:
https://webpack.js.org/concepts/module-federation - ModuleFederationPlugin doc:
https://webpack.js.org/plugins/module-federation-plugin/ - Module Federation — Federated Application Architectures:
https://rangle.io/blog/module-federation-federated-application-architectures/
