Vite Module Federation
What is it
Vite Module Federation is a Vite/Rollup plugin which supports Module Federation.
It is a new way of sharing code and dependencies at runtime among JavaScript applications and could potentially replace our need of internal Einride npm modules and revolutionize our micro frontend architecture.
With module federation, any of our Saga repositories could expose one or more pieces of application code as modules which can be included by other Saga repositories as if it was a native component of that code base. Even complete React applications could be included inside of each other. Module federation compares all needed dependencies of the include module with the dependencies of the host application and only only downloads the missing dependencies, if any.
When to use it
To be determined during the assessment phase.
Possible use cases could be:
- Explore exposes a CO2 consumption graph that can be included in the Saga Dashboard
- Book exposes a "todays deliveries" widget that is displayed in the Saga Dashboard
- All code inside saga-ui that is being used by the Saga apps (e.g. sidebar) could be exposed as federation modules removing the need of constant dependency updates of saga-ui in every Saga app.
- A new micro frontend architecture where each Saga app is a federation module and gets included by a "Saga Platform" host repository. Enabling a seamless experience for our users where no more "full page reloads" are needed when switching between Saga apps.
How to learn it
- Start by getting some overview info of what "Webpack Module Federation" is: What Is Webpack Module Federation and Why Does It Matter?
- Since we use Vite instead of Webpack, all detail info on how to exactly use this can be found here: vite-plugin-federation github repository