Angular micro-frontend architecture. Part 1/3 — The concept of micro-frontend architecture.

This is post 1 of 3 in the series “Angular micro-frontend architecture”

  1. The concept of micro-frontend architecture.
  2. Installing the Nx monorepo and creating micro-frontend apps.
  3. 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.

Why Webpack 5 and what is ModuleFederationPlugin

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.

Concept of Host and Remote apps in terms of Module Federation

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.

Example

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.

Shell app with address-form MFE (Host)

Remote :

The screenshot below shows that the address form application is builds and serve independently from the Host app. Running on localhost: 4201.

Address-form MFE (Remote)

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

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Denis Khrunov

Denis Khrunov

41 Followers

I’m a Front-end Typescript Developer from Russia. I am engaged in front-end development, the main stack of Angular 2+ and in my free time I keep learning.