Micro Frontend Solution 7 - Static Data Sharing

2018-09-06

From the previous introductions, I believe you now have a relatively complete understanding of micro frontends. Below are some tips and handling methods I’ve developed during my work.

Dynamic Entry

When a new submodule is mounted to the project, a new entry point in the UI is needed to access the submodule’s UI. Such an entry point needs to be generated dynamically.

For example: the menu on the left side of the image should not be hardcoded. It should be automatically generated based on the data provided by each module.

Otherwise, every time a new module is released, we would need to modify the code in the outermost framework. That would defeat the purpose of independent deployment.

To achieve the effect described above, we can do this:

// ~/common/menu.js

import { isUrl } from '../utils/utils'
let menuData = [
  {
    name: 'Module 1',
    icon: 'table',
    path: 'module1',
    rank: 1,
    children: [
      {
        name: 'Page1',
        path: 'page1',
      },
      {
        name: 'Page2',
        path: 'page2',
      },
      {
        name: 'Page3',
        path: 'page3',
      },
    ],
  }
]
let originParentPath = '/'
function formatter(data, parentPath = originParentPath, parentAuthority) {
    ...
}

// Export this module's menu data externally
export default menuData

// Store.js
import { createStore, combineReducers } from 'redux'
import menuDate from './common/menu'
import createHistory from 'history/createBrowserHistory'
const history = createHistory()
...

// After getting the data, use a reducer function to return our menu data.
function menu() {
  return menuDate
}

...


// Finally export our menu data via Store.js. When registering, every app can access this data.
export const storeInstance = createStore(combineReducers({ namespace: () => 'list', menu, render, to }))

When our Base module gets the menu data from all submodules and merges them, it can render the correct menu.

This is just a small trick. Tips like this can help us accomplish many unexpected things in code. This is just a starting point. More micro frontend tips articles are coming. To be continued …

Micro Frontend Solution 1 - Thinking

Micro Frontend Solution 2 - Single-SPA

Micro Frontend Solution 3 - Module Loader

Micro Frontend Solution 4 - Message Bus

Micro Frontend Solution 5 - Route Distribution

Micro Frontend Solution 6 - Build & Deploy

Micro Frontend Solution 7 - Static Data

Micro Frontend Solution 8 - Secondary Build