解密智聯招聘的大前端架構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，或者微信掃碼溝通。