微前端

[tiantingrui]

1. 为什么是微前端
2. 主流微前端解决方案剖析
3. 构建个性化微前端解决方案

[tiantingrui]

1-1 微前端的产生

• 微服务
• 微前端的产生

微服务

• 从软件架构层面来说

微服务是一种用于构建应用的架构方案。微服务架构有别于更为传统的单体式方案，可将应用拆分成多个核心功能。每个功能都被称为一项服务，可以单独构建和部署，这意味着各项服务在工作（和出现故障）时不会相互影响

微前端的产生

第一次出现在 2016 年, 2019年被正式采纳。

微前端是一种特定场景下的解决方案。

业务运营后台

1. 权限系统
2. 财务系统
3. 广告系统
4. 营销系统
5. 用户系统
6. ……

微前端的优势

1. 应用独立开发

   跟微服务的核心思想一样，在微前端领域单个应用应该独立开发和部署的

2. 多独立团队开发

   在既保留各自团队的独立性，又能使不同团队进行良好的协作

3. 高可扩展的开发

   快速的让新团队开发属于自己的应用，而不受既有应用的影响

4. 灵活的技术选项

   不局限于某一类前端框架，可以将现有主流框架 vue react angular 都组合起来

[tiantingrui]

1-2 iframe的痛点

• iframe 式微前端
• Nginx 式微前端

iframe 式微前端

iframe 的定义

HTML内联框架元素（<iframe>）标识嵌套的 `browsercontext`。它能将另一个HTML页面嵌入到当前页面中。

iframe 的痛点

1. url同步：顶层url与iframe url 的同步问题，在非单页应用中不能同步，刷新后状态会丢失。
2. 全局样式：iframe内的样式不能突破iframe固有的限制，类似全局mask遮罩层样式无法处理，同样的弹窗也只会在 iframe 中实现
3. SEO：有SEO需求再这样的场景下无法实现
4. 多域名 cookie 同步：容易出现多个域名站点，而顶层域名下 cookie 需要与 iframe 共享域名的场景

Nginx 式微前端

分布式微前端

通过 nginx 服务器的反向代理将不同路由分发到不同的应用（独立部署）。从而实现多个独立应用串联起来。它是曾经采用的最多的“微前端”解决方案，虽然看起来是多个前端应用单纯的聚合在一起，但是与 iframe 相比已经有很大的进步。

http {
  server {
    listen  80;
    server_name cms-music.neteease.com;
    location /api/ {
      proxy_pass http://192.168.1.2:8080/api
    }
    location /cms/user {
      proxy_pass http://192.168.1.2:8080/cms/user
    }
    location /cms/advert/ {
      proxy_pass http://192.168.1.2:8080/cms/advert/ 
    }
  }
}

[tiantingrui]

1-3 微前端解决的问题&现状

• 微前端解决的问题
• 微前端现状

微前端解决的问题

1. 巨石应用的开发负担

   合理拆分巨石应用，按照不同的业务拆分成不同应用独立开发部署

2. 不同技术栈应用整合

   不管是原生JS应用，jQuery应用，React 等应用都能很好的结合在一起，抹平技术债

3. 多团队协作

   非常适合大型业务团队各自开发户型最大限度不干扰。既能专注自己业务，也能快速交付

微前端现状

1. Iframe iframe 天然隔离

2. Nginx 路由分发

   可以说是市面上比较理想的微前端解决方案

3. web-components

   面向未来的微前端解决方案技术栈之一

4. Single-spa

   最理想的微前端解决方案，优势很多，Qiankun构建在其基础之上

5. Module Federation

   webpack 5 推出的新的微前端解决方案

[tiantingrui]

1-3 微前端解决的问题&现状

• 微前端解决的问题
• 微前端现状

微前端解决的问题

1. 巨石应用的开发负担

   合理拆分巨石应用，按照不同的业务拆分成不同应用独立开发部署

2. 不同技术栈应用整合

   不管是原生JS应用，jQuery应用，React 等应用都能很好的结合在一起，抹平技术债

3. 多团队协作

   非常适合大型业务团队各自开发户型最大限度不干扰。既能专注自己业务，也能快速交付

微前端现状

1. Iframe iframe 天然隔离

2. Nginx 路由分发

   可以说是市面上比较理想的微前端解决方案

3. web-components

   面向未来的微前端解决方案技术栈之一

4. Single-spa

   最理想的微前端解决方案，优势很多，Qiankun构建在其基础之上

5. Module Federation

   webpack 5 推出的新的微前端解决方案

[tiantingrui]

2-1 微前端原理

1. 应用生命周期
2. 路由跳转
3. 隔离

应用生命周期

1. 开始挂载
2. 挂载成功
3. 挂载更新
4. 卸载

export class MicroFrontend {
  baseInfo: any

  constructor(props: any) {
    // 初始化代码
    this.baseInfo = {
      ...prop
    }
  }

  beforeApplicationLoad(): void {
    // 开始加载应用前钩子
  }

  applicationLoad(): void {
    // 应用加载后钩子
  }

  beforeApplicationUninstall(): void {
    // 应用卸载前钩子
  }
}

路由跳转

隔离

1. 样式隔离
   1. BEM
   2. css in js
2. JS执行隔离环境