解密智联招聘的大前端架构Ada

Ada是智联招聘自主研发的演进式大前端架构。于2017年正式投入使用后，又通过三年持续演进，全面覆盖了从研发到运维的各个方面，具有跨技术栈工程化体系、交互式图形界面开发工具、自动化发布流程、Serverless运行时和完善的监控预警设施。目前已经支撑集团内数百个工程，在线URL数量多达数千，每日承载请求量逾十亿次。

本文将摘取Ada的一些关键特性，向你们介绍Ada的演进成果和设计思想。

可演进的工程化机制

“可演进”是Ada最核心的设计思想。

Ada的最第一版本其实是它的内核，投入使用后便一直保持每两至三周一个版本的演进速度，不断地巩固内核，完善周边设施，同时开放更多研发能力。咱们但愿全部工程都能享受到最新版本的特性，不肯意看到工程版本随着时间推移变得碎片化。

考虑到Webpack的灵活性和复杂性会不可避免地滋长碎片化，咱们决定将其隐藏到Ada内部，由Ada来承担起统一工程化机制的责任。

Ada规范了工程的目录结构，将指定目录下的次级目录做为Webpack Entry处理，实现了对SPA和MPA的同时支持，更容易支撑巨量级的复杂视图。

同时，Ada还统一处理了Webpack Loader及插件的使用方式、CDN地址、Code Split、SourceMap、代码压缩等构建细节，而且自动处理了不一样部署环境之间的差别，标准化了工程的构建输出形式。

针对工程之间可能存在的合理的差别性配置，好比域名、根路径和语言处理器（Webpack Loader）等等，Ada还向业务团队提供了一个更加精简的工程配置文件。

经过工程规范和工程配置文件，咱们把Ada塑形成了一名“Webpack配置工程师”，它会处理好全部涉及到Webpack的工做，业务团队无需关心此类细节。咱们也所以对工程化机制有了更强的治理和演进能力，可以在不影响业务团队的状况下进行迭代（好比调整逻辑、修复问题、升级Webpack版本、甚至更换到其余打包工具等等）。

支持多框架

为了更好地支持业务特有的技术诉求，以及应对不断涌现的新框架和新技术，Ada从一开始就将多框架支持能力看成了一个重要的设计目标。

依托于统一的工程化机制，Ada能够根据各类框架的特色针对性地调整Webpack配置，造成新的脚手架。全部脚手架都延用了一致的工程规范和工程配置文件，最大程度上保证了一致的开发体验，减小了框架的切换成本。

咱们选择Vue.js做为公司的主要前端框架，并为其研发了专门的脚手架。Vue.js脚手架保留了Vue.js在研发效率方面的优势，容许开发者配置多种CSS处理器，并对服务器端渲染提供了良好的支持。

随后，Ada又提供了Weex脚手架来支持移动端快速开发，帮助业务团队将一套代码同时运行在浏览器、iOS和Andriod中。

针对须要支持旧版IE浏览器的业务，咱们选择了MVVM模式的鼻祖框架Knockout.js，并将Vue.js广受赞誉的的单文件组件机制引入到Knockout.js脚手架中，为开发者带来了和Vue.js脚手架同样的开发体验。

此外，Ada还提供了用于开发Web API的Node.js脚手架，并逐步为它增长了TypeScript支持和GraphQL研发能力。

“可演进”的Ada工程化机制为新框架预留了充足的扩展空间，也让咱们更容易跟进框架的版本更迭，持续为业务团队开放框架的完整能力。

服务器端研发能力

Ada基于Koa研发了Web服务器，并开放了服务器端研发能力，赋予前端工程师更全面的掌控力。不但能够在UI层面执行权限校验、重定向和服务器端渲染（SSR）等操做，还可以经过研发Web API来实现BFF层（Backend for Frontend）。完整的服务器端研发能力能将先后端的接触面（或摩擦面）从复杂的视图层面转移到相对简单可控的BFF层面，实现真正意义上的先后端分离，继而经过并行开发来最大程度提升开发效率。

为了进一步下降服务器端研发难度，Ada在脚手架目录结构规范的基础上，进一步规范了路由函数的声明方式，造成了从HTTP请求到函数的映射关系。请求函数是一个异步函数，Ada会向它传递一个上下文对象。这是一个通过了悉心封装的对象，它包含了当前Request的全部信息，提供了全面控制Response的能力，而且统一了Web API和SSR的API。

借助请求函数映射机制和自定义上下文对象，Ada向开发者提供了一种更加简单直接的、面向请求的开发方式，同时隐藏了Koa和Web服务器的技术细节。这种设计使得业务团队能够更加专一于产品迭代，架构团队也能在业务团队无感知的状况下进行平常维护和持续演进（好比调整逻辑、扩充能力、升级Node.js版本、甚至更换到其余Web服务器框架等等）。

Serverless架构

