滴滴後市場前端技術體系

通過兩年的發展，做爲汽車後市場各業務重要支撐的前端團隊，隨着業務的不斷髮展，從無到有，從基礎到完善，沉澱了支撐業務的前端技術體系。

背景

對於技術體系建設，咱們是想經過一些方法論，基礎設施，造成一個體系化的解決方案，來更好的知足於咱們的業務，前端團隊，合做團隊的場景化需求。

原則

基於以上業務，前端團隊，合做團隊的背景，咱們技術體系建設的原則是，造成一個前端閉環。對外，基於接口，單向依賴合做團隊。對內，咱們能掌控項目從開發到最終上線，維護的每一個週期的細節。咱們注重體系建設的標準化，開發者體驗，和建設過程的階段化和漸進加強。最終咱們但願咱們的體系能高效，高質量的支撐咱們的業務。

全景

最終來講，咱們的技術體系，垂直方向，關注應用，代碼，工程化，水平方向，將技術體系建設分爲三個階段。

第一階段，主要關注業務的支撐能力。應用上，注重前端與客戶端，服務端的分離。代碼上，引入數據驅動，組件化的編程思想，建立了基礎庫，組件庫，服務型SDK等基礎設施。工程上，關注項目從建立到上線維護各個週期的規範，工具，系統建設。

第二階段，主要關注業務的優化能力。應用上，低配設備場景下，引入ReactNative提高渲染性能，增長容器的離線緩存支持，對於重展現，輕交互的場景，咱們開始作服務端渲染。代碼上，咱們統一使用JSX來作頁面模板，廢棄pugjs，而且基於統一的JSX，開始提供編譯預渲染，服務端預渲染等技術。工程上，增長ReactNative，SSR的項目模板，引入Apollo進行容災兜底開關控制。

第三階段，主要關注業務的驅動能力。應用上，建立後市場獨立應用容器，來統一收斂風險，提高各個渠道下一致性的用戶體驗，下沉販泛前端場景下的公共服務。工程上，咱們基於組件庫作搭建系統，提高運營支持效率，建立測試，mock平臺，提高整個研發體系的效率和質量。

應用

注重前端與客戶端，服務端的分離，客戶端容器優化，頁面性能優化，泛前端服務下沉。

代碼

客戶端代碼

在客戶端，採用數據驅動，組件化的編程思想，基於基礎庫，組件庫，編寫組件邏輯，業務邏輯，使用路由進行頁面管理。

服務端代碼

在服務端，主要提供SSR的功能，總體上基於koa2，React等基礎庫，編寫通用渲染，自動路由等中間件，在控制層作數據預拉取，路由層作請求分發。

工程

工程方面，在項目建立階段提供分場景的項目模板。在開發&調試階段，提供代碼調試，接口調試，代碼質量保證，自動化優化，預渲染等支持。在聯調&測試階段，提供前端環境docker，打包工具，代理工具。在上線階段，作頁面&服務的前端服務上線，靜態資源的CDN上線。在維護階段，提供線上運行情況監控以及容災兜底開關。

組件庫

對於組件庫建設，咱們的目標是跨業務，跨端使用，首先推進垂直於各自業務的產品，設計一塊兒產出跨屏，跨業務的設計標準。基於設計標準，前端關注組件的行爲，佈局，皮膚的常量和變量，設計底層抽象組件。以toast，loading，popover，dialog舉例，行爲上，他們的常量是，都會在文檔流之上，展現一個浮層，他們的變量是，是否會鎖定空白區域，是否能自動關閉等，因此咱們就抽象了更底層的overlay組件。

再以跨端的toast舉例，他們在行爲，皮膚上是一致的，在佈局上，他們的常量是，顯示一個浮層，包含一段文字，他們的變量是，浮層大小，位置不一樣，因此咱們就抽象了底層的toast組件，再去基於它實現各個端下的基礎組件，基於基礎組件，咱們再作業務組件，最終造成一個跨端，跨業務的組件體系。

ReactNative接入

咱們在已有技術體系下，基於ReactNative，封裝了類web的容器，這個容器的交互方式與webview徹底一致，而後，咱們再複用體系中已有的基礎庫，組件庫，和開發模式，最後，咱們複用工程體系，並對部分流程作擴展改造，在打包時，咱們會對ReactNative原生產出的包，進行拆包，靜態資源外鏈，生成一個相似於html的資源索引文件，在維護階段，複用已有的容災監控體系，而且使用舊版本webview進行容災兜底。

穩定性建設

對於穩定性建設，咱們從交互，應用，代碼，工程四個角度着手。在交互上，咱們推進操做的狀態化，錯誤可重試，以及主流程交互鏈路最小化。在應用上，咱們作資源容災，容器容災，線上監控，以及一鍵降級處理。在代碼上，咱們進行外部依賴模塊封裝，外部數據校驗，核心代碼100%測試覆蓋，規範模塊複用，以及後續引入更健壯的語言。在工程上，咱們進行自動化的檢測和優化，複用通過實踐考驗的模塊，工具，制定故障處理的制度和標準。

以上是對滴滴後市場前端技術體系建設的一個簡單介紹。目前總體的體系建設處於階段二的末期，有意加入咱們的同窗，能夠發郵件至wangfeng_cugb@163.com，期待合做。