進(jìn)入2019年，大前端技術(shù)生態(tài)似乎進(jìn)入到了一個(gè)相對(duì)穩(wěn)定的環(huán)境，React在2013年發(fā)布至今已經(jīng)6年時(shí)間了，Vue 1.0在2015年發(fā)布，至今也有4年時(shí)間了。

整個(gè)業(yè)界在前端框架不斷迭代中，也尋找到了許多突破方向，例如跨平臺(tái)中的RN、Flutter，服務(wù)端GraphQL、Serverless，前端和客戶(hù)端的融合越來(lái)越緊密，前端在Node和Electron的加持下，也擴(kuò)展了自己的版圖到服務(wù)端和桌面。

同時(shí)，隨著前端開(kāi)發(fā)越來(lái)越復(fù)雜，整個(gè)前端研發(fā)也經(jīng)歷了人工化->工具化->工程化->智能化的演變。目前各個(gè)大廠(chǎng)在工程化實(shí)踐不斷迭代，出現(xiàn)了許多Low/No Code等前端智能化解決方案，工程化實(shí)踐也深入到研發(fā)的各個(gè)環(huán)節(jié)，不斷提升前端研發(fā)的標(biāo)準(zhǔn)化能力。而且，隨著機(jī)器學(xué)習(xí)的加入，各類(lèi)UI2Code的解決方案也開(kāi)始出現(xiàn)，前端研發(fā)進(jìn)入了一個(gè)完全不同的時(shí)代。

隨著端上能力的不斷增強(qiáng)，現(xiàn)在在端上做的事情越來(lái)越多。首先，數(shù)據(jù)可視化方向，各類(lèi)圖表、地圖、3D等等數(shù)據(jù)可視化的嘗試變得越來(lái)越多。其次，伴隨著人工智能的加持，在端上的人工智能應(yīng)用也變的普及，減少了服務(wù)端的交互，提高了系統(tǒng)的實(shí)時(shí)響應(yīng)能力。最后，隨著Webassembly等技術(shù)的應(yīng)用，有可能將前端運(yùn)行能力再提升一個(gè)檔次，可以進(jìn)行更為復(fù)雜的端上計(jì)算。

為了了解當(dāng)前前端的發(fā)展趨勢(shì)，讓我們從國(guó)內(nèi)各大互聯(lián)網(wǎng)大廠(chǎng)開(kāi)始，了解他們的最新動(dòng)態(tài)和未來(lái)規(guī)劃。

這是解密大廠(chǎng)前端技術(shù)體系的第四篇，前三篇已經(jīng)講述了阿里、騰訊、百度在前端技術(shù)這幾年的技術(shù)發(fā)展，這一篇講講攜程。

我自己是一名從事了多年開(kāi)發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個(gè)月整理了一份最適合2019年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號(hào)并在后臺(tái)私信我：前端，即可免費(fèi)獲取。

攜程技術(shù)全景圖

移動(dòng)技術(shù)產(chǎn)品

移動(dòng)技術(shù)產(chǎn)品分為四大模塊：

• 技術(shù)平臺(tái)：MCD（持續(xù)交付平臺(tái)），APM（性能監(jiān)控平臺(tái)），MTS（日志排障平臺(tái)）和MTP（無(wú)線(xiàn)技術(shù)平臺(tái)）
• 通信層：通信工具，消息推送平臺(tái)，服務(wù)端推送
• 框架層：涵蓋App中通用能力，例如設(shè)備信息、位置信息、熱更新、網(wǎng)絡(luò)通信、配置、用戶(hù)行為埋點(diǎn)等等
• 業(yè)務(wù)層：通用的業(yè)務(wù)組件，例如分享功能、多媒體、日歷、地圖等等

大前端技術(shù)框架

攜程在大前端技術(shù)框架層面主要面向不同應(yīng)用場(chǎng)景沉淀了三個(gè)技術(shù)框架：

