.png?w=3840&q=75)
.webp?w=3840&q=75)
.webp?w=3840&q=75)
Most apps that start from a few functionalities often grow into a complex monolith, which becomes difficult to scale and maintain over time. Moreover, integrating a new team into such apps can be challenging.
So, what we need is a simple approach to split the complex monolith into small pieces of app, let's call it app services. Breaking your app into small individual services assures scalability, maintainability, and high app quality.
The Micro frontend is a trending architectural pattern that can help you to solve the challenges of modern frontend app development. So that you can build feature-rich, powerful browser-based/web-based applications efficiently and effectively.
Let’s explore more about the micro frontend architecture, why should developers implement it, what are its major benefits, how it works and its basic implementation.
The micro frontend is inspired by microservices used on the server-side. The basic idea is to break the monolithic codebase into smaller chunks, allowing better work distribution among different software development teams.
Just take a simple example of an invoice web application that generates a receipt, modifies invoices, classifies expenses under different categories, sends friendly payment reminders, and a lot more. All these things can be contained on the app front.
However, as your application grows you may want to support more functionalities such as invoice reporting and analytics where each report may contain multiple pages of its own.
In such a situation it's always better to have a separate front-end to avoid code complexity and that is where Micro Frontend architecture comes into play.
So here is your answer.
The Micro Frontend architecture solves the most common problems faced by the app developer while developing a browser-based application,
Now let's dive into details, what are the benefits of Micro Frontend architecture.
Every developer has different skills and work experience. Micro frontend architecture helps you to split the team into multiple teams, allowing everyone to express their skills and expertise, which leads to style and code isolation making each team independent of the other.
In fact, every team is free to use the technology they love to work with. It eliminates the technology restriction that encourages developers to write better code.
Micro Frontend allows different teams to build independent pieces of application code. It is obvious that they have full freedom to choose the tech stack of their choice. In this way, they can easily opt for the latest technologies and tools.
Also, the developers can smoothly make a shift to the new technology as each chuck of app code in Micro Frontend architecture is naturally smaller than the entire Monolith application.
Changing dependency in the monolithic app can only be done when the rest of the app is supporting that dependency. That's the reason introducing any breaking changes can be too costly. It also consumes lots of development and testing time.
With the Micro Frontend approach, it's super easy to update any changes in the app even without affecting the rest of the app code.
The architecture divides the app into small pieces of code that eventually speeds up the development process. The reason is that Micro Frontend architecture eliminates the need for communication among different development teams as the pieces of code can be built in complete isolation irrespective of their implementation.
Moreover, building and deploying small applications (code chunks) and assembling them in the parent app is simpler than building a complete monolith application at once.
It is beneficial especially when you are releasing new features or announcing bug fixes every week or every month at a regular interval.
Any application becomes hard to maintain as it grows over time and it is very common in the case of Monolithic apps. The Micro Frontend approach breaks the large application into small code chunks or we can say small app functionalities that are easy for testing and making bug fixes. As a result, it speeds up the entire process of quality assurance, debugging, and maintenance.
The application created using Micro Frontend looks similar to the regular application. But behind the scenes, each Micro Frontend has its own codebase, backend data resources, and pipeline.
The container application glues all the service apps and represents them as a single application. The container application can detect and understand what needs to be shown to the user and what needs to be composed and built.
Here are three different approaches that can be used to compose and build the application.
In this approach, all the micro Frontend apps are composed and built during the build process. Here, the container application acts like Monolith and microservices are just underlying dependencies. However, with this approach, the possibility of independent deployment of each microservice gets completely lost.
With the server-side, the container app will not auto-contain all the micro frontends, they will be lazy-loaded. The reason is the micro frontends will not be downloaded by the user's browser whenever the user requests the app entry point. It will be downloaded only if the specific route or view is reached by the user in the main app.
In the Edge side approach, the views are assembled at the CDN level. Most of the CDN providers provide you with the Edge Side Include (ESI) option that is used to assemble the content at the edge layer.
Micro-frontends are essentially independent, deployable units of a web application, each responsible for a specific feature or business capability. Let’s understand in detail about implementing Micro-Frontend Architecture.
While it's feasible to implement micro-frontends without a framework, leveraging a dedicated tool can streamline the process. Popular options include:
1. Single-SPA: Provides a robust foundation for managing multiple frameworks and applications within a single page application.
2. Webpack Module Federation: A more recent approach leveraging Webpack 5's capabilities for dynamic module federation.
3. Custom Frameworks: For highly tailored requirements, building a custom framework might be necessary.
Let's explore a concrete example using Single-SPA.
1. Project Setup: a. Create a shell application (main application):
1npx create-react-app shell
b. Create micro-frontend applications (e.g., 'product', 'cart'):
1npx create-react-app product 2npx create-react-app cart
2. Configure Micro-Frontends for Single-SPA: In each micro-frontend: a. Install Single-SPA:
1npm install single-spa
b. Create a remoteEntry.js file to expose the application:
1import * as singleSpa from 'single-spa'; 2const appName = 'product'; // Replace with your micro-frontend name 3singleSpa.registerApplication( 4 appName, 5 () => import('./root.component'), // Replace with your root component 6 () => location.pathname.startsWith('/product') 7); 8
3. Register Micro-Frontends in Shell Application: In the shell application, import and register the micro-frontends:
1import * as singleSpa from 'single-spa'; 2singleSpa.registerApplication( 3 'product', 4 () => import('./product/remoteEntry.js'), 5 () => location.pathname.startsWith('/product') 6); 7singleSpa.start(); 8
4. Routing and Navigation:
5. Communication Between Micro-Frontends:
6. Styling and Design Consistency:
7. Deployment:
project
├── shell
│ ├── package.json
│ ├── src
│ │ ├── index.js
│ │ └── App.js
│ └── public
│ └── index.html
├── product
│ ├── package.json
│ ├── src
│ │ ├── index.js
│ │ └── App.js
│ └── public
│ └── index.html
├── cart
│ ├── package.json
│ ├── src
│ │ ├── index.js
│ │ └── App.js
│ └── public
│ └── index.html
└── ...
By carefully considering these factors and following best practices, you can successfully implement micro-frontend architecture in your React applications, reaping the benefits of improved scalability, maintainability, and developer productivity.
In this article, we have learned about the concept of Micro Frontend, why developers should implement this architecture, its benefits, and how it works. Now you know how Micro Frontend makes the large project better manageable by splitting the Monolithic application into micro apps thus facilitating code isolation and independent development.
The pattern is widely used in large applications for web-frontend development. Hope you find the information useful.
Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!
You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.
