一、背景概要
參照Apple、Booking和AirBnB等一衆品牌在國際化的程序中始終保持品牌認知的一緻性，Ctrip和Trip（以下簡稱為“C&T”）并駕齊驅的過程中，集團對于不同國度和不同客群的品牌效應有趨于統一的訴求。
研發的整體鍊路上同樣存在由于C&T相似需求導緻的重複開發工作量，服務鍊路上并沒有完全做到抽象與統一，前端鍊路上存在複用率低以及缺失動态化能力的情況。
多終端存在功能不對齊的情況，造成使用者體驗不一緻，結合C&T的場景進一步加劇了功能子產品複用率低以及研發資源使用率低的問題。
綜上三點，C&T一緻與多端融合的問題等待技術給出答案。
二、調研分析
分析階段我們從品牌一緻和多端一緻兩個方面去探索技術可行性。
2.1 品牌一緻
品牌一緻性的源頭在于設計規範一緻和功能實作一緻。
設計規範一緻：
- 對視覺元素進行細顆粒度的設計規範限制，形成一套或多套适應不同業務場景的設計規範。
- UED團隊與前端研發團隊通過設計規範與對應的工具庫，實作品牌語言的呈現與動态轉變能力。
功能實作一緻：
- 統一使用者界面和互動流程，保證不同品牌的相同功能在使用者體驗方面達成一緻。
- 對核心流程與常用功能進行功能一緻性的設計，同時針對不同終端優化互動體感。
在不解決品牌一緻性的情況下，UED、産品和研發都需要付出雙倍或雙倍以上的工作量才能為兩個平台的使用者提供服務。
2.2 多端一緻
C&T和多終端在鍊路上幾乎都保持相對獨立的态勢。
目前多端不一緻的現狀，從研發角度去分析展現在三個方面：
1）多終端隸屬于不同的研發團隊，研發資源的配置設定往往随着訂單量的差異有所傾向。這種背景下會衍生出兩類問題：
- 多終端之間的需求疊代數量和頻率會出現“代差”，即功能的差異性和不一緻，這種“代差”的絕對時間長度或在6個月以上。
- 不同終端的研發團隊的技術視野受限，降低了前端研發資源的可流通性。
2）各終端間的“代差”需要Controller層的服務做更多的相容，随着相容代碼的增多，Controller按不同的終端訴求分裂成了一對一的架構形态，且公用的代碼部分也日益減少，進一步加劇了多端不一緻的情況。
3）Controller層是由服務端開發負責，在多個Controller服務執行個體的場景下，由于“代差”的緣故，代碼的備援（Controller層）與抽像邏輯的費力程度使得服務端的研發資源也成為了資源瓶頸。同時前後端代碼的分界線也缺少限制，加劇了多端整個鍊路的差異化和不一緻性。
三、解決方案
3.1 品牌一緻
3.1.1 設計規範一緻
UED的設計風格分别屬于 TDS（Trip Design System）與 CDS（Ctrip Design System）兩個不同的設計體系，在諸多設計元素的運用上存在差異。
逐漸實作品牌一緻的大背景下，兩套存在差異的設計體系需要完成一些“互相認同”的妥協。
我們采用的方案：
1）通過設計團隊建構 Design System，由全體設計團隊在品牌主題和設計理念的指導下達成一緻的共有設計原則集合體，如色彩的運用、字号的等級劃分等。達成一緻的設計原則可以通過 Design Token 來定義相同元素在兩個不同設計風格中的狀态。
2）由于 Design System 中的 Design Token 是對元素級顆粒度的設計限制，同時功能頁面是通過無數個元素組合而成，故而 Design Token 可以通過配置化實作靈活性，也為UED與前端研發間建立了契約。
3）通過 Design System 建構出一套具有細顆粒度的設計規範限制，同時能夠适配目前Ctrip和Trip兩個品牌設計現狀，最後可以通過該套 Design System 低成本且靈活得支援品牌一緻的最終目标。
3.1.2 功能實作一緻
絕大部分的現狀中，不同的品牌面向的地區客群決定了視圖層面中設計語言的差異，而這些差異并不會導緻業務功能實作上的差別，如“支付訂單”功能，在不同的地區客群中都有着明确且唯一的認知。
但從不同終端的角度上觀察，相同的功能實作在使用者的互動方面存在一些差異，如App與H5終端上對于明細資訊的展現形式存在不同。
- App端會更傾向于使用蒙層或新開界面的展現形式，是因為可以通過左右滑動螢幕的手勢來關閉，給使用者一種單手互動的流暢感；
- 而H5端由于是通過手機浏覽器App來承載，手機浏覽器App作為容器，在左右滑動螢幕的手勢下會喚起浏覽器回退網頁的操作，繼而影響互動目的。是以H5端會更多采用浮層的展現形式，通過點選螢幕空白區域關閉的方式來減少使用者誤操作的情況。
基于上述分析，我們給出了建議方案：
1）服務側整理與抽象剝離功能模型與視圖模型，将Controller層中的業務功能邏輯下沉至Integrated Service層和Micro Service層，在技術底層實作功能實作的統一和收口。
2）視圖模型轉由BFF層來完成抽象與差異化定制，實作多終端的渲染共用一套BFF服務。
3）多終端的渲染通過前端業務元件庫承載，前端業務元件庫的作用是抹平各終端在互動操作上的差異，視圖模型作為銜接BFF服務與前端渲染的契約。
3.2 多端一緻
分析了多端不一緻的現狀後，倘若Controller服務層可以支援多終端複用，即在"功能實作一緻"章節中提到的BFF層解決方案，則可以有效解決服務端研發資源瓶頸的問題。
同時，由于BFF層支援的是多終端，倘若拓展前端開發資源的能力至BFF層，既可以進一步釋放服務端研發資源壓力，還可以減少前後端研發資源的溝通成本。
随着這種工作模式的推進，“代差”的問題終将被解決，研發資源的能效也會得到較大的提升。
3.2.1 BFF架構設計
在BFF模式中，不同的前端應用（如Web、移動端等）共享一套業務邏輯和視圖模型，支援獨立部署。這樣做的好處是，盡管不同的前端可能有不同的需求和特性，但它們可以利用同一個服務來處理視圖模型，同時還能根據各自平台的特點進行必要的定制化處理。這種架構模式既保證了多端應用的一緻性，又保留了靈活性和可擴充性。
架構設計方面需要從引擎、內建服務、BFF服務三層入手，分别代表：
- 引擎：負責底層資料的生産，不同的業務領域模型持有和加工層
- 內建服務：負責抹平C&T資料的差異性，不同業務領域模型的聚合層
- BFF服務：負責維護業務領域模型和視圖模型的關系，多終端與動态化能力的支援層
3.2.2 動态化能力
上圖的架構設計中可以發現在BFF層存在 Service Driven Layer，它的作用正是支援前端的動态化能力建設。我們從幾個方面來完整闡述實作的思路。
由于通過BFF層來統一處理視圖模型，但在不同的業務場景下，仍然會存在個性化的差異，這些差異通過Service Driven Layer與前端元件庫協同解決。
以實戰成果來舉例，酒店清單頁中的酒店卡片與酒店營銷頁中的酒店卡片在展現形式上存在将近70~80%的一緻性，個性化部分将如何解決？
售賣主流程
營銷流程
在元件庫方面，我們将頁面拆解成子產品集的結構組合，将子產品拆解成元件集的結構組合，将元件結構拆解成元素集的結構組合，這樣的拆解鍊路可以提煉出多個次元的結構，這些結構（Structure）會幫助我們在編譯時與運作時，更加靈活且有規則的實作動态化能力。
樣式部分的處理運用了類似的思路産生（Style），再通過與UED團隊的Design System對接，實作從視覺設計到産品實作的全鍊路規範與動态化能力。
最後通過Service Driven Layer，BFF層除了下發子產品所需的視圖模型（ViewModel）資料之外，還會下發兩項可選的内容：
- 頁面與元件結構（Page/Component Structure）
- 動态樣式（Component Style）
通過這樣的組合，在不同的業務場景下，無論是靜态編碼還是動态下發，都可以遵循相同的理念去建構并渲染前端頁面，同時這些能力也将大幅提升研發資源的能效。
四、落地方式
我們逐漸來解析落地過程：
1）圖中的左半部分為開發階段，前端部分的落地方式
- UED與前端通過Design System的Design Token作為契約進行交流
- 差異化需求的樣式相容，需要通過Style Config來統一收口完成，其中一方面需要依賴Design Token，另一方面需要元件庫的建設和支援
- 相同的，差異化需求的結構組合，需要通過Structure Config統一收口完成
2） 圖中的右半部分為線上階段，服務部分的落地方式
- BFF Service完成多端一緻的能力落地，将Intergrated 和 Micro Service中的業務模型轉換成視圖模型
- Style Config 與Structure Config 分别實作樣式與結構的動态化能力
- 通過Server Driven Layer聚合，通過終端代碼的運作時落
五、論證成果
從0到1落地BFF支撐C&T雙平台、多終端和動态化，逐個項目論證技術可行性，搭建所需的技術支撐能力，同時清理曆史技術債，加快研發效能。
C&T Web 酒店詳情頁
目前C&T Web側酒店詳情頁均已支援該架構設計。共用一套BFF功能接口，實作子產品化功能接口。過程中完成了前端和服務端的雙端邏輯下沉工作，提升研發效率的同時拓展了前端職能。
改造範圍涉及Ctrip H5、小程式、Trip Online、Trip H5共5個終端，實作17個功能子產品接口的改造，多端功能子產品收口落地BFF層，實作多端一緻和複用，提高研發能效。同時減少多個終端的前端Size 27~39%。
改造過程中實作了從業務領域模型轉換成抽象視圖模型，同時兼具了不同終端可能存在的個性化子產品和功能，進而驗證了該架構設計同時具備前端動态化能力。
C&T 多終端 酒店賣點頁
使用BFF服務結合攜程自研一碼多端架構xTaro，完成C&T共7個終端酒店賣點頁的落地工作。
該項目進一步論證了解決方案的可行性，大幅優化了研發資源能效以及整體工作流，在多端一緻的場景下，通過元件庫完成了一碼多端的能力落地。
結語
如此全鍊路的解決方案在落地過程中需要摸着石頭過河，大膽設想結合小心論證，時刻保持與相關團隊的溝通，為了一個共同的目标前行。
我們希望将這套方案中各環節的技術成果産品化，提供給更多具有相同需求的研發團隊，以此共勉。
作者:佳璐，攜程研發總監，專注大前端核心價值的建構和創新。
來源-微信公衆号:攜程技術
出處:https://mp.weixin.qq.com/s/2xfd-KczeVF_ZhKNwZu-KQ?poc_token=HDlEK2ajsO_AalzyfmRuoDWcNWuf0-iczmyG4yNq