In the world of making websites, how we build them is constantly getting better. People are talking about a big change from the old way of making websites to a new way called «micro-frontends.» Let’s look at a new approach in this article. We can learn from a research paper called «Micro-Frontends: A Multivocal Literature Review» by Severi Peltonen, Luca Mezzalira, and Davide Taibi.
What Are Micro-Frontends?
Micro-frontends are like building blocks for the front part of a website. Instead of having one big block (monolithic frontend), they are made up of smaller, separate blocks. Different groups can work on and use these small blocks, making it easier to change and grow the website.
Why Transition from Monolithic Frontends to Micro-Frontends?
But there are challenges with micro-frontends too. When the system is divided into smaller parts, it becomes more complex. It’s essential to coordinate everything to make sure everything works together.
Exploring Micro-Frontends with Module Federation
One way to use micro-frontends is by using the Webpack’s Module Federation plugin. This plugin allows JavaScript apps to load code from other projects while running. Developers can unlock the full potential of micro-frontends by using Module Federation with Nx. But if you want to find other options, you can read the 10-article series called The Micro frontend Revolution: Module Federation in Webpack 5 by Angular Architects.
Embarking on the Micro-Frontend Journey with Nx and Module Federation
To begin with micro-frontends, you can use Nx, a strong build framework that organizes your apps. Nx uses a monorepo architecture, which makes it easy to handle many micro-frontends in one codebase. When you use Nx and the Module Federation plugin together, your micro-frontends can collaborate and share functions. This creates a cohesive user experience across different sections of your website.
The Angular Use Case
We want to make it clear that our knowledge goes up until September 2021. At that time, Angular was not yet at version 16. Angular may have changed a lot since then. So, We are not able to provide information about What’s new in Angular 16 or its features.
First we need to generate a new nx workspace:
We need to start adding our projects. In this example, We will add one host and two remotes, which we will name ‘main’ (for the host), ‘dashboard,’ and ‘settings.’ To begin, let’s add the main app with this command:
Now we will add the remotes with this command:
We should end up with a folder structure like this:
The Mono Repo Approach
Teams need to decide on a particular version of dependencies, such as Angular. They should also establish a shared update schedule for these dependencies. This helps avoid version conflicts and keeps bundle sizes in check, even though it means we have to give up some flexibility.
Before we run our app, we can make it look better by adding a library of components for Tailwind CSS. We’ll go with daysi UI, which provides a set of ready-to-use UI components. Once the library is set up, we’ll make a small change in our main app’s app.component.html file.
Now, continuing with the example, you can run the host application using the command nx serve main. To start the main application and the other two apps, use this command. It will create the full application. You should see a result like this:
If you click on the menus, you will notice the page changing:
As we observe, the page behaves as it should for the user, and we hardly notice any difference. However, under the hood, there’s a lot happening. The home, dashboard, and settings are independent apps running in parallel. You can run the remotes using this command:
nx serve dashboard and nx serve settings
If you’d like to explore it further, feel free to check out this repository MF Angular Example.
Conclusion
As we wrap up our look into micro-frontends, we recognize how important this approach is in shaping the future of web development. It paves the way for creating modular, easy-to-maintain, and scalable applications.
