1 of 18

Scalable �Micro Frontends �with �Module Federation

2 of 18

How to Share Code Across Multiple Projects

3 of 18

How to Share Code Across Multiple Features

npm

4 of 18

How to Share Code Across Multiple Features

npm

overhead to publish a new version and bump versions in each project
overhead to extract code from a codebase to the npm package.
the code is shared but not deduped in runtime

5 of 18

How to Share Code Across Multiple Features

monorepo?

npm

overhead to publish a new version and bump versions in each project
overhead to extract code from a codebase to the npm package.
the code is shared but not deduped in runtime

6 of 18

How to Share Code Across Multiple Features

monorepo

npm

overhead to publish a new version and bump versions in each project
overhead to extract code from a codebase to the npm package.
the code is shared but not deduped in runtime
build complexity to keep CI independent

7 of 18

How to Share Code Across Multiple Features

8 of 18

How to Share Code Across Multiple Features

Module Federation

multiple applications to share code with each other at runtime.

9 of 18

How to Share Code Across Multiple Features

Module Federation

mini-app

main-app

content

10 of 18

How to Share Code Across Multiple Features

Module Federation

mini-app

content

expose

11 of 18

How to Share Code Across Multiple Features

Module Federation

mini-app

main-app

content

remote

12 of 18

How is this better than iframe?

13 of 18

How to Share Code Across Multiple Features

Module Federation

mini-app

main-app

content

remote

react

de-duplications of shared packages

14 of 18

and...

15 of 18

How to Share Code Across Multiple Features

Module Federation

mini-app

main-app

content

remote

container

circular dependency works too.

16 of 18

Micro Frontend with Module Federation

customer-app

main-app

customer

container

auth

cms-admin

preview

17 of 18

Drawbacks

Complexity of many small apps

just like microservices, when you split into many small apps, you have had time figure out how they fit together.

Not all CSS solutions works well with module federation:

Tailwind CSS does not work well with this because you can’t dedupe the CSS
CSS-in-JS will works perfectly.

Tooling support, many build tools still doesn’t support this (CRA, NextJS, TypeScript)

at least temporarily

18 of 18

References

Youtube series that showcase and demo how to use Module Federation: https://www.youtube.com/playlist?list=PLNqp92_EXZBLr7p7hn6IYa1YPNs4yJ1t1

Book by the creator of Module Federation (paid): https://module-federation.myshopify.com/products/practical-module-federation