Microfrontends: the basics

Understanding build-time integration

There is a container what decides when/where to show each Microfrontend. For example there is a Container component wich decides where and when to show ProductList MFE and Cart MFE.

There are many solution to integration, each have pros and cons. No single solution perfect for every project. Look at what your requirements are, then pick a solution.

3 major categories of integration:
  1. Build-time integration (compile-time integration) – Before container gets loaded in tje browser, it gets access to ProductsList source code
  2. Run-time integration (client-side integration) – After container gets loaded in the browser, it gets access to ProductsList source code.
  3. Server integration – While sending down JS to load up Container, a server decides on whether or not to include ProductsList source.

Build-Time Integration

Build-time integration
Pros
  • Easy to setup and understand
Cons
  • Container has to be re-deployed every time ProductsList is updated
  • Temping ro tightly couple the Container + ProductsList together

Run-Time Integration

  • Engineering team develops ProductsList
  • Time to deply
  • ProductsList code deployed ar http://my-app.net/list
  • User navigates to my-app.net, Container app is loaded
  • Container app fetches productslist.js and executes it
Pros
  • ProductsList can be deployed independently at any time
  • Different versions of ProductsList can be deployed and Container can decide which one to use
Cons
  • Tooling + setup is far more complicated
Most flexible and performant solution around right now - run-time integration using Webpack Module Federation
Example project Structure