作者 | 智聯大前端

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 服務集群也配備了完善的日志分析、性能監控、彈性伸縮、故障恢復和預警機制。

后記? ??

Ada 已經穩定運行了三年，也持續演進了三年，大體經歷了三個階段：

• “打造內核”階段，快速定型了 Ada 的工程化機制和服務器內核，并投入試運行；

• “完善設施”階段，Serverless 架構的周邊設施趨于完善，全面提高性能和穩定性；

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

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。