微前端框架-专栏介绍

微前端框架解决了什么

大部分人都会说为了降低研发维护成本，把各个子模块独立拆分成小型应用，这个就是微前端解决的问题。

有没有想过为什么会出现这类问题。

作者认为出现这类问题，看着因是团队的偷懒，是前端系统架构到了一定规模时候没有及时调整架构设计的结果。

但是很多团队其实也想调整但不能够，因为在公司层看，这个没有任何商业价值，甚至调整后会带来不可预知的风险。这是因。站在这个角度，微前端没有任何价值。

所以我们还是回到这个问题：微前端框架解决了什么？

作者的回答：恰当的结合现有业务，可以让我们的产品焕发一下，产生新的商业附加值。

前面说到，微前端架构设计和使用大家都很容易理解，也容易上手，但随意引入第三方框架会带来不可预知的风险，而且有时候我们还需要做二次改造。比较好的解决途径，就是研读他们的源码，明白工作原理。当然还有个更好的途径：我们按照业务需求自研一个微前端框架，这也是本专栏的主要内容。

专栏内容

本专栏是一门基础加实战的课程， 在读完本专栏后，读者可以掌握从头研发一款自己的微前端框架。

专栏分为三部分组成：
第一部分：讲解微前端涉及到的前端基础知识，然后实现一个简易的微前端框架；由5大篇幅组成；
第二部分：是基础知识应用加深部分，仿照市面上流行的设计软件 Figma 开发一个web插件系统；由6大篇幅组成；
第三部分：进一步结合基础知识，实战一个完整的微前端框架，最终通过Web Component 方式提供给用户使用；由9大篇幅组成；

专栏大纲：

前言：给读者的信

第一部分：微前端基础知识

1. 微前端
2. js隔离技术
3. css隔离技术
4. 资源解析加载技术
5. 实战：实现一个简易的微前端框架

第二部分：仿照Figma开发一个web插件系统

1. 插件设计原则和设计方案思路
2. web系统设计：一个简易的UI设计系统（上）
3. web系统设计：一个简易的UI设计系统（下）
4. web插件系统设计（上）
5. web插件系统设计（中）
6. web插件系统设计（下）
7. 实践：开发一个插件demo

第三部分：实战一个完整的微前端框架

1. 框架设计思路
2. Web Component 组件设计
3. 资源加载和预加载设计
4. js隔离设计
5. css隔离设计
6. 监听应用路由变动
7. 主应用和子应用的数据通信设计
8. 生命周期设计
9. 实践：在项目里引用完成的微前端框架

最后

作者在有限的时间精力上，尽可能讲解清晰，更新也会比较慢，望读者耐心等待。也期望读者能够多从商业形态上考虑怎么跟现有技术结合，不要盲目跟风。