• CRN框架：Ctrip React Native，基于RN定制化的框架，并且完善了周邊的打包、部署、監(jiān)控等等能力
• Node平臺(tái)：Node服務(wù)的框架，涵蓋從編碼、編譯、發(fā)布、監(jiān)控全流程
• Hybrid平臺(tái)：用于App內(nèi)Hybrid WebView框架

新技術(shù)探索

• 新技術(shù)：HTTP/2，VOIP
• 新產(chǎn)品：小程序、快應(yīng)用、VR/AR

MCD - 持續(xù)交付平臺(tái)

MCD經(jīng)歷了多次大型迭代，逐步成為攜程內(nèi)部持續(xù)交付平臺(tái)，涵蓋了集成階段、測(cè)試階段、發(fā)布階段和運(yùn)營(yíng)階段的全流程研發(fā)環(huán)節(jié)。

MCD 1.0

MCD1.0的出現(xiàn)解決了系統(tǒng)在線(xiàn)打包的問(wèn)題，并且通過(guò)CI/CD實(shí)現(xiàn)定時(shí)打包、代碼靜態(tài)掃描、自動(dòng)化驗(yàn)包-白屏監(jiān)測(cè)的能力。

持續(xù)集成階段接入了代碼掃描和冒煙測(cè)試的功能，通過(guò)infer和sonar進(jìn)行代碼的靜態(tài)檢查，并且統(tǒng)一集成單元測(cè)試能力，提供單測(cè)的結(jié)果和覆蓋率。

冒煙測(cè)試可以監(jiān)測(cè)白屏情況，并且進(jìn)行多機(jī)型兼容測(cè)試，通過(guò)內(nèi)容和圖像對(duì)比提前發(fā)現(xiàn)問(wèn)題。

通過(guò)集成編譯，持續(xù)減低App編譯的時(shí)長(zhǎng)，提高研發(fā)測(cè)試效率。

MCD 2.0

MCD 2.0重新定義了MCD，涵蓋了更為廣泛的范圍，包含集成、測(cè)試、發(fā)布、運(yùn)營(yíng)環(huán)節(jié)。并且由各個(gè)模塊各自打包生成Bundle，再通過(guò)Bundle集成達(dá)到2~3分鐘極速出包的能力。

同時(shí)MCD也增強(qiáng)了許多能力：

• 發(fā)布升級(jí)：對(duì)于Hotfix、Bundle、Hybrid/RN等內(nèi)容實(shí)現(xiàn)動(dòng)態(tài)下發(fā)，實(shí)現(xiàn)白名單、灰度發(fā)布能力，通過(guò)差分方式提高下載效率，并且提供大盤(pán)實(shí)時(shí)查看下發(fā)情況。
• 配置中心：支持按照平臺(tái)、版本、渠道、ABTest等不同維度下發(fā)配置信息，實(shí)現(xiàn)App配置信息管理能力。
• 崩潰收集：App Crash/JS Error的收集，并且支持實(shí)時(shí)告警，多維度搜索，代碼反查等能力。
• App Size管理：基于業(yè)務(wù)模塊進(jìn)行App包大小管理

APM - 性能監(jiān)控平臺(tái)

APM性能監(jiān)控平臺(tái)主要關(guān)注性能、崩潰、異常等數(shù)據(jù)的監(jiān)控，攜程在性能與異常監(jiān)控上也做了許多工作：

• 網(wǎng)絡(luò)性能：收斂了網(wǎng)絡(luò)通信SDK，統(tǒng)一了三端的網(wǎng)絡(luò)通信底層能力，網(wǎng)絡(luò)SDK可以統(tǒng)一管理IP池、鏈路池、請(qǐng)求池，達(dá)到性能最優(yōu)化。并且可以監(jiān)控在網(wǎng)絡(luò)請(qǐng)求全鏈路中的錯(cuò)誤情況，實(shí)現(xiàn)業(yè)務(wù)場(chǎng)景聯(lián)通成功率99%。

• 頁(yè)面性能：在頁(yè)面性能統(tǒng)計(jì)口徑上采用TTI，通過(guò)遍歷檢測(cè)頁(yè)面文本的變化來(lái)判斷是否到達(dá)TTI。根據(jù)不同的頁(yè)面形態(tài)，制定了不同的性能指標(biāo)。

