开源软件名称：

unadlib/fronts

开源软件地址：

https://github.com/unadlib/fronts

开源编程语言：

开源软件介绍：

Fronts is a progressive micro frontends framework for building Web applications, and it's based on the module federation of Webpack.

Motivation

Among the many micro frontends solutions, single-spa and Module Federation are the best of them.

single-spa is a micro frontends framework based on router configuration. The centralization of configuration brings some limitations, such as it is difficult to granulate nestable micro frontends, module granularity control, module sharing, and so on.

In 2019, Zack Jackson proposed and implemented Module Federation. Module Federation is a completely different concept from single-spa, and allows a JavaScript application to dynamically load code from another application. It completely solves the problem of code dependency sharing and runtime modularity. The idea is true - A game-changer in JavaScript architecture as mentioned in Zack Jackson's article. And it's currently supported by Webpack, Next.js, and Rollup.

Although the Module Federation concept is so amazing, it has not yet gone further to provide a more complete and fully targeted micro frontends framework implementation, and this is what Fronts is trying to do.

Features

Non-module-federation - Although Fronts is based on the concept of module federation, it also supports non-module-federation mode.
Decentralized configuration - Configure site.json for dependency management in each Fronts app, support for nested micro frontends.
Cross frameworks - No framework or technology stack is restricted.
Code splitting & lazy loading - Support code splitting within the Fronts app as a module, it can be lazy loaded by other Fronts app as a dependent module.
CSS isolation - Optional CSS isolation solution.
Lifecycle - Fronts provide concise lifecycle for Fronts app entry.
Web Components & iFrame - Support for multiple frontend containers.
Multiple patterns - Support for building micro-frontends app and non-micro-frontends app.
Monorepo & TypeScript - Friendly support for Monorepo and TypeScript, which are mutually appropriate technology stack.
Version control - It's used for efficient and dynamic delivery apps such as canary release.
Zero hijacking - Fronts didn't do any hijacking, maintaining originality and possible loss of performance and security.
Generic Communication - Fronts provides concise and generic communication APIs, which supports almost all frontend environments.

Getting Started

You can follow this article(React without create-react-app Webpack 5) to quickly create app1 and app2 React projects.

Assuming you've completed these steps, let's get started with a quick taste of the wonderful micro frontends development of Fronts.

Install fronts-react and fronts-bundler in the projects.

# with NPM
npm install fronts-react fronts-bundler

# or with Yarn
yarn add fronts-react fronts-bundler

Set up site.json and webpack.config.js in the projects

We define app1 as a parent micro frontend and it depends on app2.

app1/site.json:

{
  "name": "app1",
  "exports": [],
  "dependencies": {
    "app2": "http://localhost:3002/remoteEntry.js"
  }
}

app2 doesn't have any dependencies, it acts as a micro frontend and we define it to export ./src/bootstrap as a micro frontends entry, this entry of app2 end will be used by app1.

app2/site.json:

{
  "name": "app2",
  "exports": ["./src/bootstrap"],
  "dependencies": {}
}

Wrap the Webpack config with createWebpackConfig() in config/webpack.config.js in the projects.

const { createWebpackConfig } = require('fronts-bundler');

module.exports = createWebpackConfig(originalWebpackConfig);

Define the default exported bootstrap function in app2/src/bootstrap.jsx and use boot() to get it booted.

import React from 'react';
import ReactDOM from 'react-dom';
import { boot } from 'fronts-react';
import App from './App';

export default function render(element) {
  ReactDOM.render(<App />, element);
  return () => {
    ReactDOM.unmountComponentAtNode(element);
  };
}

boot(render, document.getElementById('root'));

Load app1/src/App.jsx with useApp() to import app2.

import React from 'react';
import { useApp } from 'fronts-react';

export const App = () => {
  const App2 = useApp({
    name: 'app2',
    loader: () => import('app2/src/bootstrap'),
  });
  return <App2 />;
};

Examples

Simple Example

APIs

API	Isolation
`useApp()`	CSS(loose/optional)
`useWebComponents()`	CSS
`useIframe()`	CSS, JavaScript

Built-in packages

The most popular frontend frameworks are React, Vue and Angular. When the micro frontends uses one of these frameworks, it is recommended to use Fronts built-in package for this framework, such as fronts-react, fronts-vue and fronts-ng, otherwise please use fronts.