深入浅出微前端--掘金小册课程推荐/优惠

作者介绍

子弈，Web 前端开发，掘金人气创作者。

小册介绍

微前端的概念源自于微服务，主要目的是降低大型复杂应用的开发、升级、维护以及团队协作成本。当然，解耦历史遗留的难以开发、升级和维护的大型应用是目前使用微前端的一个重要原因。

微前端理论上需要具备独立部署、独立开发甚至技术无关等特点。想要设计一个通用的微前端框架，在技术上需要涵盖前端的各个方面，包括浏览器通用能力、框架 SDK 设计、工程化设计、 开发脚手架模版设计、性能优化、聚合调试技巧、HTTP 请求知识以及 CI / CD 等。

因此掌握好微前端，就等于掌握了相对全面的前端知识体系。

当然，学习微前端并不是什么困难的事情，个人认为可以从以下几个阶段深入学习：

• 第一阶段（使用） ：在业务中尝试接入社区常用的微前端框架，宏观了解微前端的功能；
• 第二阶段（深入） ：通过调试微前端框架的源码深入学习内部的运行原理；
• 第三阶段（总结） ：归纳总结微前端框架的设计要素，尝试学习这些设计要素的原理；
• 第四阶段（实践） ：尝试设计一个通用的微前端框架，并根据业务特性进行应用；
• 第五阶段（衍生） ：学习和微前端息息相关的基础知识，例如浏览器原理、V8 原理。

基于上述几个学习阶段，我设计了这门课程，会讲解如何设计一个功能完善的微前端框架，并衍生前端工程化技术和基础原理知识。希望能帮助大家熟悉微前端的同时，可以全面了解前端的一些技术体系。该课程可以分为 9 个模块：

• 开篇说明：讲解什么是微前端、微前端能解决业务中的哪些问题；
• 方案了解：讲解微前端的几种简单实现方案，帮助大家了解运行的轮廓；
• 原理解析：讲解微前端的沙箱隔离、通信和性能优化等原理，帮助大家理解运行原理；
• 框架解析：讲解 single-spa 和 qiankun 框架的使用示例和工作原理；
• 工程设计：讲解微前端框架设计的工程原理，帮助大家了解团队协作的工程设计规范；
• 框架设计：设计一个通用的微前端框架，帮助大家全面理解微前端通用框架设计；
• 解决方案：基于框架设计配套的 React & Vue 解决方案，理解通用的业务封装设计；
• 应用实战：基于解决方案提供微前端应用的实战案例，帮助大家理解应用层设计方案；
• 原理进阶：深入部分浏览器和 V8 原理，帮助大家了解前端的基础原理。

你会学到什么？

1. 体系化的微前端运行原理和框架设计实践；
2. 体系化的前端工程化原理和实践；
3. qiankun & single-spa 等微前端框架的运行原理；
4. 浏览器和 V8 的部分基础原理。

适宜人群

• 熟练掌握 JavaScript / TypeScript、CSS 以及 HTML，了解 React 或者 Vue 框架；
• 没有使用过微前端，想体系化了解微前端，或者曾经使用过，但不清楚内部的原理；
• 缺少工程化的设计经验及团队协作的经验，想要提升工程化能力；
• 想要深入了解浏览器、V8 等底层工作原理，了解一些服务端基础知识。

名人推荐

开发环境说明

本课程接下来所有的示例 Demo 所用到的环境：

• Node.js： v16.18.1
• NPM：8.19.2
• Git：2.37.1 (Apple Git-137.1)

• 方案了解：引言

• 方案了解：iframe Cookie

• 开篇：微前端到底解决了哪些业务问题？

• 方案了解：Web Components 方案

• 方案了解：iframe 方案

• 方案了解：NPM 方案

• 方案了解：动态 Script 方案

• 方案了解：Ajax Cookie

• 原理解析：快照隔离

• 原理解析：V8 隔离

• 原理解析：引言

• 原理解析：iframe + Proxy 隔离

• 原理解析：iframe 隔离

• 原理解析：通信

• 原理解析：性能优化

• 原理解析：CSS 隔离

• 工程设计：按需加载

• 工程设计：构建工具

• 工程设计：引言

• 工程设计：代码格式

• 工程设计：代码检查

• 工程设计：版本发布

• 工程设计：变更日志

• 工程设计：提交规范

• 框架设计：隔离

• 工程设计：单元测试

• 工程设计：CI / CD

• 工程设计：文档设计

• 解决方案：React 解决方案

• 框架设计：状态管理

• 框架设计：性能优化

• 框架设计：通信

• 应用实践：服务端设计

• 框架解析：single-spa 源码解析

• 解决方案：Vue 解决方案

• 解决方案：CLI 工具实现

• 应用实践：前端设计

• 框架解析：qiankun 源码解析 - 无沙箱模式

• 原理进阶：浏览器的线程和任务

• 原理进阶：V8 的嵌入实践

• 原理进阶：V8 的编译原理

• 原理进阶：V8 的概念说明

• 前言：阅读指南

• 工程设计：README 说明

• 番外篇：如何提高效率（快捷键篇）

• FAQ

• 番外篇：如何提高效率（应用篇）

• 番外篇：如何提高效率（终端篇）

• 分享视频

• 框架解析：qiankun 使用示例

• 框架解析：single-spa 的 NPM 示例

• 框架解析：引言

• 框架解析：single-spa 的 Script 示例

• 框架解析：single-spa 的 Fetch 示例

• 框架解析：single-spa 的 Code Splitting 示例

• 框架解析：import-html-entry 源码解析

• 框架解析：qiankun 源码解析 - Legacy Proxy 隔离

• 框架解析：qiankun 源码解析 - CSS 隔离

• 框架解析：qiankun 源码解析 - 快照隔离

• 框架解析：qiankun 源码解析 - Proxy 隔离

• 番外篇：依赖注入解析

• 框架解析：qiankun 源码解析 - CSS 动态隔离