經過兩年的發展，作為汽車後市場各業務重要支撐的前端團隊，隨著業務的不斷髮展，從無到有，從基礎到完善，沉澱了支撐業務的前端技術體系。
背景
對於技術體系建設，我們是想通過一些方法論，基礎設施，形成一個體系化的解決方案，來更好的滿足於我們的業務，前端團隊，合作團隊的場景化需求。
原則
基於以上業務，前端團隊，合作團隊的背景，我們技術體系建設的原則是，形成一個前端閉環。對外，基於介面，單向依賴合作團隊。對內，我們能掌控專案從開發到最終上線，維護的每個週期的細節。我們注重體系建設的標準化，開發者體驗，和建設過程的階段化和漸進增強。最終我們希望我們的體系能高效，高質量的支撐我們的業務。
全景
最終來說，我們的技術體系，垂直方向，關注應用，程式碼，工程化，水平方向，將技術體系建設分為三個階段。
第一階段，主要關注業務的支撐能力。應用上，注重前端與客戶端，服務端的分離。程式碼上，引入資料驅動，元件化的程式設計思想，建立了基礎庫，元件庫，服務型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，期待合作。