智联招聘的微前端落地实践——Widget

ThoughtWorks在几年前提出了微前端的概念，其核心理念是将前端单体应用在开发阶段拆分成多个独立的工程，并在运行阶段组合成完整的应用。不仅解耦了视图和代码，使得应用可以容纳多种技术栈，还进一步解耦了流程和团队，极大地提高了团队的自主性和协作效率。

智联招聘的大前端架构Ada本身就可以看作一个基于路由的微前端架构，围绕URL的研发方式能够灵活地实现页面级别的解耦。而在在视图区域级别，Ada也引入了专门的微前端实现机制——Widget。

什么是 Widget

Widget是一种可以独立开发和发布的视图区域，它运行于宿主页面中，并且能够和宿主页面进行双向通信。

在设计Widget架构时，我们考虑到Ada的多框架支持能力，应当让Widget在使用时不受框架的限制，也就是说，使用Knockout.js开发的Widget可以运行在Vue.js的页面中，反之亦然，这就决定了Widget的最终形态必须是框架无关的Plain JavaScript。出于同样的考量，通信机制也不应该受框架所限，而应该制定属于Widget的通信API规范。

总结一下，Widget的设计目标是：

• 框架独立，不受宿主页面技术栈限制；
• 流程独立，能够独立开发和发布，集成后无需宿主页面再次配合发布；
• 执行独立，运行逻辑不直接操控宿主页面，而是通过API来交换信息；
• 展现独立，内容和样式均限定在Widget视图区域之内，不直接影响宿主页面；

整体架构

为了统一开发体验，Ada从开发、调试、发布和运行都为Widget进行了专门的支持。

在开发阶段，理论上任何能够编译成Plain JavaScript的框架都可以使用，Ada在Vue.js等脚手架中内置了对Widget的支持，开发者可以使用熟悉的技术开发Widget，也可以像调试页面一样预览和调试Widget。

我们在脚手架内核中为Widget单独设计了Webpack配置，使得基于各种框架开发的Widget都能输出成一个独立的JavaScript Bundle（样式也会构建到同一个Bundle中），藉此来保证输出的文件符合Widget规范。

就像Ada体系里的其他工件一样，每个Widget都有一个唯一URN，宿主页面通过该URN来引用Widget，从而和Widget的JavaScript Bundle解耦。在发布阶段，Ada会为URN关联最新的输出清单，这样一来，Widget不但可以脱离宿主页面独立发布，还能进一步实现灰度发布和A/B实验。

运行时

Widget的生命周期包括四个阶段：注册、初始化、运行和销毁，各阶段之间的转换是由Widget SDK来负责调度的。

宿主页面使用

初始化Widget之后，就可以与宿主页面进行双向通信了，例如：

// Widget 内部
window.zpWidget.postMessage({
  widgetName: 'timeNow',
  eventName: 'click'
}, new Date())

// 宿主页面
window.zpWidget.onmessage({
  widgetName: 'timeNow',
  eventName: 'click'
}, (time) => {
  console.log(`当前时间是：${time}`)
}) 

实际应用

目前集团内已累计发布了100余个Widget，各条产品线都招到了Widget能发挥作用的场景，比如：

• Passport借由Widget统一了集团内的所有登录逻辑，能够更好地调整安全策略，业务方通过接入 Widget 即可实现登录功能；
• 限时推广的Banner或隐私通知，常常同时在多个产品中同时展示，且变化频率较高，Widget能够有效地将其和业务代码解耦；
• 内部系统在升级时，可以借助Widget在视图层面一小块一小块地逐步迁移，从而在用户无感的情况下渐进式地完成整体升级工作；

微前端不止步于Widget

发布于2019年初的Widget机制，是我们在微前端领域的第一次尝试，成效令人满意。集团内对Widget的广泛应用带来了更多的诉求和灵感激发，未来，我们还会结合业务特点去探索微前端的其他可能性，让架构赋能业务，为用户带来价值。