深入浅出FE微前端初探

Posted 2022-12-09 fullstack_lth

一. 什么是微前端？

Techniques, strategies and recipes for building a modern web app with multiple teams using different JavaScript frameworks. — Micro Frontends

微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。

上面是阿里的qiankun框架中引用的微前端定义，微前端第一次提出于2016年底的 ThoughtWorks Technology Radar 。

那微前端出现为了解决什么问题呢？

笔者看了很多资料认为微前端是为了解决不同版本及不同框架的多个应用共存及增量部署问题。

 

Tom Söderlund在这篇文章中提到了如何实现微前端的七种方式：

Here’s a few different approaches to implementing micro frontends:

1. The best solution I’ve seen is the Single-SPA “meta framework” to combine multiple frameworks on the same page without refreshing the page (see this demo that combines React, Vue, Angular 1, Angular 2, etc). See Bret Little’s explanation here.
2. Multiple single-page apps that live at different URLs. The apps use NPM/Bower components for shared functionality.
3. Isolating micro-apps into IFrames using libraries and Window.postMessage APIs to coordinate. IFrames share APIs exposed by their parent window.
4. Make the different modules communicate over a shared events bus (e.g. chrisdavies/eev). Each module can be built using its own framework, as long as it handles incoming and outgoing events.
5. Using Varnish Cache to integrate different modules.
6. Web Components as the integration layer.
7. “Blackbox” React components.

微前端要解决的问题及应该包含的内容如下图所示：

二. 微前端的价值：

1.技术栈无关。主框架不限制接入应用的技术栈，微应用具备完全自主权

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

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

4.独立运行时。每个微应用之间状态隔离，运行时状态不共享

三. 微前端的基本工作原理：

 

四.微前端应用

Single-spa 是一个将多个单页面应用聚合为一个整体应用的 javascript 微前端框架。这里面有很多single-spa的例子：single-sap-demo。 

使用 single-spa 进行前端架构设计可以带来很多优点：

• 在同一页面上使用多个前端框架 而不用刷新页面 (React, AngularJS, Angular, Ember, jQuery)
• 独立部署每一个单页面应用
• 新功能使用新框架，旧的单页应用不用重写可以共存
• 改善初始加载时间，迟加载代码

qiankun 是蚂蚁金服开源的一套完整的微前端解决方案。具体描述可查看 文档 和 Github,另外它是基于single-apa的。

不说了，去看代码了，微前端真香。。。

五.参考资料：

1. 拥抱云时代的前端开发架构—微前端

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

3. qiankun官网

4. Micro frontends—a microservice approach to front-end web development

5. Micro Frontends

6. Micro Frontends from martinfowler.com

7. 微前端的核心价值

8. Micro Frontends

9. Vue + qiankun 快速实现前端微服务

10.前端微服务化解决方案2 - Single-SPA

11. single-spa基于webpack的demo

12. single-spa结合多个框架的demo

13. single-spa-react