出海 | 携程多品牌融合与多端一致的前端方案实践

作者简介

佳璐，携程研发总监，专注大前端核心价值的构建和创新。

一、背景概要

参照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按不同的终端诉求分裂成了一对一的架