课程概述

      本微前端课程主题是“微前端技术、实现与企业级项目”，核心是围绕微前端技术的发展历程、项目规范设计、技术知识储备和项目实战者四个点来教学。

      通过这四个要点，循循渐进地引导学生理解微前端，知道微前端需要哪些技术知识储备，并且根据自身企业的业务特色来因地制宜选择微前端的技术方案解决项目历史债务或者技术问题。

课程大纲

第一节：微前端技术的起源和发展

目的

• 介绍微前端的发展历程和历代技术方案；

• 列举历代方案的优劣点和时代局限性；

• 让学生知道微不同时期微前端技术方案的实用性和局限性；

内容

• 传统微前端方案

• iframe前端页面嵌套控制

• 服务端网关路由控制（Nginx/Apache）

• 进阶中的微前端方案

• 前端单页面模块化管理，AMD/CommonJS等模块方案

• 前端页面的npm模块化托管使用

• 现阶段的微前端方案

• 基于单页面路由和内容隔离的应用聚合方案

• 常见的技术框架Single-SPA、Qiankun等

• 下一代微前端方案可能会怎么样？

• ES6      Model

• Shadow      DOM

• ES9      Realms

  
  

第二节：微前端技术实现拆解(上)——技术规范

目的

• 分析企业级前端项目微前端实现的准备事项；

• 如何设计项目的微前端技术规范；

• 为后续的技术实现和项目实战提供理论基础和规范指导；

• 指导学生如何根据企业项目特点来设计规范；

内容

• 企业级前端项目微前端方案准备事项

• 要先调研企业内用到的前端技术框架（React、Vue等）及其所用版本；

• 理清楚企业内前端路由的控制逻辑，例如单页面应用路由和Nginx网关路由等；

• 理清楚企业内前端页面数据HTTP接口的权限控制逻辑；

• 实现微前端项目的技术规范设计

• 技术框架的兼容规范，例如React、Vue等框架兼容规范；

• 统一路由规范、要兼容单页面、多页面和页面重定向的路由规范；

• 统一权限控制逻辑，并且应用到路由规范上；

第三节：微前端技术实现拆解(下)——技术实现（技术知识储备）

目的

• 对上述的微前端准备事项和技术规范提供具体技术实现方式；

• 对每个规范设计都演示相应的技术实现方式；

• 举一反三地教学如何根据不同要求来选择技术实现方式；

内容

• 路由控制

• 多种路由技术方式，实现一套路由管理策略；

• 前端单页面路由拦截监听技术实现，主要围绕history路由和hash路由；

• 服务端路由控制的技术实现，主要从前端视角来学习 Nnginx的路由控制；

• 应用隔离

• 多种隔离方案，实现一套可向前向后兼容的子应用隔离技术方案；

• CSS样式隔离方案，例如用Shadow DOM实现CSS样式隔离技术方案；

• JS变量隔离方案，例如用Proxy代理window的控制方案、window快照比较方案；ES2018 realms 探索

• iframe隔离应用页面方案，用iframe方式来实现不同前端应用隔离，并且如何控制iframe的技术通信；

• 多种隔离方案的结合和降级策略的控制；

• 数据流方案

• 双向数据流 -> 单向数据流

• 父子数据传递 -> 全局 state manager

• React      与 Vue 的数据流方案的发展，以及选择

• 权限控制

• 梳理业务的角色维度，结合路由控制来处理前端权限控制；

第四节：因地制宜选择微前端——项目实战

目的

• 实际案例演示，例如电商多角色商家店铺管理平台来演示微前端项目实战；

• 教学生如何选择微前端开源框架来实现企业项目的微前端方案；

内容

• 案例背景：

• 在金融场景，面向机构、销售等的管理工作台等；

• 不同工作台的前端技术框架和框架版本不一致，例如有用React16、React17、Vue2和Vue3等；

• 现在需要将所有商家相关的工作台能聚合成一个，用微前端方案优雅地低成本实现；

• 实战演示：

• 梳理和分析业务功能逻辑，重新划分路由控制、用户权限控制的规范，并且做好新旧URL的兼容（例如旧版URL能重定向到新版微前端URL）

• 使用Single-SPA来聚合项目，并且实现应用间的数据通信、渲染隔离等；

• 项目聚合过程中，如何使用多种应用隔离方案实现优雅降级策略；

• 远程专家会诊（暂定）

• 远程邀请 Vue 核心开发 蒋群豪、某 Lowcode 公司技术合伙人林海，跟大家一起探讨公司当前场景，以及解决方案。