微服务:从Single-SPA到类Single-SPA初探

什么是微前端?它出现的意义,解决了什么问题?single-SPA 做了哪些事来辅助微前端落地? 这篇文件希望带给你一些思考。

我这几天写了一篇读书笔记:《前端架构:从入门到微前端》,里面由浅入深提到了微前端的一些概念、思考和实践。建议去搜一搜。这里针对读书笔记做一些总结和思考。

微前端存在的意义

常见的场景

多个 app 在一个页面里。尤其是做 B 端的。一个应用多个模块。

如何实施微前端,拆分和聚合。

概念和愿景

它是一种概念,大型应用的解决方案,它希望做到:

  • 技术无关。每个开发团队自行选择技术栈,不收其他团队影响
  • 业务独立。 每个交付产物可以独立使用,避免和其他交付产物耦合
  • 样式隔离。样式隔离
  • 原生支持。最好使用原生事件通信。比较难达到

微前端借鉴了微服务的思路。作对比,看借鉴了什么。

  • 服务层面
    • 微服务,独立服务,业务剥离。
    • 微前端,应用和模块拆分。更专注业务。
  • 服务治理
    • 微服务。服务发现,依赖管理,降级,限流,日志等
    • 微前端。应用发现、路由、监控、降级、运行、注销、聚合等。
  • 服务通信
    • 微服务。 http RPC 中间件
    • 微前端。eventBus sharedWorked BroadcastChannel LocalStorage

主框架作用:

  • 应用的发现和调度
  • 专场动画 日志 上报
  • 应用 css 隔离
  • 应用监控 降级 鉴权等。根据业务来,比如详情页需要登录。
  • 应用间通信机制

技术实施

常见的方式:

  • 大仓库拆分成独立的模块文件夹,通过 webpack 统一去构建
  • 大仓库拆成小仓库。多个 git 发包到 npm 上,然后集成
  • 大仓库也是拆分小仓库。作为一个独立的服务可以访问。
  • 大仓库拆成多个仓库,通过构建集成到主应用。single-spa 这个是重点

iframe

iframe 存在一些问题。

  • 显示区域不可控制。解决:不考虑 ie 就不是问题。
  • url 记录无效,刷新页面就没了。这个也能解决。
  • 样式显示和兼容性
  • 性能开销。阻塞 Onload,占用连接池,多层嵌套页面崩溃。

优势明显:

  • 改造成本低
  • 天然隔离

另外就是 single-spa

Single-SPA

自称 js 的元框架, Meta-Framework 可以构建可共存的微前端引用。每个前端应用都可以用自己的框架编写。能达到的效果:

  • 同一页面使用多个框架, react ng vue 等,不用刷新页面
  • 懒加载前端应用和代码,改善初始加载时间

基础概念

架构: 瘦基座。也就是主程序来加载其他程序,基座本身只提供生命周期规范,不负责实现。这一点后面看。

看 demo 代码, /root/root-app.js:

1
2
3
4
5
6
import * as singleSpa from 'single-spa';
singleSpa.registerApplication('ap-1',()=>import('app1/app1.js'),pathPrefix('/app1'))

singleSpa.registerApplication('app2',()=>import('app2/app2.js'),pathPrefix('/app2'))

singleSpa.start()

这里用到两个方法 注册应用和启动。

不关心 js 里是啥,就加载。这里不同框架的声明周期不同个,所以创建 DOM 的逻辑也不同。

子应用如何处理

这里先简略说,因为 react vue 初始化代码不同。

需要注意两件事:1 自己设计框架的生命周期; 2 处理不同的创建 DOM 节点

优缺点

优点:

  • 支持主流框架和传统框架
  • 用户体验好,不需要页面跳转,当前页面载入
  • 方便迁移遗留系统

缺点:

  • 系统构建复杂。应用需要集成在一起构建
  • 不支持不同应用的部署分离
  • 代码结构复杂
  • 学习成本高

技术落地,待实施。

类 single-SPA

single-spa 提供的更多是思考和实践,我也看到了国内一些大厂,再这基础上做了封装和拓展。

比如

  • 阿里 Umi 这边的 qiankun
  • 阿里飞冰这边的 icestack
  • 其他大厂也有及实践和产出,看下一章。

其他阅读理解

我看网上有多大厂的技术分享,这里做一个阅读理解。排名不分先后。

1 ThoughtWorks 「微前端」- 将微服务理念扩展到前端开发(实战篇)

目前可以考虑 iframe 和 single-spa ,WebComponent

CustomEvent

优化建议:

  • 骨架图,渐进加载。
  • 首屏不加载不咋 js,异步加载
  • 管理好统一组件库,显示声明依赖,减少资源加载
  • 外置类库

