Micro Frontends (MFE) are a new way of structuring web applications that can improve development velocity, enable better team collaboration, and create a more maintainable codebase.
With Micro Frontends, you can break up your web application into smaller pieces that can be developed independently and deployed separately.
This means that you can update your web application without having to redeploy the entire thing!
There are a few different frameworks that can be used for Micro Frontends, but there is no one-size-fits-all solution. Some of the more popular frameworks include:
-
React
-
Angular
-
Vue
-
Web Components
SingleSPA
SingleSPA is different from other frameworks because it is designed specifically for Micro Frontends. Other frameworks, such as Vue.js (Vue 2 or Vue 3), React, and Angular, can be used for Micro Frontends, but they are not explicitly designed for this purpose.
Module Federation
Module Federation is a way of structuring code that can be used to build Micro Frontends.
Module Federation allows different pieces of code to be loaded and executed independently.
This means that each piece of code can be updated and deployed independently. The standard architecture has a container app and multiple micro frontends which share common modules or components.
There are a few different Module Federation plugins that can be used to build Micro Frontends:
Webpack Module Federation Plugin
Webpackis a module bundler that can be used to bundle JavaScript modules. It is a powerful tool for bundling and optimizing JavaScript code. Webpack offers a plugin as part of the Webpack 5 package, so you can use it without extra dependencies. To start using it, add this plugin to webpack.config.js.
Vite Micro Frontend
Vite (Javascript)is a build tool that can be used to develop JavaScript applications. It has rich features like Typescript, JSX and CSS support. It provides a dev server with Hot Module Replacement (HMR) for local development that stays fast regardless of app size. Vite also has its ecosystem with multiple plugins for different front ends.
You can build a Micro frontend with Vite usingtheVite module federation plugin.
Vite uses Rollup as a default bundler. You can find a lot of examples with different front-end frameworks in its repository on GitHub.
Webpack and Vite can be used to build every Micro Frontend Single Page Application (SPA), and you can even use modules built with different bundlers!
Micro frontends Pros and Cons
Micro frontends Pros
-
Modules can be developed and deployed individually.
-
Modules can be tested in isolation.
-
MFE architecture forces you to structure your application and modules(components) better
-
MFE is very handy when you want to support multiple themes across many applications
Micro frontends Cons
-
Increased applications complexity
-
Responsibility for MF applications and modules might not be clear between teams.
-
Harder to perform E2E testing
-
Deployments require knowing your MFEs domains in advance.
-
Be careful about routing (consider using a Universal router)
The main concern about using MFE architecture is that it can make an application more complex. This can make it more challenging to develop and maintain.
However, the benefits of using Micro Frontends can outweigh the risks for many applications.
If you are considering using Micro Frontends for your next web application, be sure to weigh the pros and cons carefully to decide if it is the right choice. I recommend you read an [article about the Pros and Cons of MFE]("Micro frontends pros and cons").
Testing
There are a few different ways to test Micro Frontends applications:
-
Unit testing: This type of testing focuses on testing the individual components of the application.
-
Integration testing: This type of testing focuses on testing how the different components of the application work together.
-
E2E testing: This type focuses on testing the entire application from end to end.
Micro Frontends are a new way of structuring web applications that can improve development velocity, enable better team collaboration, and create a more maintainable codebase. While some risks to consider in building your new UI, the benefits of using Micro Frontends can outweigh the risks for many applications.
If you want to reduce the risks while developing new features, this guide about feature flags can help you.
