Microservices are very popular these days, and for a good reason. However, regardless of how accurate an architecture might be, frontend always poses a problem. Imagine you have a small digital store, and you designed your microservices for two main features: product catalog and cart. You can follow the pattern, and different microservices to implement them, but you will eventually end up putting them together in the frontend.
If you design it the usual way, you will likely design one single web app, with your framework or library of choice, and use the services you build. Doing so, however, actually turn your web app into one giant monolithic monster. More importantly, you will never be able to compose your frontend the way you can do with backend microservices.
One way (alternatives exist, check the References) to address this situation is leveraging the usual third-party component integration, i.e. splitting your frontend into several, distinct side projects, each implementing one set of features, and matching the microservices design.
For instance, in our examples, we should build one library for the product catalog and another one for cart. Each will contain UI components, services, etc... bundled together. Then, the actual web app will only reference each library, typically via the router.
As you probably guessed from the title, this demo is done in React, but you can replicate it in Angular as well (I was actually willing to do that, but I stumbed upon a strange issues and had to opt for React).
- Composition is straightforward: just reference each microfrontend library the way you usually work with third-party packages.
- Versioning can be achieved using web app
package.jsonand semVer. - A/B testing: thanks to the previous point, making two building composing different versions of microfrontends is trivial. At that point, we can publish them and apply A/B testing easily.
- This implies some compatibility among the different versions you pick, of course.
- Testability is somewhat simplified, since each library can be developed and tested independently. Additionally, it is possibile to leverage small demo projects to test them end-to-end as well.
This is a basic demo, and not a complete solution to tackle any situation or requirement.
- Multiple Frameworks: so far, it is NOT possibile to mix different frameworks or libraries. The example is done with React, and can be rebuilt with Angular as well, but mixing them is hard.
- Development and release is surely a bit harder, since managing several projects at once can be challenging at first. You need to build a library each time you make changes, and then restart
create-react-app. Releasing also involves a bit of additionaly work, as you need to publish the libraries (typically, on a npm server, possibly private if can't make them public) and then build the web app itself.
git clone https://github.com/unsafecode/react-microfrontends-demo.git
cd cart
npm install
npm run build
npm link
cd ../catalog
npm install
npm run build
npm link
cd ../web
npm install
npm link @unsafecode/react-microfrontends-cart @unsafecode/react-microfrontends-catalog
npm startwebwas build with create-react-app and react-router, with the addition of react-async-component to enable lazy-loading.cartandcatalogare based on nwb
- Building Microfrontends series by Rogério Chaves (@rogeriochaves):