Sharing components Micro Frontends

Sharing components like common buttons and input fields between microservices can be achieved through several strategies. Here are some effective approaches:

𝟭. 𝗖𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁 𝗟𝗶𝗯𝗿𝗮𝗿𝗶𝗲𝘀
Create a shared component library that includes all the reusable components (e.g., buttons, input fields). This library can be published as a package to a package registry (e.g., npm) and then imported into each microservice.

. 𝙎𝙩𝙚𝙥𝙨:
     1. Create a separate repository for the component library.
     2. Develop and test the components.
     3. Publish the library to a package registry.
     4. Install the library in each microservice project.
.𝘼𝙙𝙫𝙖𝙣𝙩𝙖𝙜𝙚𝙨:
     - Centralized management of components.
     - Easy updates and versioning.
.𝗗𝗶𝘀𝗮𝗱𝘃𝗮𝗻𝘁𝗮𝗴𝗲𝘀:
     - Requires proper version management.
     - All microservices need to be updated to use the latest version.

𝟮. 𝗠𝗼𝗻𝗼𝗿𝗲𝗽𝗼 𝘄𝗶𝘁𝗵 𝗧𝗼𝗼𝗹𝘀 𝗹𝗶𝗸𝗲 𝗡𝘅 𝗼𝗿 𝗟𝗲𝗿𝗻𝗮
Use a monorepo setup with tools like Nx or Lerna to manage multiple projects in a single repository. This approach allows you to share code and dependencies easily between microservices.

. 𝙎𝙩𝙚𝙥𝙨:
     1. Set up a monorepo with Nx or Lerna.
     2. Create shared component libraries within the monorepo.
     3. Import and use the shared components in each microservice.
.𝘼𝙙𝙫𝙖𝙣𝙩𝙖𝙜𝙚𝙨:
     - Simplifies code sharing and dependency management.
     - Easier refactoring and consistency across microservices.
.𝗗𝗶𝘀𝗮𝗱𝘃𝗮𝗻𝘁𝗮𝗴𝗲𝘀:
     - Monorepo can become complex to manage as it grows.
     - Requires a robust CI/CD pipeline.

𝟯. 𝗦𝗵𝗮𝗿𝗲𝗱 𝗚𝗶𝘁 𝗦𝘂𝗯𝗺𝗼𝗱𝘂𝗹𝗲
Use Git submodules to include a shared repository (containing the common components) within each microservice repository.

. 𝙎𝙩𝙚𝙥𝙨:
     1. Create a repository for shared components.
     2. Add the shared repository as a submodule to each microservice repository.
     3. Use the shared components in the microservices.
.𝘼𝙙𝙫𝙖𝙣𝙩𝙖𝙜𝙚𝙨:
     - Directly integrates with Git.
     - Updates in the shared repository can be pulled into each microservice.
.𝗗𝗶𝘀𝗮𝗱𝘃𝗮𝗻𝘁𝗮𝗴𝗲𝘀:
     - Managing submodule updates can be cumbersome.
     - Not as seamless as using a package registry.

𝟰. 𝗠𝗶𝗰𝗿𝗼 𝗙𝗿𝗼𝗻𝘁𝗲𝗻𝗱𝘀
In a micro-frontend architecture, each microservice can expose its components which can be used by other microservices through a shared component service or by importing them dynamically.

. 𝙎𝙩𝙚𝙥𝙨:
     1. Create a micro-frontend architecture where each microservice can publish its UI components.
     2. Use module federation (e.g., Webpack 5 Module Federation) to dynamically import components.
.𝘼𝙙𝙫𝙖𝙣𝙩𝙖𝙜𝙚𝙨:
     - Promotes independent deployment.
     - Components can be updated independently.
.𝗗𝗶𝘀𝗮𝗱𝘃𝗮𝗻𝘁𝗮𝗴𝗲𝘀:
     - Requires a more complex setup and configuration.
     - Potential for increased latency and load times.

𝗘𝘅𝗮𝗺𝗽𝗹𝗲 𝘄𝗶𝘁𝗵 𝗮 𝗖𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁 𝗟𝗶𝗯𝗿𝗮𝗿𝘆 (𝗻𝗽𝗺)
Here's an example workflow using a component library published to npm:
𝟭. 𝗖𝗿𝗲𝗮𝘁𝗲 𝘁𝗵𝗲 𝗖𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁 𝗟𝗶𝗯𝗿𝗮𝗿𝘆:

𝟮. 𝗗𝗲𝘃𝗲𝗹𝗼𝗽 𝗖𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁𝘀:
Create reusable components like Button and Input in the library:

𝟯. 𝗣𝘂𝗯𝗹𝗶𝘀𝗵 𝘁𝗼 𝗻𝗽𝗺:

𝟰. 𝗨𝘀𝗲 𝗶𝗻 𝗠𝗶𝗰𝗿𝗼𝘀𝗲𝗿𝘃𝗶𝗰𝗲𝘀:
Install the library in each microservice:

Import and use the components in a microservice:

By following this approach, you can maintain a centralized library of reusable components and easily share them across your microservices, ensuring consistency and reducing duplication.

Comments

[José Pablo Ramírez Vargas]

The main 2 disadvantages of a shared NPM library are that you need a private NPM repository, and that your MFE's must all be of the same framework. The beauty of MFE's is framework independence, IMHO.