作者 | 智聯(lián)大前端

Ada 是智聯(lián)招聘自主研發(fā)的演進(jìn)式大前端架構(gòu)。于 2017 年正式投入使用后，又經(jīng)過三年持續(xù)演進(jìn)，全面覆蓋了從研發(fā)到運(yùn)維的各個方面，具備跨技術(shù)棧工程化體系、交互式圖形界面開發(fā)工具、自動化發(fā)布流程、Serverless 運(yùn)行時和完善的監(jiān)控預(yù)警設(shè)施。目前已經(jīng)支撐集團(tuán)內(nèi)數(shù)百個工程，在線 URL 數(shù)量多達(dá)數(shù)千，每日承載請求量逾十億次。

本文將摘取 Ada 的一些關(guān)鍵特性，向大家介紹 Ada 的演進(jìn)成果和設(shè)計思想。

可演進(jìn)的工程化機(jī)制

“可演進(jìn)”是 Ada 最核心的設(shè)計思想。

Ada 的最初版本實(shí)際上是它的內(nèi)核，投入使用后便一直保持每兩至三周一個版本的演進(jìn)速度，不斷地鞏固內(nèi)核，完善周邊設(shè)施，同時開放更多研發(fā)能力。我們希望所有工程都能享受到最新版本的特性，不愿意看到工程版本隨著時間推移變得碎片化。

考慮到 Webpack 的靈活性和復(fù)雜性會不可避免地助長碎片化，我們決定將其隱藏到 Ada 內(nèi)部，由 Ada 來承擔(dān)起統(tǒng)一工程化機(jī)制的責(zé)任。

Ada 規(guī)范了工程的目錄結(jié)構(gòu)，將指定目錄下的次級目錄作為 Webpack Entry 處理，實(shí)現(xiàn)了對 SPA 和 MPA 的同時支持，更容易支撐巨量級的復(fù)雜視圖。

同時，Ada 還統(tǒng)一處理了 Webpack Loader 及插件的使用方式、CDN 地址、Code Split、SourceMap、代碼壓縮等構(gòu)建細(xì)節(jié)，并且自動處理了不同部署環(huán)境之間的差異，標(biāo)準(zhǔn)化了工程的構(gòu)建輸出形式。

針對工程之間可能存在的合理的差異性配置，比如域名、根路徑和語言處理器(Webpack Loader)等等，Ada 還向業(yè)務(wù)團(tuán)隊(duì)提供了一個更加精簡的工程配置文件。

通過工程規(guī)范和工程配置文件，我們把 Ada 塑造成了一名“Webpack 配置工程師”，它會處理好所有涉及到 Webpack 的工作，業(yè)務(wù)團(tuán)隊(duì)無需關(guān)心此類細(xì)節(jié)。我們也因此對工程化機(jī)制有了更強(qiáng)的治理和演進(jìn)能力，能夠在不影響業(yè)務(wù)團(tuán)隊(duì)的情況下進(jìn)行迭代(比如調(diào)整邏輯、修復(fù)問題、升級 Webpack 版本、甚至更換到其他打包工具等等)。

支持多框架

為了更好地支持業(yè)務(wù)特有的技術(shù)訴求，以及應(yīng)對不斷涌現(xiàn)的新框架和新技術(shù)，Ada 從一開始就將多框架支持能力當(dāng)作了一個重要的設(shè)計目標(biāo)。

依托于統(tǒng)一的工程化機(jī)制，Ada 可以根據(jù)各種框架的特點(diǎn)針對性地調(diào)整 Webpack 配置，形成新的腳手架。所有腳手架都延用了一致的工程規(guī)范和工程配置文件，最大程度上保證了一致的開發(fā)體驗(yàn)，減少了框架的切換成本。

我們選擇 Vue.js 作為公司的主要前端框架，并為其研發(fā)了專門的腳手架。Vue.js 腳手架保留了 Vue.js 在研發(fā)效率方面的優(yōu)點(diǎn)，允許開發(fā)者配置多種 CSS 處理器，并對服務(wù)器端渲染提供了良好的支持。

隨后，Ada 又提供了 Weex 腳手架來支持移動端快速開發(fā)，幫助業(yè)務(wù)團(tuán)隊(duì)將一套代碼同時運(yùn)行在瀏覽器、iOS 和 Andriod 中。

