市面上前端微服务化研究(三)：如何设计微前端架构？

如何设计微前端架构

就当前而言，要设计出一个微前端应用不是一件容易的事——还没有最佳实践。在不同的落地案例里，使用的都是不同的方案。出现这种情况的主要原因是，每个项目所面临的情况、所使用的技术都不尽相同。为此，我们需要了解一些基础的微前端模式。

架构模式

微前端应用间的关系来看，分为两种：基座模式（管理式）、自组织式。分别也对应了两者不同的架构模式：

基座模式（管理式）

通过一个主应用，来管理其它应用。设计难度小，方便实践，但是通用度低。

自组织模式

应用之间是平等的，不存在相互管理的模式。设计难度大，不方便实施，但是通用度高。

通过上面两个对比， 基座模式实施起来比较方便，方案上便也是蛮多的。

而不论种方式,都需要提供一个查找应用的机制，在微前端中称为服务的注册表模式。和微服务架构相似，不论是哪种微前端方式，也都需要有一个应用注册表的服务，它可以是一个固定值的配置文件，如 JSON 文件，又或者是一个可动态更新的配置，又或者是一种动态的服务。它主要做这么一些内容
a)应用发现:让主应用可以寻找到其它应用
b)应用注册:即提供新的微前端应用，向应用注册表注册的功能
c)第三方应用注册:即让第三方应用，可以接入到系统中
d)访问权限等相关配置

应用在部署的时候，便可以在注册表服务中注册。如果是基于注册表来管理应用，那么使用基座模式来开发比较方便

设计理念

中心化：应用注册表,这个应用注册表拥有每个应用及对应的入口。在前端领域里，入口的直接表现形式可以是路由，又或者对应的应用映射
标识化应用:我们需要一个标识符来标识不同的应用，以便于在安装、卸载的时候，能寻找到指定的应用。一个简单的模式，就是通过康威定律来命名应用
应用生命周期管理
高内聚，低耦合

生命周期

前端微架构与后端微架构的最大不同之处，也在于此——生命周期。微前端应用作为一个客户端应用，每个应用都拥有自己的生命周期：

Load:决定加载哪个应用，并绑定生命周期
bootstrap：获取静态资源
Mount：安装应用，如创建 DOM 节点
Unload：删除应用的生命周期
Unmount：卸载应用，如删除 DOM 节点、取消事件绑定

这部分的内容事实上，也就是微前端的一个难点所在，如何以合适的方式来加载应用——毕竟每个前端框架都各自不同，其所需要的加载方式也是不同的。当我们决定支持多个框架的时候，便需要在这一部分进入更细致的研究。

如何去拆分应用

技术方式

路由分发式:通过 HTTP 服务器的反向代理功能，来将请求路由到对应的应用上。
前端微服务化:在不同的框架之上设计通讯、加载机制，以在一个页面内加载对应的应用。
微应用:通过软件工程的方式，在部署构建环境中，组合多个独立应用成一个单体应用。
微件化:开发一个新的构建系统，将部分业务功能构建成一个独立的 chunk 代码，使用时只需要远程加载即可。
前端容器化:通过将 iFrame 作为容器，来容纳其它前端应用。
应用组件化:借助于 Web Components 技术，来构建跨框架的前端应用。

实施的方式虽然多，但是都是依据场景而采用的。有些场景下，可能没有合适的方式；有些场景下，则可以同时使用多种方案。

路由分发式

路由分发式微前端，即通过路由将不同的业务分发到不同的、独立前端应用上。**其通常可以通过 HTTP 服务器的反向代理来实现，又或者是应用框架自带的路由来解决

路由分发式的架构应该是采用最多、最容易的 “微前端” 方案

前端微服务化

前端微服务化，是微服务架构在前端的实施，每个前端应用都是完全独立（技术栈、开发、部署、构建独立）、自主运行的，最后通过模块化的方式组合出完整的前端应用.

采用这种方式意味着，一个页面上同时存在二个及以上的前端应用在运行。而路由分发式方案，则是一个页面只有唯一一个应用。

组合式集成：微应用化

微应用化，即在开发时，应用都是以单一、微小应用的形式存在，而在运行时，则通过构建系统合并这些应用，组合成一个新的应用。

微应用化更多的是以软件工程的方式，来完成前端应用的开发，因此又可以称之为组合式集成。对于一个大型的前端应用来说，采用的架构方式，往往会是通过业务作为主目录，而后在业务目录中放置相关的组件，同时拥有一些通用的共享模板。

微件化

微件（widget），指的是一段可以直接嵌入在应用上运行的代码，它由开发人员预先编译好，在加载时不需要再做任何修改或者编译。**而微前端下的微件化则指的是，每个业务团队编写自己的业务代码，并将编译好的代码部署（上传或者放置）到指定的服务器上，在运行时，我们只需要加载相应的业务模块即可。对应的，在更新代码的时候，我们只需要更新对应的模块即可。

在非单面应用时代，要实现微件化方案，是一件特别容易的事。从远程加载来对应的 JavaScript 代码，在浏览器上执行，生成对应的组件嵌入到页面的相应部分。对于业务组件也是类似的，提前编写好我们的业务组件，当需要对应的组件时再响应、执行。

前端容器化之 iframe

iframe 作为一个非常 “古老” 的，人人都觉得普通的技术，却一直很管用。它能有效地将另一个网页/单页面应用嵌入到当前页面中，两个页面间的 CSS 和 JavaScript 是相互隔离的——除去 iframe 父子通信部分的代码，它们之间的代码是完全不相互干扰的。iframe 便相当于是创建了一个全新的独立的宿主环境，类似于沙箱隔离，它意味着前端应用之间可以相互独立运行

前端容器化之 Web Components

Web Components 是一套不同的技术，允许开发者创建可重用的定制元素（它们的功能封装在代码之外），并且在 web 应用中使用它们

目前困扰 Web Components 技术推广的主要因素，在于浏览器的支持程度。在 Chrome 和 Opera 浏览器上，对于 Web Components 支持良好，而对于 Safari、IE、Firefox 浏览器的支持程度，并没有那么理想。

应用微化架构

应用微化架构，是一种开发时整体，构建时拆分，运行时分离的前端架构模式。即应用微化架构从一份代码中，构建出适用于不同环境的多套目标代码。

• 构建时拆分架构
• 代码删除架构:以删代码的方式，来形成每个前端应用。
• 微前端准备式架构:即，随时可以拆分为多个前端应用。

由于它与微应用化的相似性，我们将它与微应用化做一个对比。它与微应用化不同的是，应用微化是在构建时对应用进行拆分，而非在本地模式下对应用拆分。相似的是，它也是基于构建系统的应用拆分方式。由于它与微应用化的相似性，我们将它与微应用化做一个对比。它与微应用化不同的是，应用微化是在构建时对应用进行拆分，而非在本地模式下对应用拆分。相似的是，它也是基于构建系统的应用拆分方式。

微应用化，是一个随时可合并式架构。而应用微化，则是一个随时可拆分式架构。
它不仅仅是一个适合于前端的架构模式，也是一适用于后端的架构模式

整洁前端架构

Clean Architecture 是由 Robert C. Martin 在 2012 年提出的架构模式。它具有这么一些特点：框架无关性、可被测试、UI 无关性、数据库无关性、外部机构（agency）无关性。

对于前端架构来说，Clean Architecure 实际上是：Clean Architecture + MVP + 组件化。

这种架构模式特别适合于：组织内即写前端又同后端的团队。它易于映射前后端 API，且可以使用 usecase 作为防腐层。

不得不提及的是，对于小规模的团队来说，它带来的弊端可能会远远大于好处——带来大量冗余的代码。尽管通过 Angular Schematics 可以通过参数来生成代码，但是这种分层架构地于简单的应用来说，还是过于复杂、难以上手。对于不写测试的项目来说 ，usecase 也不能带来它们所承诺的好处。

前端微服务化(四)：美团技术团队实现（HR系统的微前端设计）

未完待续 …