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:

Micro-Frontends: What, why, and how

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 has a compatibility issue with Webpack 5 and is still in the alpha phase with lots of failures and hacks to get it working (see https://github.com/facebook/create-react-app/issues/9994). While Module Federation is very tempting to use, it is also risky at this stage. If we are thinking about the future, we might take the risk since it will, eventually, get solved. However, most companies will not take this risk for newer projects. So many hacks and solving of errors to get it working.

Therefore, as the date of this article Aug 2021, Single-SPA is the preferred choice, if your team depends on CRA. However, if you are an expert with Webpack and can configure sites independent of CRA, Module Federation will be the best choice. However, most developers depend on CRA. If you depend on CRA, Single-SPA is still risky but more stable with fewer errors.

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, join the following discussion:

Don’t use create-react-app: How you can set up your own reactjs boilerplate.

Where to Start?

If you decided to avoid CRA and learn Webpack, the following article will be a good help for you:

Micro-Frontends From the Begining to Expert

Microfrontends: Which Framework to Use? was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.


This content originally appeared on Level Up Coding - Medium and was authored by Rany ElHousieny

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:

Micro-Frontends: What, why, and how

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 has a compatibility issue with Webpack 5 and is still in the alpha phase with lots of failures and hacks to get it working (see https://github.com/facebook/create-react-app/issues/9994). While Module Federation is very tempting to use, it is also risky at this stage. If we are thinking about the future, we might take the risk since it will, eventually, get solved. However, most companies will not take this risk for newer projects. So many hacks and solving of errors to get it working.

Therefore, as the date of this article Aug 2021, Single-SPA is the preferred choice, if your team depends on CRA. However, if you are an expert with Webpack and can configure sites independent of CRA, Module Federation will be the best choice. However, most developers depend on CRA. If you depend on CRA, Single-SPA is still risky but more stable with fewer errors.

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, join the following discussion:

Don't use create-react-app: How you can set up your own reactjs boilerplate.

Where to Start?

If you decided to avoid CRA and learn Webpack, the following article will be a good help for you:

Micro-Frontends From the Begining to Expert

Microfrontends: Which Framework to Use? was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.


This content originally appeared on Level Up Coding - Medium and was authored by Rany ElHousieny


Print Share Comment Cite Upload Translate Updates
APA

Rany ElHousieny | Sciencx (2021-08-26T13:36:38+00:00) Microfrontends: Which Framework to Use?. Retrieved from https://www.scien.cx/2021/08/26/microfrontends-which-framework-to-use/

MLA
" » Microfrontends: Which Framework to Use?." Rany ElHousieny | Sciencx - Thursday August 26, 2021, https://www.scien.cx/2021/08/26/microfrontends-which-framework-to-use/
HARVARD
Rany ElHousieny | Sciencx Thursday August 26, 2021 » Microfrontends: Which Framework to Use?., viewed ,<https://www.scien.cx/2021/08/26/microfrontends-which-framework-to-use/>
VANCOUVER
Rany ElHousieny | Sciencx - » Microfrontends: Which Framework to Use?. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/08/26/microfrontends-which-framework-to-use/
CHICAGO
" » Microfrontends: Which Framework to Use?." Rany ElHousieny | Sciencx - Accessed . https://www.scien.cx/2021/08/26/microfrontends-which-framework-to-use/
IEEE
" » Microfrontends: Which Framework to Use?." Rany ElHousieny | Sciencx [Online]. Available: https://www.scien.cx/2021/08/26/microfrontends-which-framework-to-use/. [Accessed: ]
rf:citation
» Microfrontends: Which Framework to Use? | Rany ElHousieny | Sciencx | https://www.scien.cx/2021/08/26/microfrontends-which-framework-to-use/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts