Micro frontends with React.js
Let’s figure out how we can set up Micro Frontends Architecture using React.js and Webpack 5
With the success and agility have proven by Microservices architecture, the need and power of breaking up the monolithic apps into building blocks of functionality or services have been the new normal.
Problem:
Imagine you are running a company and you build a lot of apps and projects within your company. We already know that there are a lot of components we might want to use in our company applications that are common in all our apps.
Of course, with react components, we improve reusability by separating the logic into a single component and using it all over the application.
What? What if we had to use such reusability of components throughout the company. One way to do it is by creating a separate library and let all the company teams use that library. But one problem we might still arise is who is gonna take ownership of the components, enhancement of features of any component, and bundle sizes.
Solution:
Introducing the next new normal to you, The Micro Frontends.
Imagine we being able to host all of our components in a host which shares all the common components to all the applications in a company. Your react app might not have any components within itself and can just use the components hosted on the shared host.
- Any React Component a team needs can simply be browsed in the host and can be simply be imported by just the URL.
- Any React Components that are created newly can be hosted into the host, and from the shared environment, your react app uses it and also allow other teams to use it.
- If any new team needs any enhancements, they can simply enhance the functionality and props and update it to make it even more customizable.
- Instead of re-inventing the wheel, multiple teams can now focus more on improvement than creating the same component again and again.
Example:
Consider you have Microfrontend host, “micro-frontends-host”.
You have two front-end react apps in your company, “frontend-one” and “frontend-two”.
You want to use a button component called “FancyButton” in both are multiple other apps.
Instead of creating the same “FancyButton” in both the apps “frontend-one” and “frontend-two”, you can create a single “FancyButton” component and host it in host — “micro-frontends-host”.
And just import the “FancyButton” component in the frontend apps using the URL.
You see how better the architecture is if you realize that right now there are no components in “frontend-one” and “frontend-two” apps and are just using the components hosted in “micro-frontends-host”.
Here is a sample starter project you can try out.
I will be publishing another article with an explanation of how to implement the micro frontends architecture by code.
If you are curious already, you can find the code at https://github.com/sarat9/microfrontends
Have fun coding…