在下降服务器端开发门槛的同时，咱们也但愿可以下降服务器的运维和治理难度，让前端工程师没必要分心于诸如操做系统、基础服务、网络、性能、容量、可用性、稳定性、安全性等运维细节，从而将更多的精力投入到业务和专业技能上。基于这样的考虑，咱们引入了Serverless架构。

咱们借助容器技术搭建了服务集群，将Ada演进成为一个更加通用的运行时，除了函数发现以及经过执行函数来响应URL请求以外，还对运行时自身提供了全方位的保障。Ada服务器有完整的请求生命周期追踪机制和日志API，可以自动识别和阻断恶意请求，还能从常见的Node.js故障中自动恢复。此外，服务集群也具有完善的安全防护和性能监控设施，并实现了容量弹性伸缩，在节约成本的同时也能更好地应对流量波动。

如此一来，服务便从工程中脱离出来，成为Serverless服务集群的一员，继而经过发布流程来将服务和工程链接起来。发布流程也运行在云端，分为部署和上线两个阶段。部署阶段仅仅执行文件构建、上传和注册，不会对线上版本产生任何影响。部署完成后，就能够在发布中心上线具体的URL版本，而且能够随时回滚至历史版本。不管发布仍是回滚，都会即时生效。

URL粒度的发布方式更加契合前端业务的迭代习惯，更加灵活，与单体应用的总体发布方式相比也更加安全可控。工程做为一种代码组织形式，再也不承担服务的责任，能够随时根据须要进行合并和拆分，也能更好地适应虚拟团队这样的组织形态。

工做台

和许多框架同样，Ada早期也提供了一个命令行工具来辅助开发。命令行工具的局限性很是明显，呈现形式和交互形式都过于单一。随着Ada的逐步采用，平常开发过程当中产生的信息和所涉及的操做都愈发繁杂。咱们须要一个更具表现力的工具来进一步提升工做效率，便基于Electron研发了Ada工做台。

Ada工做台并非命令行功能的简单复刻，而是对前端图形界面开发工具的大胆想象和从新定义。咱们为Ada工做台添加了丰富的功能，全面覆盖了前端工做流程中的开发、调试、发布等环节，使它成为真正的一站式前端开发工具。

咱们在Ada工做台中引入了URL级别的按需构建。开发者选择URL以后，Ada工做台就会自动启动多个构建器来执行构建，同时以图例的形式展示构建状况。构建中出现的任何问题，好比未找到引用或者未经过开发规范检查，均可以直观地看到提示，点击提示则能浏览更详细的信息。按需构建既提高了构建速度，也在必定程度上有效地避免了Webpack在构建大型工程时可能出现地各类问题。

除了手工启动构建以外，Ada工做台提供了一种更加便利的方式——“访问即构建”，经过监听对URL的访问，自动启动按需构建，并在构建完成后主动刷新页面。“访问即构建”经过天然的本机调试行为来触发构建，免去了手工逐个选择URL的繁琐操做，很快就成为了开发者的首选构建方式。

虽然服务器端代码最终运行于Serverless环境，但并不意味着开发阶段只能远程调试，为了便于调试，Ada工做台内置了Ada服务器的一个开发版本，该版本仅对本机开发流程进行了适配和功能缩减，其他特性和Serverless版本保持高度一致，诸如端口冲突、环境差别等等困扰开发者的效率障碍在很大程度上都被消除了。

Ada工做台还提供了一个交互式的日志查看器，来帮助开发者浏览本机开发时输出的日志。全部日志都会以很是简约的形式呈现，能够经过点击来浏览明细，同时也提供了关键字搜索和日志级别过滤等功能，以便开发者能快速找到所关心的调试信息。

发布流程也被无缝嵌入到Ada工做台中，而且获得了进一步加强，可以方便地执行URL级别的按需发布。

目前，Ada工做台已经成为公司前端技术体系的重要基础设施。前端技术领域还在不断涌现出各类新的概念，而Ada工做台的想象空间依旧很大，这也让咱们对它将来能发挥的做用更加期待。

移动端研发能力

咱们选择了Weex做为移动端的快速研发框架，帮助业务团队使用熟悉的Vue.js语法开发能够同时运行于浏览器、iOS和Andriod中的应用。

Weex脚手架遵循了Ada的工程化机制，能够享受Ada工做台提供的开发和调试便利。此外，Ada工做台还以插件的形式内置了Weex真机调试工具，以便在App内进行调试。

在开发模式上，咱们最大程度保留了Web的特征，为前端工程师带来更加熟悉的开发体验，Web风格的URL路由方式也在Native内核中获得了支持。Native内核向Weex提供了全方位的支持，包括路由、缓存、视图组件、互操做API等等。针对历史遗留的Native平台差别问题，则经过咱们研发的mobile-js-bridge来将它们封装成一致的API。

此外，咱们为Weex也提供了URL粒度的发布能力，可以独立于App的版本进行发布，极大地提升了移动端的迭代速度和问题响应速度。