針對需要支持舊版 IE 瀏覽器的業(yè)務(wù)，我們選擇了 MVVM 模式的鼻祖框架 Knockout.js，并將 Vue.js 廣受贊譽(yù)的的單文件組件機(jī)制引入到 Knockout.js 腳手架中，為開發(fā)者帶來了和 Vue.js 腳手架一樣的開發(fā)體驗(yàn)。

此外，Ada 還提供了用于開發(fā) Web API 的 Node.js 腳手架，并逐步為它增加了 TypeScript 支持和 GraphQL 研發(fā)能力。

“可演進(jìn)”的 Ada 工程化機(jī)制為新框架預(yù)留了充足的擴(kuò)展空間，也讓我們更容易跟進(jìn)框架的版本更迭，持續(xù)為業(yè)務(wù)團(tuán)隊(duì)開放框架的完整能力。

服務(wù)器端研發(fā)能力

Ada 基于 Koa 研發(fā)了 Web 服務(wù)器，并開放了服務(wù)器端研發(fā)能力，賦予前端工程師更全面的掌控力。不但可以在 UI 層面執(zhí)行權(quán)限校驗(yàn)、重定向和服務(wù)器端渲染(SSR)等操作，還能夠通過研發(fā) Web API 來實(shí)現(xiàn) BFF 層(Backend for Frontend)。完整的服務(wù)器端研發(fā)能力能將前后端的接觸面(或摩擦面)從復(fù)雜的視圖層面轉(zhuǎn)移到相對簡單可控的 BFF 層面，實(shí)現(xiàn)真正意義上的前后端分離，繼而通過并行開發(fā)來最大程度提高開發(fā)效率。

為了進(jìn)一步降低服務(wù)器端研發(fā)難度，Ada 在腳手架目錄結(jié)構(gòu)規(guī)范的基礎(chǔ)上，進(jìn)一步規(guī)范了路由函數(shù)的聲明方式，形成了從 HTTP 請求到函數(shù)的映射關(guān)系。請求函數(shù)是一個異步函數(shù)，Ada 會向它傳遞一個上下文對象。這是一個經(jīng)過了悉心封裝的對象，它包含了當(dāng)前 Request 的所有信息，提供了全面控制 Response 的能力，并且統(tǒng)一了 Web API 和 SSR 的 API。

借助請求函數(shù)映射機(jī)制和自定義上下文對象，Ada 向開發(fā)者提供了一種更加簡單直接的、面向請求的開發(fā)方式，同時隱藏了 Koa 和 Web 服務(wù)器的技術(shù)細(xì)節(jié)。這種設(shè)計使得業(yè)務(wù)團(tuán)隊(duì)可以更加專注于產(chǎn)品迭代，架構(gòu)團(tuán)隊(duì)也能在業(yè)務(wù)團(tuán)隊(duì)無感知的情況下進(jìn)行日常維護(hù)和持續(xù)演進(jìn)(比如調(diào)整邏輯、擴(kuò)充能力、升級 Node.js 版本、甚至更換到其他 Web 服務(wù)器框架等等)。

Serverless 架構(gòu)

在降低服務(wù)器端開發(fā)門檻的同時，我們也希望能夠降低服務(wù)器的運(yùn)維和治理難度，讓前端工程師不必分心于諸如操作系統(tǒng)、基礎(chǔ)服務(wù)、網(wǎng)絡(luò)、性能、容量、可用性、穩(wěn)定性、安全性等運(yùn)維細(xì)節(jié)，從而將更多的精力投入到業(yè)務(wù)和專業(yè)技能上。基于這樣的考慮，我們引入了 Serverless 架構(gòu)。

我們借助容器技術(shù)搭建了服務(wù)集群，將 Ada 演進(jìn)成為一個更加通用的運(yùn)行時，除了函數(shù)發(fā)現(xiàn)以及通過執(zhí)行函數(shù)來響應(yīng) URL 請求之外，還對運(yùn)行時自身提供了全方位的保障。Ada 服務(wù)器有完整的請求生命周期追蹤機(jī)制和日志 API，能夠自動識別和阻斷惡意請求，還能從常見的 Node.js 故障中自動恢復(fù)。此外，服務(wù)集群也具備完善的安全防御和性能監(jiān)控設(shè)施，并實(shí)現(xiàn)了容量彈性伸縮，在節(jié)約成本的同時也能更好地應(yīng)對流量波動。

