SPIKE: Micro-frontend Architecture

Owned by Assad zakir
Last updated: Sept 24, 2024
3 min read

 

image-20240923-134820.png

 

Major Categories of Micro-Frontend Integration

1. Run-Time Integration (Client-Side Integration)

Run-time integration happens after the container application has already been loaded in the browser. In this approach, the container application retrieves the MFE code at runtime, typically using techniques like dynamic imports or module federation.

Limitations for Chrome Extensions While run-time integration can be a powerful approach for web applications, it may not be a good fit for Chrome Extensions. Chrome Extensions have tight restrictions on the types of resources they can load at runtime, often limiting them to static files bundled within the extension package. Techniques like Webpack Module Federation, which rely on dynamically loading remote modules, are generally not compatible with the Chrome Extension sandbox model. This makes run-time integration a less viable option for Chrome Extension-based micro-frontend architectures.

https://www.udemy.com/course/microfrontend-course/

2. Build-Time Integration (Compile-Time Integration)

In build-time integration, the micro-frontend (MFE) source code is accessed and integrated before the container application is loaded in the browser. This means the container application has direct access to the MFE source code during the build process.

Example: Publishing MFEs as NPM Packages One common approach for build-time integration is to publish each MFE as a standalone NPM package. The container application can then import and use these packages as dependencies during its own build process. This allows the container to access the MFE code and integrate it directly.

In the case of Chrome Extensions, build-time integration through approaches like NPM package publication would likely be a more suitable and compatible integration strategy.

NPM MFE POC

https://github.com/asadzakir/mfe-package/tree/main

https://www.npmjs.com/package/mfe-utilities


image (1).png

Drawbacks:

  1. Frequent Redeployments: The container application needs to be rebuilt and redeployed every time an NPM package (MFE) is updated. This can lead to more frequent deployments of the entire application, even for small changes in individual MFEs.

  2. Risk of Tight Coupling: There's a temptation to tightly couple the container with the NPM packages. This can undermine the modularity and independence that micro-frontends aim to achieve, potentially leading to a more monolithic architecture over time.

    These drawbacks highlight the importance of carefully managing dependencies and maintaining clear boundaries between MFEs when using build-time integration.