微前端架构设计和实践

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://gudepeng.github.io/note/2020/03/24/wqd/

一.前端技术发展史

1.原始时代

web1.0时代，当时是没有前端的概念的，大家都在使用jsp，php，asp。
因为jsp的强大，开发小微项目的时候可以很快的开发出来，但是相对的，编写大项目的时候问题也会明显的暴露出来
缺点：
业务体系增大，调试困难
jsp混杂业务，难以维护
前后端职责不明确（或者不区分职责）

2.后端mvc时代

由于1.0时代的问题，为了代码更好维护，为了更加明确前后端职责。这时后端出现了mvc框架（Spring，Structs等），前端则以模板的形式进行开发。然后后端去把逻辑编写到模板中。
缺点：
前后端开发效率低
前后端职责不明确

3.前后端分离

ajax时代，ajax的到来，让前后端的职责更加明确，因为前端可以通过ajax发送请求进行数据交互
前端开发的人员，只需要开发自己页面这部分的内容，数据可由后台进行提供。而且ajax可以使得页面实现部分刷新，极大的减少了之前需要反复开发的页面。前端的类库也慢慢的开始发展，最著名的就是jQuery了。

3.前端框架——MVC、MVP、MVVM

MVC

前端的MVC应该与后端类似，具备着View、Controller和Model。
Model：负责保存应用数据，与后端数据进行同步
Controller：负责业务逻辑，根据用户行为对Model数据进行修改
View：负责视图展示，将model中的数据可视化出来。

MVP

MVP与MVC很接近，P指的是Presenter，presenter可以理解为一个中间人，它负责着View和Model之间的数据流动，防止View和Model之间直接交流

MVVM

MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心，它是连接view和model的桥梁。它有两个方向：一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定。现在主流的三个框架angular2、vue、react都是实现了这样的模式。

3.x微前端

由于前端开发的体量越来越庞大，内容越来越多，打包越来越慢，开发人员越来越多，产品功能复杂，代码冲突频繁，影响面积大。所以为了解决这些问题发展出了微前端架构。

二.什么是微前端

微前端，主要是把一个整体转化为多个可以独立运行、独立开发、独立部署、独立维护的服务或者应用的聚合，从而满足业务快速变化以及多个团队并行开发的需求。

Techniques, strategies and recipes for building a modern web app with multiple teams that can ship features independently. – Micro Frontends
译：微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。

• 技术栈无关
  主框架不限制接入应用的技术栈，子应用具备完全自主权

• 独立开发、独立部署
  子应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新

• 增量升级
  在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，而微前端是一种非常好的实施渐进式重构的手段和策略

• 独立运行时
  每个子应用之间状态隔离，运行时状态不共享

可参考：可能是你见过最完善的微前端解决方案

三.微前端架构实践

1.iframe

• url 不同步。浏览器刷新 iframe url 状态丢失、后退前进按钮无法使用。
• UI 不同步，DOM 结构不共享。想象一下屏幕右下角 1/4 的 iframe 里来一个带遮罩层的弹框，同时我们要求这个弹框要浏览器居中显示，还要浏览器 resize 时自动居中…
• 全局上下文完全隔离，内存变量不共享。iframe 内外系统的通信、数据同步等需求，主应用的 cookie 要透传到根域名都不同的子应用中实现免登效果。
• 慢。每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程。并且iframe加载多厚严重过影响阅览器性能

2.二级域名

• 共同的模块每个项目都要有
• 通过顶级域名通信，传递消息

3.微前端框架

• 技术栈无关
  主框架不限制接入应用的技术栈，子应用具备完全自主权
• 独立开发、独立部署
  子应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更
• 增量升级
  在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，而微前端是一种非常好的实施渐进式重构的手段和策略
• 独立运行时
  每个子应用之间状态隔离，运行时状态不共享

下一篇文章就会带大家实际开发一个微前端项目。这里主要是使用了qiankun框架

文章参考：

可能是你见过最完善的微前端解决方案