RFC: Module Federation framework capabilities

[zhoushaw]

1. Summary

Briefly describe the function.

MF can not only be used as module-sharing solutions, but also has the characteristics of a micro frontend solution.

• Support application-level modules (with routing), and routing can work well together
• Works well with the application capability of the First-Party framework
  • Conventional routing
  • Data loader
  • i18n
  • ...
• Frame independent (Vue, React, Ng applications can be loaded)

2. Glossary

Explain proper nouns

• MF: Module Federation
• MFE: Microfront end
• Ng: Angular
• BrowserRouter: The BrowserRouter component of React Router uses URLs to store the current location in the browser address bar
• MemoryRouter: MemoryRouter of React Router stores its internal location in a memory array
• Host: Application of Consumer Module Federation
• Remote: Built plugin with Module Federation and set exposes

3. Basic example

• Load BrowserRouter application
• Load MemoryRouter application
• Load two MemoryRouter applications simultaneously

remote

// remote ./src/export-App.tsx
import { createAdapterComponent } from '@module-federation/bridge-react';

const App = () => {
  return (
    <BrowserRouter basename="/">
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/detail">Detail</Link>
        </li>
      </ul>
      <Routes>
        <Route path="/" Component={Home}/>
        <Route path="/detail" Component={Detail}/>
      </Routes>
    </BrowserRouter>
  );
};
export default createAdapterComponent(App);

// remote module-federation config
new ModuleFederationPlugin({
  name: 'remote1',
  exposes: {
    './export-app': './src/export-App.tsx'
  },
  shared: ['react', 'react-dom'],
});

//rsbuild.config.ts
source: {
    alias: {
        'react-router-dom$': path.resolve(__dirname, 'node_modules/@module-federation/bridge-react/dist/lib/router.js'),
    }
},

host

// host module-federation config
new ModuleFederationPlugin({
  name: 'federation_consumer',
  remotes: {
    remote1: 'remote1@http://localhost:9001/mf-manifest.json',
    remote2: 'remote2@http://localhost:9002/mf-manifest.json',
  },
  shared: ['react', 'react-dom'],
});

// host
import { createRemoteComponent } from '@module-federation/bridge-react';
const Remote1App = createRemoteComponent({ name: 'remote1/export-app'});
const App = () => {
  return (
    <BrowserRouter basename="/">
      <Navigation setInitialEntrie={setInitialEntrie} setAbc={setAbc}/>
      <Routes>
        <Route path="/" Component={Home}/>
        <Route path="/detail" Component={Detail}/>
        <Route path="/remote1/*" Component={()=> <Remote1App />}/>
        <Route path="/remote2/*" Component={()=> <Remote1App memoryMode={true} initialEntries={[initialEntrie]}/>}/>
      </Routes>
    </BrowserRouter>
  );
};

4. Motivation

• Meet the use case under micro frontend (from module to application dimension)
  • Exception of using the same module between micro-applications (React component multi-instance problem, different React instances between micro-applications)
  • " All in one Platform " scenario, requires application-level modules with routing, and can well support multi-instance rendering and nested routing situations
  • Historical or new technology selection, users need to use different front-end frameworks (React, Vue, Ng), technology-independent rendering destruction

5. Detailed design

General Rendering, Destruction Protocol

• Add @module-federation/bridge-react , @module-federation/bridge-vue packages
• How to use

host

// before
-import RemoteApp from 'remote1/export-app'

// after
+import { createRemoteComponent } from '@module-federation/bridge-react';
+const RemoteApp = createRemoteComponent({ name: 'remote1/export-app' });


const App = ()=>{
    return <div><RemoteApp /></div>;
}
export default App;

remote

// remote
function RemoteApp() {}

// before
-export default RemoteApp;

// after
+import { createRemoteComponent } from '@module-federation/bridge-react';
+export default createAdapterComponent(RemoteApp);

createRemoteComponent

// Pseudocode only expresses ideas
export function createRemoteComponent(info) {
    function RemoteApp() {
        const rootRef = useRef(null);    
        const providerInfoRef = useRef(null);
        useEffect(()=>{
            loadRemote(name).then((m)=>{
                let module = m;
                let providerInfo = module.provider();
                providerInfoRef.current = providerInfo;
                providerInfo.render({ dom: rootRef.current, basename, memoryMode, ...resProps });
                statueRef.current = true;
            });
            return ()=>{
                providerInfoRef?.current?.destroy({ dom: rootRef.current });
            };
        });
        return div ref={rootRef}></div>;
    }  
    const res = (props: Parameters<typeof RemoteApp>[0])=> {
        return <RemoteApp {...info} {...props} />;
    };
    return res;
}

createAdapterComponent

// Pseudocode only expresses ideas
function createAdapterComponent<T>(Component: React.ComponentType<T>) {
  return ()=>{
    let root: ReactDOM.Root | null = null;
    return {
      render({ dom, basename, memoryMode, ...props }:any) {
        // 基于 dom 渲染不基于组件
        // 使用 basename
        root = ReactDOM.createRoot(dom);
        root.render(<React.StrictMode>
            <RouterContext.Provider value={{basename, memoryMode, initialEntries}}>
               <Component {...info} />
            </RouterContext.Provider>
          </React.StrictMode>);
      },
      destroy({ dom }:any){
        root?.unmount();
      }
    };
  };
};

bridge router

//Pseudocode only expresses ideas
//@module-federation/bridge-react/router

//proxy react-router-dom
import { useContext } from 'react';
import { BrowserRouter, MemoryRouter } from 'react-router-dom/dist/index';
import { RouterContext } from './context';

function WraperRouter (props: Parameters<typeof BrowserRouter>[0] | Parameters<typeof MemoryRouter>[0]) {
    const { basename, ...propsRes } = props;
    const routerContextProps = useContext(RouterContext);
    if (routerContextProps?.memoryMode) {
        return <MemoryRouter {...props} initialEntries={routerContextProps.initialEntries} />
    }
    return <BrowserRouter {...propsRes} basename={routerContextProps?.basename || basename} />
}

export { WraperRouter as BrowserRouter }; 

export * from 'react-router-dom/dist/index';

//rsbuild.config.ts

// alias react-router-dom to @module-federation/bridge-react/router
export default defineConfig({
    source: {
        alias: {
            'react-router-dom$': 
            path.resolve(
                __dirname, 
                'node_modules/@module-federation/bridge-react/dist/lib/router.js'
            ),
        }
    },
});

Routing system and rendering sequence design

6. Drawbacks

• User usage cost
  • Cross-component communication mode
    • React Context cannot be shared directly between hosts and remotes
  • Application level components cannot work properly with SSR
• Maintenance costs
  • Need to maintain bridge libraries such as React, Vue, ng,... separately

7. RoadMap

• Supports react and vue application mixed loading and normal route coordination
• Modern.js framework: Provides best practices based on modern.js, supports application dimension loadable, does not support other additional features (slardar, i18n, etc.)
• More additional features are supported（monitor、i18n、css isolate）

[xiaoYuanDun]

正在打算把 dynamic 实现的路由系统迁移到 MF 的实现，期待一波，不过为什么有 react-router-dom 不能 shared 出去的限制