第2335期面向未来与浏览器规范的前端DDD架构设计

Posted 2021-07-13 前端早读课

前言

来自美团沙龙之《微前端架构设计和实践》。今日前端早读课文章由字节跳动@郑仁杰授权分享。

@郑仁杰,字节跳动微前端开源项目 Magic（https://github.com/bytedance/magic-microservices）的负责人及核心贡献者

正文从这开始~~

Hello 大家好，我是来自字节跳动的郑仁杰，目前是公司微前端开源项目 Magic（https://github.com/bytedance/magic-microservices）的负责人及核心贡献者，今天我带来的分享主题是《面向未来与浏览器规范的前端 DDD 架构设计》，这次我们站在了一个与行业传统微前端解决方案完全不同的全新的视角去思考如何设计和实践前端微服务，如何更优雅的借助浏览器原生能力将微前端的粒度做到组件级别，期待能给大家带来不一样的收获和体验。

今天的分享我们主要会分为以下四个部分的内容，首先是我们做这件事情的技术背景，为什么我们要去做微前端，我们要解决的现实问题是什么，行业上的微前端解决方案都有哪些优劣？

虽然说今天我们是在介绍一个我们自己沉淀的解决方案，但是我们不会把太多的篇幅放在我们的解决方案的介绍以及宣传上，今天的分享，更多地是和大家一起回到我们刚做这件事的起点，遵循我们的思考足迹一起去探寻和发掘现阶段的前端技术热点和他们的现实价值。

首先进入我们的第一个主题 —— 技术背景。

其实现如今微前端的概念早已经不是什么新鲜的词了，业内也有很多实现优秀的实现或者框架和库。比如大家最熟悉的那些已经被投放在生产中的实践，例如以 single-spa（https://single-spa.js.org/）为核心支撑起的传统“微前端”解决方案，亦或是基于它封装的优秀实现 Qiankun（https://qiankun.umijs.org/），一直都是近来微前端生态中的热点；再比如图中的 Shoelace（https://shoelace.style/）组件库，去年一度成为了前端行业的热点，它借助一些浏览器的原生能力以及特定的实现，例如浏览器提出的 Web Components 规范，能够产出一套抹平框架的组件库；当然，还有 Webpack5 推出的 Module Federation 能力，也再一次把微前端理念推上了“热搜”，很多业内的同僚都认为，它或许会成为微前端在生产中更进一步的“银弹”。

那在这过程中大家是否有去思考过一个问题：为什么微前端在过去一段时间会火起来呢，或者说，微服务这样一套后端设计，前端工程师们又在其中发现了什么价值而让这么多人热衷于此呢？是大家在追赶技术噱头，还是真的有迫切需要这项技术去解决的问题呢？我们带着这些问题，透过这个现象去看一个在我们的日常开发中经常会遇到的一个案例：

我们经常会沉淀一些业务组件（如果你的逻辑足够优雅可抽象