Ada充分发挥了Weex在快速迭代方面的优点，普遍地应用于公司的各个移动端产品中，前后帮助业务团队答应了多场快速交付战役。

能力扩充

Ada除了支持开发Web页面，还支持开发一种特殊的视图——Widget。做为微前端架构的一种实现，Widget运行在宿主页面中，能够独立开发和发布。其设计目标是解耦代码、流程和团队，帮助业务团队进行跨技术栈、跨产品以及跨团队的功能复用。好比公司全部产品线都须要使用统一的登录注册Widget，后者由平台团队来维护，在保证兼容性的前提下就能够自行迭代演进，而不须要各产品线逐版本配合发布。Widget SDK负责维护Widget的生命周期，并提供了相似于Web Worker的通讯机制，从而实现Widget和宿主页面在技术框架、代码逻辑和发布流程上的彻底独立。

Widget是一种在客户端复用能力的机制，在服务器端，Ada提供了请求上下文扩展来实现能力复用。请求上下文扩展是一组能够独立开发和发布的函数，发布以后的函数会附加到请求上下文，供特定范围的请求函数调用。借助请求上下文扩展，业务团队能够更方便地复用诸如用户认证和受权之类的服务器端公用能力。

此外，Ada服务器还内置了一些经常使用的第三方模块的多个版本，好比vue-server-renderer、axios和pg等等。开发者能够经过专门的公共模块API来引用这些公共模块的制定版本。由Ada服务器统一提供的公共模块一方面提高了工程的构建速度，减少了输出体积，另外一方面也规避了Webpack没法处理Node.js Native的问题。

在对GraphQL进行了大量调研和实践以后，咱们决定经过工具包的形式提供GraphQL开发能力。GraphQL工具包同时支持graphql-js和Apollo GraphQL两种实现，而且能够将Schema转化为Ada请求函数，从而在Ada服务器中执行。GraphQL工具包会识别Schema中的异步Resolver，并将它们注册到Ada Server的性能监控和请求跟踪机制中，为业务团队在合并了多个操做的请求中定位问题提供便利。

得益于Ada的“可演进性”，咱们可以更加稳健地响应业务诉求，持续不断地将技术洞察转换成新的能力，以更加“Ada”的形式提供给业务团队，上述能力扩展就是其中的典型示例。

质量保障

咱们采起了多种技术手段来保障Ada核心代码的质量和Serverless服务集群的稳定性。

Ada核心代码遵循了至关严格的开发规范，并经过数千个单元测试用例100%覆盖了所有代码和执行路径。针对单元测试可能出现的“非有意覆盖”状况，咱们特别设计了“混沌模式”，经过随机删除特定的代码来检验测试用例的全面性。

为了确保Ada服务器的变动不会破坏API的向下兼容性，咱们在集成测试阶段将Ada的测试版本部署到一组测试容器中，并请求预先发布的测试URL来逐个进行检查API的功能是否正常。Serverless服务集群也配备了完善的日志分析、性能监控、弹性伸缩、故障恢复和预警机制。

除此以外，咱们还制定了前端开发规范，涵盖了工程规范和JavaScript、TypeScript、Vue.js、CSS、Jest等语言或框架的代码规范。而且在ESLint和StyleLint的基础上研发了配套的检查工具，补充了部分独有的规则。随后又融入到工程化机制、Ada工做台和持续集成流程当中，以帮助业务团队即时发现和纠正问题。

为了进一步保障用户的浏览体验，咱们基于Google Chrome Lighthouse研发了Web性能监控平台，长期追踪核心产品在全国各地的性能表现。目前，基于Sentry的错误跟踪和分析平台也正在试运行中。

后记

Ada已经稳定运行了三年，也持续演进了三年，大致经历了三个阶段：

• “打造内核”阶段，快速定型了Ada的工程化机制和服务器内核，并投入试运行；
• “完善设施”阶段，Serverless架构的周边设施趋于完善，全面提升性能和稳定性；
• “丰富体系”阶段，推出Ada工做台和Widget等一系列周边扩展能力，开始探索更多的可能性；

在将来，Ada还将继续迎接不断更迭的前端技术，响应不断变化的业务需求。服务器端研发能力将再也不局限于BFF层，更会向开发者公开完整的全栈研发能力；Widget只是Ada涉足微前端的一个小小的尝试，咱们还会引入更便于业务深度融合的微前端方案；请求函数映射机制也会从形似FaaS，进一步演进成真正意义上的FaaS……

本文从宏观层面上介绍了智联招聘的大前端架构Ada，并未过多涉及技术细节，若是你们对某个特性感兴趣，能够留言告诉咱们，咱们会撰写专门的文章来详细介绍。

招聘

做为智联招聘的前端架构团队，咱们一直在寻找志同道合的先后端架构师和高级工程师，若是您也和咱们同样热爱技术、热爱学习、热爱探索，就请加入咱们吧！请将简历请发送至邮箱zpfe@group.zhaopin.com.cn，或者微信扫码沟通。