Microfrontends Demo with React

Motivation

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.

Solution

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).

Advantages and limitations

Advantages

• 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.json and 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.

Limitations

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.

Usage

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 start

Technical details

• web was build with create-react-app and react-router, with the addition of react-async-component to enable lazy-loading.
• cart and catalog are based on nwb

References and other projects

• Building Microfrontends series by Rogério Chaves (@rogeriochaves):
  • Part 1 - Creating Small Apps
  • Part 2 - Joining Apps Together
  • Part 3 - Public Path Problem and Routing
  • Part 4 - Using CDNs + Tech Radar for consensus
  • Part 5 - Communication Between Apps