Microfrontends: Which Framework to Use?
In the past few years, I have been helping many clients and companies move to Microfrontends. We always start with the famous question, “Which framework to use?”
Well, I have gone through this process so many times and still pause to this question. The challenge is that we get new frameworks every few weeks. In the past, choosing server-side composition was the only available approach. With NPM, we started to have Build-Time Compositions. Recently, with the advances in Webpack, we started to have Run-Time Compositions on the Client. The most famous frameworks for that are Single-SPA and Module Federation. (List of all available frameworks in this article)
If you are new to Microfrontends, I suggest you read the following article:
At Zulily, we have been using a mix between Server-Side and Build-Time composition. Recently, we added Run-Time composition to the mix to be able to break SPA apps to Microfrontends components to have more autonomy and domain ownership. For Client-Run-Time composition, we have two preferred frameworks: Single-SPA and Module Federation. I have talked in detail about both frameworks in previous articles. They are very close but Module Federation will give you more freedom and will convert Microfrontends into components on the same SPA. Of course, there are challenges with both. The biggest challenge for both frameworks is the compatibility with create-react-app (CRA). The following articles will show some ways to get around ejecting CRA:
While both share CRA compatibility issues, Module Federation has a bigger issue. Module Federation Plugin only works with Webpack 5. CRA had a compatibility issue with Webpack 5 (see https://github.com/facebook/create-react-app/issues/9994). However, Module Federation support was added to Create React App (CRA) in version 4.0.0. The release of CRA 4.0.0 in July 2021 introduced the experimental support for Module Federation. You can still use CRACO with the latest Releases of CRA to override the Webpack configuration without ejection.
Here are some articles that might help you get freed from CRA
Which Framework to choose with different React versions
When building micro frontends with different React versions, one framework that can effectively handle this scenario is single-spa. single-spa is a JavaScript framework that enables the integration of multiple micro frontends, regardless of their underlying frameworks or versions.
Here’s why single-spa is a suitable choice:
- Framework Agnostic: single-spa is framework agnostic, meaning it supports various JavaScript frameworks, including React, Angular, Vue.js, and more. This flexibility allows you to have micro frontends built with different React versions alongside other frameworks seamlessly.
- Version Compatibility: single-spa can handle micro frontends with different React versions without conflicts. Each micro frontend can specify its own dependencies, including React and its corresponding version, ensuring that each micro frontend functions correctly within its required React environment.
- Seamless Integration: single-spa provides a well-defined architecture for composing micro frontends into a cohesive application. It allows you to load and render micro frontends independently while managing shared dependencies and communication between them. This facilitates the integration of micro frontends with different React versions into a unified shell or container application.
- Independent Development and Deployment: With single-spa, each micro frontend can be developed and deployed independently. This enables teams to work autonomously, using their preferred React versions, while still seamlessly integrating their micro frontends into the overall application.
- Community and Support: single-spa has a thriving community and active support, ensuring ongoing updates, bug fixes, and enhancements. It provides comprehensive documentation, examples, and tutorials, making it easier to get started and find assistance when needed.
By leveraging single-spa, you can effectively manage micro frontends built with different React versions and seamlessly integrate them into a unified application. This framework allows for independent development, version compatibility, and provides a robust architecture for building scalable micro frontend architectures.
How about new projects?
For new projects, I suggest avoiding CRA. While it saves lots of configuration, it limits you. Learn Webpack and create your own configuration. It is worth it. In this case, Module Federation will be the best choice for Microfrontends. For legacy sites, use Server-side or Build-time composition to include them into your newly created Microfrontend. For more details, read the following articles:
====================
Unified UI/UX Systems
One of the most evolving benefits of Microforntends, especially Module Federation, is to unify the UI/UX for the company. In the following article, I explained in detail how to apply this concept:
=====================
Where to Start?
If you decided to avoid CRA and learn Webpack, the following article will be a good help for you:
