The base of this example is another article I wrote a little while ago showcasing micro frontends with React. In a few words, the app is a French Bulldog accessory web shop where the host application is a simple React app with a product list and a cart page. These two routes are rendering a product and a cart micro frontend. Check the story out for more details. In this writing, I would like to present a possible implementation of micro frontends using module federation and compare the two solutions from several perspectives. Here is the repo below if you would like to check out the exampe in details:
You may have never heard of this Javascript architecture because it’s a pretty new feature introduced in Webpack 5. The best description comes from the inventor himself:
Module federation allows a JavaScript application to dynamically load code from another application — in the process, sharing 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.
#module-federation #react #micro-frontends #javascript #coding #react native