如此一來，服務(wù)便從工程中脫離出來，成為 Serverless 服務(wù)集群的一員，繼而通過發(fā)布流程來將服務(wù)和工程連接起來。發(fā)布流程也運(yùn)行在云端，分為部署和上線兩個階段。部署階段僅僅執(zhí)行文件構(gòu)建、上傳和注冊，不會對線上版本產(chǎn)生任何影響。部署完成后，就可以在發(fā)布中心上線具體的 URL 版本，并且可以隨時回滾至歷史版本。無論發(fā)布還是回滾，都會即時生效。

URL 粒度的發(fā)布方式更加契合前端業(yè)務(wù)的迭代習(xí)慣，更加靈活，與單體應(yīng)用的整體發(fā)布方式相比也更加安全可控。工程作為一種代碼組織形式，不再承擔(dān)服務(wù)的責(zé)任，可以隨時根據(jù)需要進(jìn)行合并和拆分，也能更好地適應(yīng)虛擬團(tuán)隊(duì)這樣的組織形態(tài)。

工作臺?

和許多框架一樣，Ada 早期也提供了一個命令行工具來輔助開發(fā)。命令行工具的局限性非常明顯，呈現(xiàn)形式和交互形式都過于單一。隨著 Ada 的逐步采用，日常開發(fā)過程中產(chǎn)生的信息和所涉及的操作都愈發(fā)繁雜。我們需要一個更具表現(xiàn)力的工具來進(jìn)一步提高工作效率，便基于 Electron 研發(fā)了 Ada 工作臺。

Ada 工作臺并不是命令行功能的簡單復(fù)刻，而是對前端圖形界面開發(fā)工具的大膽想象和重新定義。我們?yōu)?Ada 工作臺添加了豐富的功能，全面覆蓋了前端工作流程中的開發(fā)、調(diào)試、發(fā)布等環(huán)節(jié)，使它成為真正的一站式前端開發(fā)工具。

我們在 Ada 工作臺中引入了 URL 級別的按需構(gòu)建。開發(fā)者選擇 URL 之后，Ada 工作臺就會自動啟動多個構(gòu)建器來執(zhí)行構(gòu)建，同時以圖例的形式展現(xiàn)構(gòu)建情況。構(gòu)建中出現(xiàn)的任何問題，比如未找到引用或者未通過開發(fā)規(guī)范檢查，都可以直觀地看到提示，點(diǎn)擊提示則能瀏覽更詳細(xì)的信息。按需構(gòu)建既提升了構(gòu)建速度，也在一定程度上有效地避免了 Webpack 在構(gòu)建大型工程時可能出現(xiàn)地各種問題。

除了手工啟動構(gòu)建之外，Ada 工作臺提供了一種更加便利的方式——“訪問即構(gòu)建”，通過監(jiān)聽對 URL 的訪問，自動啟動按需構(gòu)建，并在構(gòu)建完成后主動刷新頁面。“訪問即構(gòu)建”通過自然的本機(jī)調(diào)試行為來觸發(fā)構(gòu)建，免去了手工逐個選擇 URL 的繁瑣操作，很快就成為了開發(fā)者的首選構(gòu)建方式。

雖然服務(wù)器端代碼最終運(yùn)行于 Serverless 環(huán)境，但并不意味著開發(fā)階段只能遠(yuǎn)程調(diào)試，為了便于調(diào)試，Ada 工作臺內(nèi)置了 Ada 服務(wù)器的一個開發(fā)版本，該版本僅對本機(jī)開發(fā)流程進(jìn)行了適配和功能縮減，其余特性和 Serverless 版本保持高度一致，諸如端口沖突、環(huán)境差異等等困擾開發(fā)者的效率障礙在很大程度上都被消除了。

Ada 工作臺還提供了一個交互式的日志查看器，來幫助開發(fā)者瀏覽本機(jī)開發(fā)時輸出的日志。所有日志都會以非常簡約的形式呈現(xiàn)，可以通過點(diǎn)擊來瀏覽明細(xì)，同時也提供了關(guān)鍵字搜索和日志級別過濾等功能，以便開發(fā)者能快速找到所關(guān)心的調(diào)試信息。

