# micro-frontend-tutorial
**Repository Path**: balac123/micro-frontend-tutorial
## Basic Information
- **Project Name**: micro-frontend-tutorial
- **Description**: 微前端
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 1
- **Forks**: 0
- **Created**: 2020-08-31
- **Last Updated**: 2022-06-21
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 微前端
1. 解决问题
- 应用技术栈不同问题
- 独立开发、独立部署
- 老代码难维护
可以将一个应用划分成若干个子应用，将子应用打包成一个个的 lib。当路径切换时加载不同的子应用。这样每个子应用都是独立的，技术栈也不用做限了，从而解决了前端协同开发的问题
2. 落地微前端
- single-spa，用于前端微服务化的 javascript 前端解决方案（本身没有处理样式隔离，js 执行隔离）实现了路由劫持和应用加载
- single-spa 缺陷：不够灵活，不能动态加载 js 文件，样式不隔离，没有 js 沙箱隔离的机制
- qiankun，基于 single-spa 提供了更加开箱即用的 API( single-spa * sandbox * import-html-entry )做到了技术栈无关，接入简单（像 iframe 一样简单）
总结：独立构建，运行时主子应用完全解耦，技术栈无关，靠的是协议接入（子应用必须导出 bootstrap, mount, unmount 方法）
如果使用 iframe, iframe 中的子应用切换路由时用户刷新页面就尴尬了
应用通信：
- 基于 url 来进行数据传递，但是传递消息能力弱
- 基于 CustomEvent 实现通信
- 基于 props 主子应用间通信
- 使用全局变量，redux 进行通信
公共依赖：
- CDN - externals
- webpack 联邦模块
## SystemJS
SystemJS 是一个通用的模块加载器，它能在浏览器或者 NodeJS 上动态加载模块，并且支持 CommonJS、AMD、全局模块对象和 ES6 模块。通过使用插件，它不仅可以加载 JavaScript，还可以加载 CoffeeScript 和 TypeScript。
## 目录说明
----
# micro frontends 微前端
可以将一个应用划分成若干个子应用，将子应用打包成一个个的 lib。当路径切换时加载不同的子应用。这样每个子应用都是独立的，技术栈也不用做限了，从而解决了前端协同开发的问题
解决的问题：
1. 独立开发和部署
1. 大型单页应用无限扩展
1. 不限技术栈
1. 快速整合业务
1. 多团队写作
缺点（微前端之“熵”）
1. 体验有折损
1. 维护成本高
1. 管理版本复杂、依赖复杂
1. 开发体验不太友好
1. 粒度不宜太小
## 微前端的10个问题（10-factor）
1. 微应用的注册、异步加载和生命周期管理
1. 微应用之间、主从之间的消息机制
1. 微应用之间的隔离措施
1. 微应用的框架无关、版本无关
1. 公共依赖的库、业务逻辑(utils)以及版本管理
1. 微应用独立调试、和主应用联调
1. 微应用的发布流程
1. 微应用打包优化问题
1. 微应用专有云场景的出包方案
1. 渐进升级：平滑改造老项目
## 微前端实现方案
从技术实践上，微前端架构可以采用以下的几种方式进行：
* 使用`HTTP`服务器(`Nginx`)的路由来重定向多个应用
* 在不同的框架之上设计通讯、加载机制，诸如 `Mooa` 和 `Single-SPA`
* 通过组合多个独立应用、组件来构建一个单体应用
* `iFrame`，使用 `iFrame` 及自定义消息传递机制
* 使用纯 `WebComponent` 构建应用
* 结合 `WebComponent` 和 `ShadowDOM` 来隔离应用
---
Document
---
样式隔离
hello world