Skip to content

Latest commit

 

History

History
59 lines (48 loc) · 3.73 KB

README.md

File metadata and controls

59 lines (48 loc) · 3.73 KB
Raw

build status license

Stateful Micro Frontends with React and Redux

This is a simplistic micro-frontend demo inspired by Cam Jackson's great article on Micro Frontends and his corresponding demo implementation. He defines micro frontends as "An architectural style where independently deliverable frontend applications are composed into a greater whole".

This project goes beyond Cam's demo by showcasing

  • an implementation based on iframes (mentioned in Cam's article, but left open in his demo),
  • an alternative implementation using module imports with React.lazy,
  • cross-module management of shared Redux state.

The demo consists of a content server, a shared library (lib-common), three modules (mod-consumer, mod-producer, and mod-solitary), and three applications (app-script, app-iframe and app-import), which include the modules at runtime under specific routes maintained by React Router.

Application app-script loads its modules with help of runtime-inserted <script> tags. When loaded, each module adds a global function to window. For example, module "Consumer" adds a mountConsumer function. When the container app calls the unique global function of a module passing the id of an HTML tag, the module calls ReactDOM.render to mount the root element of the module to the given tag. The loader also handles the combination of Redux stores into a single state object (see module-loader.tsx).

Application app-iframe loads its modules into <iframe> tags by fetching their index-*.html documents. Each module is completely separated from the container app, no code is shared. Redux actions are dispatched between the container app and modules using the Browser's event system (postMessage and addEventListener). On loading, modules either copy parts of the container app's state or they read the initial state from local storage.

Application app-import uses React.lazy to load ES6 modules via dynamic imports. The import call is intercepted to enhance the global set of Redux reducers (see module-loader.ts). As for all app variants, there is no overarching build step. The container app and all modules can be built, tested, and deployed separately.

The project demonstrates several cases of global state management:

  • mod-consumer changes its color if a checkbox in the application menu is ticked.
  • mod-producer has a checkbox that changes the color of the application menu.
  • mod-solitary uses a local action and a local reducer to flip its own background color.

This project uses typescript, yarn workspaces, and rollup.

Installation

yarn install

Building

yarn build

This builds the shared library, all modules (in all formats needed by the applications), and all application variants. It puts the results into subdirectories of public named after the applications.

Running

yarn start

This starts a server at http://localhost:3000. To start one of the three applications, please click on the folder names.