微前端-初步理解

微前端入门必看：https://alili.tech/archive/ea599f7c/
single-spa中文文档：http://www.mianshigee.com/tutorial/single-spa-5.x-zh/
入门初试文档：https://www.cnblogs.com/scdisplay/p/11648701.html#!comments

微前端的应用场景?

1. 项目技术栈过于老旧,相关技能的开发人员少,功能扩展吃力,重构成本高,维护成本高.
2. 项目过于庞大,代码编译慢,开发体差,需要一种更高维度的解耦方案.
3. 单一技术栈无法满足你的业务需求

微前端需要解决的问题与挑战?

1. 我们如何实现在一个页面里渲染多种技术栈?
2. 不同技术栈的独立模块之间如何通讯?
3. 如何通过路由渲染到正确的模块?
4. 在不同技术栈之间的路由该如何正确触发?
5. 项目代码被切割之后,通过何种方式合并到一起?
6. 我们的每一个模块项目如何打包?
7. 前端微服务化后我们该如何编写我们的代码?
8. 独立团队之间该如何协作?

单体应用对比微前端

微前端架构理解

可以理解：将包装后的各个独立子应用挂载到主应用的指定dom上，存在一个加载控制器，能够让主应用找到对应的子应用，并加载它。

加载器：也就是微前端架构的核心，主要用来调度子应用，决定何时展示哪个子应用。

包装器：有了加载器，可以把现有的应用包装，使得加载器可以使用它们。

主应用：一般是包含所有子应用公共部分的项目

子应用：众多展示在主应用内容区的应用

所以是这么个概念：加载器→包装器→️主应用→️子应用

总的来说是这样一个流程：用户访问index.html后，浏览器运行加载器的js文件，加载器去配置文件，然后注册配置文件中配置的各个子应用后，首先加载主应用(菜单等)，再通过路由判定，动态远程加载子应用。

预备知识

1. SystemJs

SystemJS提供通用的模块导入途径，支持传统模块和ES6的模块。

SystemJs有两个版本，6.x版本是在浏览器中使用的，0.21版本的是在浏览器和node环境中使用的，两者的使用方式不同。(参考：https://github.com/systemjs/systemjs)

在微服务中主要充当加载器的角色。

2. singleSpa

single-spa是一个在前端应用程序中将多个javascript应用集合在一起的框架。主要充当包装器的角色。（参考：http://www.mianshigee.com/tutorial/single-spa-5.x-zh/）

singleSpa

Single-spa 包括以下内容:

1.Applications，每个应用程序本身就是一个完整的 SPA (某种程度上)。 每个应用程序都可以响应 url 路由事件，并且必须知道如何从 DOM 中初始化、挂载和卸载自己。 因此，每个应用程序都拥有自己的生命周期。

• Load:决定加载哪个应用，并绑定生命周期
• bootstrap：获取静态资源
• Mount：安装应用，如创建 DOM 节点
• Unload：删除应用的生命周期
• Unmount：卸载应用，如删除 DOM 节点、取消事件绑定

2.可以理解为：存在一个应用程序注册表，我们需要把可调度的应用程序注册进来，才有后面的调度过程。 single-spa-config配置文件就是做这个事情, 每个应用程序都注册了三件东西

• A name
• A function (加载应用程序的代码)
• A function (确定应用程序何时处于活动状态/非活动状态)