Tools and Practices for Microfrontends

Today, Microfrontends are no longer a proof of concept. If we search on the internet, we can find many case studies of adopting Microfrontends. Besides, most of these web apps are already in production, proving its robustness.

However, it is essential to follow the best practices and choose the right tools to succeed with Microfrontends. Otherwise, Microfrontends could quickly become an overhead for your teams, risking the overall growth of the project.

In this article, I’m going to share some of the best practices around Microfrontends and recommend several tools to establish these practices in your projects.

1. Code Structure and Components

When adopting Microfrontends, one of the critical decisions you have to make is to choose the approach used to structure the code.

The two conventional methods used out there are the Distributedrepo and the Monorepo. Other than these two are hybrid approaches that fall somewhere in between.

In the Distributedrepo approach, the Microfrontends are divided into multiple repositories with their lifecycle managed separately. In the Monorepo, all the Microfrontends will reside in a single repository.

Distributed Repo Approach

The Distributed Repo approach is the more flexible one but it has the great challenge of sharing UI components, to maintain a consistent UI across MFs (which usually means maintaining UI components as NPM libraries, which creates the overhead of maintaining different build pipelines, different repositories, and version mismatches).

One good example of both implementing this Micro Frontends approach and solving the problem of sharing UI components between them, can be seen in Bit.dev .

The Bit.dev marketing website is composed using two groups of React components published and managed by the Bit platform. The two groups were built and delivered separately. The “moment of integration” happens on build time, in a codebase that consumes components from both collections. Whenever a new component version is delivered, a new integration happens.

Hover over different components on Bit’s landing page to see each component’s “scope” or “collection”. Click on the component name (on top) to inspect the component and/or to install it in your project.

As mentioned earlier, the above page is built from components developed in two different codebases, on two different GitHub repositories. Components of each codebase are published to their respective Bit collections.

• base-ui: Github | Collection on Bit
• evangelist: Github | Collection on Bit