• 異常處理：收集異?？D的情況并且自動(dòng)歸屬到不同業(yè)務(wù)團(tuán)隊(duì)，崩潰信息收集可以固化下來(lái)用戶(hù)的操作路徑和相關(guān)信息。

MTS - 日志排障平臺(tái)

收集App中所有相關(guān)數(shù)據(jù)，例如網(wǎng)絡(luò)請(qǐng)求、頁(yè)面跳轉(zhuǎn)、圖片請(qǐng)求、用戶(hù)行為埋點(diǎn)、Cat日志、Web服務(wù)日志，并且通過(guò)時(shí)間軸將所有數(shù)據(jù)串聯(lián)起來(lái)，可以幫助研發(fā)同學(xué)快速還原現(xiàn)場(chǎng)排查問(wèn)題。

在日志展示上以一次用戶(hù)session為集合，按照時(shí)間軸顯示不同的頁(yè)面信息，同時(shí)在每個(gè)頁(yè)面的詳細(xì)信息中會(huì)提供當(dāng)前頁(yè)面所有的網(wǎng)絡(luò)請(qǐng)求、用戶(hù)行為埋點(diǎn)、研發(fā)自主埋點(diǎn)等等內(nèi)容。

MTP - 無(wú)線(xiàn)技術(shù)平臺(tái)

打造無(wú)線(xiàn)技術(shù)平臺(tái)，將App中通用能力沉淀下來(lái)，并且復(fù)用到多個(gè)App中，避免重復(fù)造輪子，提高研發(fā)標(biāo)準(zhǔn)化與效率。同時(shí)平臺(tái)治理提供例如注冊(cè)服務(wù)、排查故障、服務(wù)熔斷、查看調(diào)用等功能，方便平臺(tái)化技術(shù)的運(yùn)營(yíng)。

CRN - Ctrip React Native

CRN是攜程內(nèi)部基于React Native進(jìn)行深度定制的移動(dòng)端跨平臺(tái)/動(dòng)態(tài)化框架，目前已經(jīng)在實(shí)際的業(yè)務(wù)項(xiàng)目中大規(guī)模應(yīng)用，頁(yè)面規(guī)模超過(guò)100個(gè)，PV數(shù)目已經(jīng)超過(guò)傳統(tǒng)Hybrid H5頁(yè)面的2倍多。

基于React Native框架優(yōu)化，定制成適合攜程業(yè)務(wù)的跨平臺(tái)開(kāi)發(fā)框架 - CRN，提供從開(kāi)發(fā)、發(fā)布、運(yùn)維的全生命周期支持。

• 開(kāi)發(fā)框架，主要是提供在開(kāi)發(fā)階段的支持。包括工具&文檔、組件和解決方案、跨平臺(tái)打通和代碼托管功能。工具主要包括CLI和Packer，文檔包括API文檔和設(shè)計(jì)文檔，跨平臺(tái)主要是抹平平臺(tái)差異組件間的API，代碼托管是為了方便業(yè)務(wù)團(tuán)隊(duì)，特別是新加入CRN開(kāi)發(fā)的團(tuán)隊(duì)，可以參考已有業(yè)務(wù)代碼快速上手。
• 性能優(yōu)化，主要是為了解決首屏渲染的性能問(wèn)題和RN框架的穩(wěn)定性問(wèn)題。為了解決首屏渲染性能問(wèn)題，我們先后開(kāi)發(fā)了框架拆分和預(yù)加載、業(yè)務(wù)按需加載、業(yè)務(wù)預(yù)加載和漸進(jìn)式渲染方案，稍后會(huì)就這些方案做詳細(xì)介紹。
• 發(fā)布運(yùn)維，主要是提供發(fā)布系統(tǒng)和性能、錯(cuò)誤監(jiān)控平臺(tái)，讓業(yè)務(wù)開(kāi)發(fā)同事能夠有完備的系統(tǒng)去發(fā)現(xiàn)和解決線(xiàn)上問(wèn)題。

Node平臺(tái)

