支付寶前端團隊詳解基於Node.jsWeb框架Chair
Chair是支付寶前端團隊推出的,基於Node.js的Web框架,適用於大部分的Web應用。
本文簡要介紹Chair的設計思想、功能架構和開發狀況。
一、Chair的由來和設計思想
歷史上,支付寶前端專案都是直接基於Java後端開發的。這種架構下,前端工程師做出網頁模板(基於velocity模板引擎的vm檔案),交給後端的Java引擎渲染。支付寶採用的Java引擎是名為Sofa的MVC框架。
對於前端工程師來說,這種架構有很多不方便的地方。首先,需要了解後端的實現,並且依賴開發環境中的dev伺服器進行除錯開發;其次,開發細節需要與後端的Java工程師溝通,交流成本相當大;最後,難以發起技術創新,因為只要涉及後端的調整,推動起來非常困難。在前端技術日新月異的今天,這已經越來越成為前端工程師心中的痛。
Chair框架就是在這種背景下誕生的,我們希望通過加入一個Node層,加速前端開發,提升研發效率,提高網站整體效能和系統的可維護性。
作為Sofa的替代,Chair直接與底層的Java服務通訊,而客戶端瀏覽器則與Chair通訊,這樣就不使用Sofa了。前端工程師因此可以完全不碰Java,使用熟悉的JavaScript語言,同時在瀏覽器和伺服器兩端進行快速迭代。
事實上,Chair這個名字就是來自跟Sofa的對比,因為兩者都能坐人,但是椅子(Chair)比沙發(Sofa)輕多了。支付寶已經有了沙發,我們想再為它添一把椅子。
Chair為前端開發,帶來了很多便利。
- 提高了研發效率,前端工程師直接可以改動伺服器,避免了與Java後端不必要的溝通成本。
- 更清晰的職責劃分,前端針對表現層(View)開發,後端針對業務和資料(Controller和Model)開發。
- 更好的⼯程化,前端自己就能完成單元測試、整合測試和自動釋出。
- 節省人工,同樣的元件(比如模板和路由)只需要寫一次,不用再為瀏覽器和伺服器各寫一遍了。
- 預期的效能提升,Node作為伺服器端時,有很強的HTTP請求處理能力。
目前,Chair已經投入了生產環境,與Sofa各自支援著不同的支付寶Web應用。預計不遠的將來,會出現更多基於Chair的Web應用。
二、Chair的結構
Chair的基礎程式碼,是基於Koa框架的再開發,使用的語言是下一代JavaScript——ECMAScript 6,模板引擎是Nunjucks,但也可選用其他引擎。同時相容Velocity模板,現有絕⼤部分模板⽂件⽆需修改也能正常渲染。
整個框架從瀏覽器到伺服器,一共分成五層:
- 路由層(routers):適配不同路徑的HTTP請求
- 中介軟體層(middlewares):加工HTTP請求
- 控制器層(controllers):部署業務邏輯
- 服務層(services):提供內部的統一API,供不同業務呼叫
- 代理層(proxy):負責與Java服務通訊,提供統一格式的資料
除了模板引擎以外,Chair還部署了一些功能元件,比如mock(資料模擬)和logger(日誌器)。
Chair根據業務實際需求和現有架構高度定製。雖然從結構上看,Chair可以提供完整的後端功能,但目前主要用於模板渲染和路由。真正的業務邏輯和資料處理,還是要交給後端的Java服務。
三、效能提升
Node的加入,為很多功能提供了很大的效能改進。根據壓測的結果,使用Chair(下圖的web)比使用原來的方案(下圖的portal),響應時間和系統負載能力至少提高一倍以上。
四、Chair的開發進度
12月上旬,Chair釋出了0.5版。除了修正Bug,這一版主要新增了以下功能。
- 支援 cookie session, 不依賴 tair
- 支援連線 MySQL資料庫
- 支援mvc stat 和 rpc stat 日誌統計
- 支援統一導航 uninav 模板
- 頁面資料模擬 pagemock
目前,Chair正處於密集開發之中,預計明年上半年釋出1.0.0版。
該文章來自阿里巴巴技術協會(ATA)精選集
作者:兔哥
相關文章
- 前端團隊前端
- 中小團隊落地配置中心詳解
- [深圳]香港支付寶前端團隊直招-最快當天進面試流程前端面試
- 基於團隊模式開發中介模組模式
- layUI前端框架使用詳解_layUI前端框架最新最完整UI前端框架
- 前端小團隊建設前端
- 支付寶techday分享–成長、團隊、信任
- 中小團隊基於Docker的devops實踐Dockerdev
- SharePointFramework基於團隊的開發(四)Framework
- 基於 iframe 的微前端框架 —— 擎天前端框架
- OpenDoc – 前端團隊CodeReview制度前端View
- OpenDoc - 前端團隊CodeReview制度前端View
- 詳解何愷明團隊最新作品:源於Facebook AI的RegNetAI
- 團隊軟體開發_基於windows下截圖軟體關於NABC框架的特點Windows框架
- 網易考拉前端團隊 - 大量招前端啦!前端
- SharePoint Framework 基於團隊的開發(三)Framework
- SharePoint Framework 基於團隊的開發(二)Framework
- SharePoint Framework 基於團隊的開發(一)Framework
- SharePoint Framework 基於團隊的開發(五)Framework
- 初探團隊基於session的探索性測試Session
- SharePoint Framework 基於團隊的開發(四)Framework
- 整個微信設計團隊被支付寶“挖走”了?
- 打造前端團隊的 React CLI 工具前端React
- 前端團隊如何提升工作效率前端
- 前端工程化(2):快速搭建基於angular團隊程式碼提交規範的工作流前端Angular
- 關於scrum團隊的理解Scrum
- 團隊開發框架Tdf.NET概述框架
- PDD介紹美菜前端團隊(上)前端
- 軟體工程團隊的基於領域的結構 - snaptravel軟體工程APT
- eBPF Cilium實戰(1) - 基於團隊的網路隔離eBPF
- 如何快速為團隊打造自己的元件庫(下)—— 基於 element-ui 為團隊打造自己的元件庫元件UI
- 詳解 Go 團隊不建議用的 unsafe.PointerGo
- 莫隊詳解
- SkyReach 團隊團隊展示
- 關於個人規劃和團隊
- 前端團隊程式碼評審 CheckList 清單前端
- 前端資料模型Model,適用於多人團隊協作的開發模式前端模型模式
- 基於Gin框架的web後端開發(七): Gin框架的檔案上傳詳解框架Web後端