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

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

微前端的技术深度相对于 React 或者 Vue 框架要简单很多,但是它的广度却涵盖了前端知识的方方面面。本课程将会带你系统了解微前端的运行本质,有助于你在业务广度和技术深度上更进一层。
子弈
62讲 | 2662人已学习
优惠价¥59.9
官网购买

版权声明

本站非掘金小册官网,与官方无任何关系。我们不提供课程下载或详细内容,仅作为课程分享和推荐平台。我们鼓励大家支持正版,尊重创作者的劳动成果,这样不仅能帮助创作者持续产出优质内容,也能让自己获得更好的学习体验。请通过官方渠道购买和学习课程,感谢您的理解与支持。

课程详情

课程介绍

作者介绍

子弈,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 动态隔离

作者介绍

前端
人生一世

推荐

JavaScript 设计模式核心原理与应用实践 - 掘金小册课程推荐/分享/优惠/折扣
JavaScript 设计模式核心原理与应用实践
通俗易懂的编程“套路“学。带你深入看似高深实则接地气的设计模式原理,在实际场景中内化设计模式的”道“与”术“。学会驾驭代码,而非被其奴役。
修言
13163人已学习
优惠价¥19.9
官网购买
SpringBoot 中间件设计和开发 - 掘金小册课程推荐/分享/优惠/折扣
SpringBoot 中间件设计和开发
代理反射、扰动函数、字节码插桩、类代理注册,把技术与场景结合学习中间件开发技术!
小傅哥
3913人已学习
优惠价¥29.9
官网购买
RocketMQ 核心原理解析 - 掘金小册课程推荐/分享/优惠/折扣
RocketMQ 核心原理解析
生活场景驱动,由浅入深带你搞懂 RocketMQ
SH的全栈笔记
1484人已学习
优惠价¥39.9
官网购买
Go 组件设计与实现 - 掘金小册课程推荐/分享/优惠/折扣
Go 组件设计与实现
4 位字节跳动研发工程师,带你深入剖析字节基础组件的设计、实现及性能优化
掘金小册
674人已学习
优惠价¥69
官网购买
基于 Stencil 构建 Web Components 组件库 - 掘金小册课程推荐/分享/优惠/折扣
基于 Stencil 构建 Web Components 组件库
使用 Stencil ,让你的组件 Write once,Run anywhere !
Super_x
849人已学习
优惠价¥29.9
官网购买
Java 应用安全性必知必会 - 掘金小册课程推荐/分享/优惠/折扣
Java 应用安全性必知必会
从 0 到 1 手把手教你使用 Spring Security 构建一套强大的安全体系
天涯兰
519人已学习
优惠价¥39.9
官网购买