發(fā)布流程也被無縫嵌入到 Ada 工作臺中，并且得到了進(jìn)一步增強(qiáng)，能夠方便地執(zhí)行 URL 級別的按需發(fā)布。

目前，Ada 工作臺已經(jīng)成為公司前端技術(shù)體系的重要基礎(chǔ)設(shè)施。前端技術(shù)領(lǐng)域還在不斷涌現(xiàn)出各種新的概念，而 Ada 工作臺的想象空間依舊很大，這也讓我們對它未來能發(fā)揮的作用更加期待。

移動端研發(fā)能力

我們選擇了 Weex 作為移動端的快速研發(fā)框架，幫助業(yè)務(wù)團(tuán)隊(duì)使用熟悉的 Vue.js 語法開發(fā)可以同時運(yùn)行于瀏覽器、iOS 和 Andriod 中的應(yīng)用。

Weex 腳手架遵循了 Ada 的工程化機(jī)制，可以享受 Ada 工作臺提供的開發(fā)和調(diào)試便利。此外，Ada 工作臺還以插件的形式內(nèi)置了 Weex 真機(jī)調(diào)試工具，以便在 App 內(nèi)進(jìn)行調(diào)試。

在開發(fā)模式上，我們最大程度保留了 Web 的特征，為前端工程師帶來更加熟悉的開發(fā)體驗(yàn)，Web 風(fēng)格的 URL 路由方式也在 Native 內(nèi)核中得到了支持。Native 內(nèi)核向 Weex 提供了全方位的支持，包括路由、緩存、視圖組件、互操作 API 等等。針對歷史遺留的 Native 平臺差異問題，則通過我們研發(fā)的 mobile-js-bridge 來將它們封裝成一致的 API。

此外，我們?yōu)?Weex 也提供了 URL 粒度的發(fā)布能力，能夠獨(dú)立于 App 的版本進(jìn)行發(fā)布，極大地提高了移動端的迭代速度和問題響應(yīng)速度。

Ada 充分發(fā)揮了 Weex 在快速迭代方面的優(yōu)勢，廣泛地應(yīng)用于公司的各個移動端產(chǎn)品中，先后幫助業(yè)務(wù)團(tuán)隊(duì)答應(yīng)了多場快速交付戰(zhàn)役。

能力擴(kuò)充

Ada 除了支持開發(fā) Web 頁面，還支持開發(fā)一種特殊的視圖——Widget。作為微前端架構(gòu)的一種實(shí)現(xiàn)，Widget 運(yùn)行在宿主頁面中，可以獨(dú)立開發(fā)和發(fā)布。其設(shè)計目標(biāo)是解耦代碼、流程和團(tuán)隊(duì)，幫助業(yè)務(wù)團(tuán)隊(duì)進(jìn)行跨技術(shù)棧、跨產(chǎn)品以及跨團(tuán)隊(duì)的功能復(fù)用。比如公司所有產(chǎn)品線都需要使用統(tǒng)一的登陸注冊 Widget，后者由平臺團(tuán)隊(duì)來維護(hù)，在保證兼容性的前提下就可以自行迭代演進(jìn)，而不需要各產(chǎn)品線逐版本配合發(fā)布。Widget SDK 負(fù)責(zé)維護(hù) Widget 的生命周期，并提供了類似于 Web Worker 的通信機(jī)制，從而實(shí)現(xiàn) Widget 和宿主頁面在技術(shù)框架、代碼邏輯和發(fā)布流程上的完全獨(dú)立。

Widget 是一種在客戶端復(fù)用能力的機(jī)制，在服務(wù)器端，Ada 提供了請求上下文擴(kuò)展來實(shí)現(xiàn)能力復(fù)用。請求上下文擴(kuò)展是一組可以獨(dú)立開發(fā)和發(fā)布的函數(shù)，發(fā)布之后的函數(shù)會附加到請求上下文，供特定范圍的請求函數(shù)調(diào)用。借助請求上下文擴(kuò)展，業(yè)務(wù)團(tuán)隊(duì)可以更方便地復(fù)用諸如用戶認(rèn)證和授權(quán)之類的服務(wù)器端公用能力。

