Skip to main content

What is a micro frontend?​

The Micro Frontend style of architecture design does for the frontend of an application what microservices do for the backend, breaking monolithic structures into smaller components that can then be assembled on a single page.

Pros and cons of micro frontend:​

Pros:​

  • A micro frontend is more modular and reusable.
  • A micro frontend is more scalable.
  • The micro frontend is more maintainable.
  • Independent and Faster development.
  • Testing separate applications are easy.
  • Different front-end technologies can be used for different projects(like React, Angular, Vue.js, etc).

Cons:​

  • Testing the entire application is not easy.
  • Sharing code, state(data), etc is not easy.
  • Keeping track of components and modules can be a challenge.

Module federation​

info

Module Federation | webpack

Module Federation allows a JavaScript application to dynamically load code from another application and in the process, share dependencies. If an application consuming a federated module does not have a dependency needed by the federated code, Webpack will download the missing dependency from that federated build origin.

info

Configure webpack for using .env files: https://prateeksurana.me/blog/using-environment-variables-with-webpack/

Toolchain​

We can use a specific toolchain for creating Microframework apps. It can be executed with the npx command:

npx create-mf-app 

Need to install the following packages:
  create-mf-app
Ok to proceed? (y)

Architecture​

  • Dashboard: (for lack of a better name) is a container app which ties it all together
  • Micro #1 & #2: Two or more single task React (or...) apps which basically need to function in isolation mode.