攜程在2017年9月份正式上線(xiàn)了Node.js應(yīng)用，歷經(jīng)2年時(shí)間，應(yīng)用數(shù)實(shí)現(xiàn)了8倍增長(zhǎng)，覆蓋公司33個(gè)業(yè)務(wù)部門(mén)。

Node.js的工程化建設(shè)，涵蓋開(kāi)發(fā)、構(gòu)建、測(cè)試、發(fā)布、運(yùn)維各個(gè)環(huán)節(jié)：

• 開(kāi)發(fā)：根據(jù)業(yè)務(wù)場(chǎng)景提供不同的腳手架工程（SSR、DA Service、Desktop Application），提供核心中間件、數(shù)據(jù)Mock平臺(tái)、Docker化的開(kāi)發(fā)環(huán)境。
• 構(gòu)建：安裝依賴(lài)包，檢查依賴(lài)包版本，構(gòu)建目標(biāo)文件，同時(shí)提供代碼靜態(tài)掃描，安全掃描的能力。
• 測(cè)試：提供自動(dòng)化測(cè)試，集成測(cè)試，灰度測(cè)試和壓力測(cè)試
• 發(fā)布：提供攜程云和公有云發(fā)布能力，灰度發(fā)布和回滾能力，實(shí)現(xiàn)內(nèi)部npm包開(kāi)發(fā)發(fā)布流程與Git高度集成
• 運(yùn)維：日志監(jiān)控和應(yīng)用排障的能力

GraphQL-BFF

GraphQL-BFF 的核心思路是，將多個(gè) services 整合成一個(gè)中心化 data graph。

每個(gè) service 的數(shù)據(jù)結(jié)構(gòu)契約，都放入了一個(gè)大而全的 GraphQL Schema 里；如果不做任何模塊化和解耦，開(kāi)發(fā)體驗(yàn)將會(huì)非常糟糕。每個(gè)團(tuán)隊(duì)成員，都去修改同一份 Schema 文件。

這明顯是不合理的。GraphQL-BFF 的開(kāi)發(fā)模式，應(yīng)該跟 service 的領(lǐng)域模型，有一一對(duì)應(yīng)的關(guān)系。然后通過(guò)某種形式，多個(gè) services 自然整合到一起。

技術(shù)選型上，開(kāi)發(fā)語(yǔ)言選用了 TypeScript，跑在 Node.js v10.x 版本上，服務(wù)端框架是 Koa v2.x 版本，使用 apollo-server-koa 模塊去運(yùn)行 GraphQL 服務(wù)。

Apollo-GraphQL 是 Node.js 社區(qū)里，比較知名和成熟的 GraphQL 框架。做了很多的細(xì)節(jié)工作，也有一些相對(duì)前沿的探索，比如 Apollo Federation 架構(gòu)等。

寫(xiě)在最后

攜程在組織架構(gòu)上有基礎(chǔ)研發(fā)團(tuán)隊(duì)進(jìn)行保障，在大前端領(lǐng)域能夠收斂、沉淀眾多的基礎(chǔ)平臺(tái)服務(wù)、技術(shù)框架，形成了一套比較完整、統(tǒng)一的基礎(chǔ)框架能力，很好的支撐了多App、多業(yè)務(wù)的快速發(fā)展。

本篇文章力圖從大前端各個(gè)方面去整理總結(jié)攜程當(dāng)前的技術(shù)體系，但一定會(huì)有許多遺漏，同時(shí)開(kāi)放信息畢竟有限，希望相關(guān)同學(xué)可以一起多多交流。

這是大廠(chǎng)前端技術(shù)體系解密系列第四篇，后續(xù)還會(huì)有其他大廠(chǎng)的內(nèi)容，精彩還將繼續(xù)，有興趣的同學(xué)可以關(guān)注小編，第一時(shí)間獲得信息。

原文鏈接：https://mp.weixin.qq.com/s/IbORf-lQOLyaS8sBO5ILOw
作者：奶爸碼農(nóng)

推薦閱讀：陽(yáng)高縣桑星緯手機(jī)發(fā)貨中心