此外，Ada 服務(wù)器還內(nèi)置了一些常用的第三方模塊的多個版本，比如 vue-server-renderer、axios 和 pg 等等。開發(fā)者可以通過專門的公共模塊 API 來引用這些公共模塊的制定版本。由 Ada 服務(wù)器統(tǒng)一提供的公共模塊一方面提升了工程的構(gòu)建速度，減小了輸出體積，另一方面也規(guī)避了 Webpack 無法處理 Node.js Native 的問題。

在對 GraphQL 進(jìn)行了大量調(diào)研和實(shí)踐之后，我們決定通過工具包的形式提供 GraphQL 開發(fā)能力。GraphQL 工具包同時支持 graphql-js 和 Apollo GraphQL 兩種實(shí)現(xiàn)，并且可以將 Schema 轉(zhuǎn)化為 Ada 請求函數(shù)，從而在 Ada 服務(wù)器中執(zhí)行。GraphQL 工具包會識別 Schema 中的異步 Resolver，并將它們注冊到 Ada Server 的性能監(jiān)控和請求跟蹤機(jī)制中，為業(yè)務(wù)團(tuán)隊(duì)在合并了多個操作的請求中定位問題提供便利。

得益于 Ada 的“可演進(jìn)性”，我們能夠更加穩(wěn)健地響應(yīng)業(yè)務(wù)訴求，持續(xù)不斷地將技術(shù)洞察轉(zhuǎn)換成新的能力，以更加“Ada”的形式提供給業(yè)務(wù)團(tuán)隊(duì)，上述能力擴(kuò)展就是其中的典型示例。

質(zhì)量保障

我們采取了多種技術(shù)手段來保障 Ada 核心代碼的質(zhì)量和 Serverless 服務(wù)集群的穩(wěn)定性。

Ada 核心代碼遵循了相當(dāng)嚴(yán)格的開發(fā)規(guī)范，并通過數(shù)千個單元測試用例 100% 覆蓋了全部代碼和執(zhí)行路徑。針對單元測試可能出現(xiàn)的“非有意覆蓋”情況，我們特別設(shè)計了“混沌模式”，通過隨機(jī)刪除特定的代碼來檢驗(yàn)測試用例的全面性。

為了確保 Ada 服務(wù)器的變更不會破壞 API 的向下兼容性，我們在集成測試階段將 Ada 的測試版本部署到一組測試容器中，并請求預(yù)先發(fā)布的測試 URL 來逐個進(jìn)行檢查 API 的功能是否正常。Serverless 服務(wù)集群也配備了完善的日志分析、性能監(jiān)控、彈性伸縮、故障恢復(fù)和預(yù)警機(jī)制。

后記? ??

Ada 已經(jīng)穩(wěn)定運(yùn)行了三年，也持續(xù)演進(jìn)了三年，大體經(jīng)歷了三個階段：

• “打造內(nèi)核”階段，快速定型了 Ada 的工程化機(jī)制和服務(wù)器內(nèi)核，并投入試運(yùn)行；

• “完善設(shè)施”階段，Serverless 架構(gòu)的周邊設(shè)施趨于完善，全面提高性能和穩(wěn)定性；

• “豐富體系”階段，推出 Ada 工作臺和 Widget 等一系列周邊擴(kuò)展能力，開始探索更多的可能性。

在未來，Ada 還將繼續(xù)迎接不斷更迭的前端技術(shù)，響應(yīng)不斷變化的業(yè)務(wù)需求。服務(wù)器端研發(fā)能力將不再局限于 BFF 層，更會向開發(fā)者公開完整的全棧研發(fā)能力；Widget 只是 Ada 涉足微前端的一個小小的嘗試，我們還會引入更便于業(yè)務(wù)深度融合的微前端方案；請求函數(shù)映射機(jī)制也會從形似 FaaS，進(jìn)一步演進(jìn)成真正意義上的 FaaS……

本文從宏觀層面上介紹了智聯(lián)招聘的大前端架構(gòu) Ada，并未過多涉及技術(shù)細(xì)節(jié)，如果大家對某個特性感興趣，可以留言告訴我們，我們會撰寫專門的文章來詳細(xì)介紹。

總結(jié)

以上是生活随笔為你收集整理的vue前端服务器端口_解密智联招聘的大前端架构 Ada的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。