2 thoughtworks 微前端如何落地?

微前端好处:

  • 应用自治。只需要遵循统一的接口规范或者框架,以便于系统集成到一起,相互之间是不存在依赖关系的。

  • 单一职责。每个前端应用可以只关注于自己所需要完成的功能。

  • 技术栈无关。你可以使用 Angular 的同时,又可以使用 React 和 Vue。

它也有一系列的缺点:

  • 应用的拆分基础依赖于基础设施的构建,一旦大量应用依赖于同一基础设施,那么维护变成了一个挑战。
  • 拆分的粒度越小,便意味着架构变得复杂、维护成本变高。
  • 技术栈一旦多样化,便意味着技术栈混乱

3 微信公众号 前端那些事儿 【前端架构】微前端实战

别人写的读书笔记,总结的很精简。

4 知乎 阿里 Midway 从微前端到微后端,不可思议的前端架构思考

看错了,这是midway的

5 爱奇艺 爱奇艺号微前端架构实践

基于种种原因,爱奇艺号技术团队基于Vue定制开发了微前端框架,此文从偏向实践的方面来简要介绍这套框架的实现原理。

似乎是实践总结,但写的太晦涩了。

6 美团 Bifrost微前端框架及其在美团闪购中的实践

美团闪购研发团队开发了一套微前端框架——Bifrost,可以更好的帮助研发团队解决单一业务向多元化业务发展的管理问题

SingleSPA看起来完美,但它没有照顾到实际生产环境中的开发、部署的差异性,并不是Product-Ready。综合多种因素考虑,我们最终决定采用自研的方式来实现微前端化Bifrost。

7 快狗打车 关于微前端你必须了解的三种实现方式

没啥,还是汇总总结。

8 阿里的qiankun框架,umijs 出的。https://qiankun.umijs.org/zh/

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

qiankun 是一个基于 single-spa微前端实现库,旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。

qiankun 孵化自蚂蚁金融科技基于微前端架构的云产品统一接入平台,在经过一批线上应用的充分检验及打磨后,我们将其微前端内核抽取出来并开源,希望能同时帮助社区有类似需求的系统更方便的构建自己的微前端系统,同时也希望通过社区的帮助将 qiankun 打磨的更加成熟完善。

目前 qiankun 已在蚂蚁内部服务了超过 100 个线上应用,在易用性及完备性上,绝对是值得信赖的。

还是阿里的实践 v5

9 前端微服务在字节跳动的打磨与应用

有干货。看下面

10 GMTC 网易 建设企业级微前端方案

语雀网址 https://www.yuque.com/xinbao37/buv88q/322632

网易严选也遇到了巨石应用,随着迭代,模块 90+,页面 300+,相关人员 30+

也是探索微前端。

  • 路由分发
  • 类 single-spa 主应用,子应用
    • 优点。框架无关。独立开发部署运行。项目自有分割组合。方便自由拓展
    • 缺点。子应用需要实现 mount 扥个钩子,侵入式。全局污染和资源竞争
  • 胖基座,基座包含大部分环境,有整套运行环境。子应用是一个路由模块
    • 有点。子应用代码体积小
    • 缺点。基座本身难以迭代。需要自定义方案解决公共依赖的管理和加载。
  • 传统 spa+组件化+私有 npm
    • 把通用业务发布成 npm 组件。框架无关的话还是 WebComponents
    • 优点,渐进增强,逐步改进
    • 缺点,组件数量一多,通信和维护成本就搞。不能完全独立开发部署测试
  • 网易在 single-spa 思想上,讲了建设的思想和实践,值得一看

字节跳动头条号的微前端实践

问题背景

单体应用,独石,出现了问题:

  • 上线慢。
  • 理解困难。拆就完事了。

如何实践

服务发现

和微服务不同,前端不需要区分很多概念。唯一的共同点谁也不认识谁了。

  • 客户端服务发现。客户端请求一个注册的目录,里面包含了所有服务和负载均衡的基本信息,自己觉得如何处理。
  • 服务端服务发现,客户端请求就完了,服务端决定反向代理、负载均衡

它们选的是第一种客户端发现,请求一个模块列表。列表给出的资源是 session 决定的,动态,根据列表的动态信息加载资源模块。

通过服务发现,拆分解耦,拆分之后的工程版本方便对齐(这个没理解)

有什么好处:

  • 能够做到快速上线。点一下 http 请求就生效了。
  • 独立切换,比如是10 个模块 ab 启动,就有10^2=1024中选择。这么多模块,都有独立的版本,对应 session 控制。做 ab 测试

后面完全看不懂了。评论里推荐看这个视频 https://www.bilibili.com/video/av88748342

看了视频感受也没有变好。:sweat:

请我喝杯咖啡吧~