关于客户端:基于优酷业务特色的跨平台技术-GaiaX-开源解读

作者：别志华、祁强

GaiaX 跨端模板引擎，是在阿里优酷、淘票票、大麦内宽泛应用的 Native 动态化计划，其外围劣势是性能、稳固和易用。本系列文章《GaiaX 开源解读》，将带大家看看过来三年 GaiaX 的倒退过程。

GaiaX 开源地址：https://github.com/alibaba/GaiaX

GaiaX 的起源

GaiaX 是为了解决多端卡片化 UI 组件的研发效力瓶颈问题孵化而来的，在过来三年中通过屡次迭代，逐渐实现了从设计研发一体化到模板研发体系的演进工作。

就像大部分优良的开源框架一样，GaiaX 是从优酷本身的业务特色和业务问题登程，提出的一套解决方案，再通过一直提炼和拓展，从而造成了当初的模板研发体系，其目标是帮忙设计、开发、测试来提高效率，解决以后优酷 App 迭代过程中碰到的研发效力瓶颈问题。

上面会从优酷的业务特色、客户端研发效力的瓶颈问题、提出解决研发效力问题的思路这三个方面别离来进行介绍，带大家进一步理解 GaiaX 的起源。

业务特色

优酷是阿里巴巴文化娱乐团体的外围用户引擎，是中国当先的在线视频平台，现反对 PC、电视、挪动三大终端，兼具版权、自制、合制、自频道、直播等多种内容状态。

在优酷继续改善经营效率和老本的背景下，优酷 App 曾经通过技术手段反对了电视、挪动、车载等多种设施场景，并一直为数千万用户提供更优质的应用体验。通对优酷 App 业务场景的剖析，咱们能够提炼出三个次要的业务特色：

内容散发场景为主 。优酷 App 的业务状态次要蕴含散发场景和生产场景：散发场景的指标是以简略、高效的模式的疏导用户返回生产场景；生产场景的指标则是进行视频内容的生产或者会员权利的生产。

卡片化的 UI 组件 。优酷 App 的 UI 组件彼此之间具备高度的类似相性、能够被结构化，并且能够组合应用。例如：左图右文的组件、上图下文的组件、单行多列、多行多列、Banner 图、多类型组合等。

多屏多设施 。优酷 App 目前反对 Phone（Android、iOS）、Pad（Android、iOS）、Mac（iOS）、车机（Android）、电视（Android）等设施，为了升高研发老本和进步迭代效率，研发团队逐步在这些设施上应用同一份代码，一个 UI 组件会在多个设施和不同尺寸的屏幕上进行展现，这就对 UI 组件的实现提出了更多的适配要求。

研发效力的瓶颈问题

咱们都晓得，想要解决一个问题的前提是将一个问题定义分明，那么该如何定义优酷 App 迭代过程中碰到的研发效力问题呢？

软件行业倒退至今，各家公司内的软件开发迭代流程虽略有不同但也大抵一样，能够将迭代流程分为业务环节、产品环节、设计环节、研发环节、测试环节、公布环节，各个环节彼此配合、相互协作能力顺利将产品公布。

在迭代流程中的各个环节也别离对应着各自的工夫周期，不同的工夫周期内所做的事和碰到的问题也不一样。一个迭代通常蕴含的工夫周期有：业务周期、产品周期、设计周期、研发周期、测试周期、公布周期。上面别离简要介绍一下每个周期内各自的痛点和瓶颈问题：

• 业务周期：需要变更、紧急需要、上游依赖方排期艰难，冀望上游依赖方能疾速消化需要和上线迭代。
• 产品周期：业务变更频繁、上游排期艰难、需要迭代开发须要跟版公布、上游需要吞吐不现实。
• 设计周期：业务和产品需要变更频繁、设计稿短少规范化、设计稿内容不能复用、设计走查不不便，冀望能将设计稿规范化、进步设计稿元素复用率。
• 研发周期：双端开发、需要并发、排期短、跟版公布、设计稿不标准、性能保障，冀望能进步组件开发效率、能缩小人力投入、需要能疾速公布、组件性能能有保障。
• 测试周期：测试周期短、BUG 收敛慢、代码改变范畴不明确。
• 公布周期：紧急集成导致公布节点不稳固。

当咱们将注意力集中到研发周期内，咱们的痛点问题就十分清晰且明确：

• 需要开发须要多平台且要多份人力。
• 需要吞吐量有余产品排期须要进行 PK。
• UI 组件构建过程中复用率低无奈疾速开发 UI 组件。
• 设计稿不标准须要开发本义。
• 短少适合的效率工具帮助 UI 走查。

当问题被定义分明后，剩下的就是提出计划、落地计划、查看计划成果了。上面让咱们看看 GaiaX 团队解决问题的思路是怎么的。

解决问题的思路

当综合业务背景和研发效力的瓶颈问题一起来看，能够拆解进去诸多业务需要的因素，这些都是在研发周期内的痛点问题，例如：内容散发、多业务、多屏多设施、UI 组件卡片化、UI 组件的构建效率、UI 组建的复用水平、进步需要吞吐量，这些需要因素都是在解法计划中要有所体现并进行针对性解决的。

解决问题的思路是找到一个具备如下解法因素的技术计划：UI 组件可被规则化易于复用、具备跨平台能力可缩小人力投入、具备极致的性能可让开发人员不必重复调优、能复用现有优酷的技术栈和技术能力来保障一致性、具备动态性可动静公布需要以满足业务疾速迭代的需要、通过简略的解决就可适配多屏幕多设施。

通过一系列调研后，发现市面上并没有比拟贴合咱们解法因素的技术计划，于是咱们开启了自研的路线，现实中的 GaiaX 应具备以下技术个性，以解决研发效力的瓶颈问题：UI 组件模板化、跨平台、媲美 Native 的性能与体验、动态性、根底组件可灵便插拔、易于适配不同的屏幕尺寸和设施。

在提出计划思路后，上面就是进行计划的落地，这部分内容会在《GaiaX 开源解读》系列文章的第二篇：《跨端动态化模板引擎详解，看完你也能写一个》中进行具体的进行介绍，也请各位读者继续的关注。

GaiaX 技术状态的倒退

续接文章的上一节内容，在提出了解决研发效力瓶颈问题的思路之后，在本节内容中探讨和讲述一下 GaiaX 的技术状态问题。

跨平台技术曾经通过了三轮的技术演进，在每轮技术演进中都有各自的代表作和各自的核心理念，上面简要介绍一下：

• 基于 WebView 的跨平台框架 。创立 HTML 并将其显示在 App 的 WebView 中，对于平台提供的一些零碎服务，通过 JS Bridge 来调用，一个残缺 HTML5 页面的展现要经验浏览器控件的加载、解析和渲染三大过程，这种开发模式开发的 App 既有原生利用代码又有 Web 利用代码，因而又被称为 Hybrid App（混合应用程序）。
• 以 React Native 为代表的“泛 Web 容器计划”跨平台框架 。这种计划放弃了 WebView 渲染，采纳原生自带的 UI 组件作为外围的渲染引擎，所以这种计划的性能比第一代计划要好很多。代表作就是：ReactNative、Weex。这种计划放弃了 JS 作为开发语言，应用 JSX 进行 UI 页面的搭建。
• 以 Flutter 为代表的应用“自绘引擎”的形式来进行 UI 渲染的跨平台框架 。Flutter 既不必 WebView 进行组件渲染，也不应用原生组件进行渲染，它齐全搞了一套跨平台 UI 渲染框架，渲染引擎依附跨平台的 Skia 图形库来实现，手机平台只须要提供一块画布即可。同时开发语言应用既反对 JIT 又反对 AOT 的 Dart 语言，既晋升了执行效率，也为反对动态化提供可能。

下面三类跨平台技术，没有先进与否的区别，它们都有各自的利用场景和各自的瓶颈问题，在优酷 App 中也应用到了下面这三类跨平台技术：

• 基于“WebView”的跨平台框架，常常用于营销页面、流动页面，这种快用快消的场景之中；
• 基于“泛 Web 容器计划”的跨平台框架，阿里外部应用的是 Rax，目前常被用于收银台页面、大作业页面，这类对动态性、性能有要求的场景之中；
• 基于“自绘引擎”的 Flutter 跨平台框架，目前常被用于一些通用二级页之中，这类场景对开发成本、性能有所要求，但对灵活性要求不高。

当理解了这三类跨平台技术以及它们在优酷中的利用场景后，再联合上一节提到的优酷碰到的研发效力瓶颈问题，能够晓得这三类技术计划均无奈较好的解决碰到的问题，而任何技术的演进都是一直在已有技术根底之上一直揉捏、组合、提取、精炼的，上面让咱们看看 GaiaX 是采纳何种技术状态来解决研发效力问题的。

IDE 搭建 + 双端渲染

因为是为了解决客户端同学在 App 研发过程中碰到的研发效力问题，在技术状态上思考了统一性、一致性、易用性、可拓展性、动态性之后，GaiaX 决定采纳自定义 DSL 来搭建 UI，并应用 Native 原生 UI 组件进行渲染的技术状态。自定义的 DSL 被称作模板，其中蕴含三个子 DSL：一个用来形容 UI 元素之间的层级和嵌套关系 – index.json；一个用于形容 UI 元素的款式和布局信息 – index.css；一个用于形容视图元素的数据绑定信息和动静扩大信息 – index.databining。

自定义 DSL 好处多多。模板可独立存在，这样能够通过网络对模板进行下发和更新，来达到动静更新模板的目标，从而解除惯例开发中渲染产物对 UI 形容信息的耦合。款式的形容应用的是规范 CSS 标准，这样不仅业务方更容易接受和了解，也为将渲染产物拓展到 H5、小程序上留下了可能性。模板可自在扩大能力边界，这也为起初减少 JS 逻辑留下了口子，也能让模板在肯定状况下有更强的动态性。除了以上这些，为了缩小开发人员的应用老本，也为了升高 SDK 的保护老本，GaiaX 团队也提供了用于模板搭建的 IDE，应用方通过拖拽、搭建就能构建出本人冀望的 UI 模板。

至此，一个应用自研 IDE 搭建模板并应用 Native 原生 UI 组件渲染的技术状态就此产生，因为从搭建、到解析、再到渲染都把握在本人手中，优酷 App 迭代过程中碰到的研发效力瓶颈问题都能够得以解决。

动态化能力

上文中咱们具体阐明了 GaiaX 的根本技术状态，但其中对动态化的能力却未进行具体阐明，置信很多读者对这个局部都很感兴趣。在 GaiaX 中，将动态化的能力分成了三类，别离是模板的动态化、模板的弱逻辑动态性、模板的强逻辑动态性，每类动态化的能力都解决了不同场景的问题，并且能够被渐进应用，上面别离介绍一下：

• 模板的动态化 ：模板是一个 UI 信息形容的汇合，当被下发到客户端后其内容就无奈被扭转了，如果有了紧急需要导致 UI 内容布局形式和内容产生了重大的变动该怎么解决？为了解决这类问题，咱们为模板赋予了版本号的概念，只须要将模板在 IDE 中从新进行编辑、上线、公布，就能够将新模板下发到用户的 App 中，来实现模板的动静更新，从而达到 UI 动静更新的目标。
• 模板的弱逻辑动态性 ：在一些惯例需要中，常常须要依据一些条件暗藏或显示某些区域，或者依据数据扭转文字的色彩、字号、大小等。对于这类常态化的需要，咱们在数据绑定文件中，提供了应用表达式进行计算的能力，来达到依据数据动静扭转 UI 款式和显示内容的目标。
• 模板的强逻辑动态性 ：在一些更为简单的需要中，不仅须要和服务端进行交互取回数据，也须要进行更为简单的业务逻辑解决和 UI 交互解决，这种状况在数据绑定文件中应用表达式解决往往无奈很好的实现需求，此时就须要更为弱小的逻辑解决能力了。为了解决此类问题，咱们引入了 JS 引擎，其专用于简单逻辑的解决，因为 JS 引擎不参加到 UI 绘制逻辑，其对模板的加载和渲染性能都是没有负面影响的。

GaiaX 动态化能力就全副介绍完了，在适合的场景选用适合的技术计划，能力用起码得人力实现业务需要，从而进步研发效力。

容器化能力

下面两节提到了 GaiaX 的渲染能力和动态化能力，作为跨平台的技术计划提供给业务方基本上曾经够用了，然而为了更进一步进步复用性和升高研发老本，咱们又提出了容器化的概念，进一步封装了 GaiaX 并依据应用场景将其分为三种类型：

• 第一种类型 ：业务方不须要编写任何 Native 代码，仅须要搭建和配置模板，通过应用容器中的主动埋点、主动路由、预置事件等能力，就能实现业务二级页、非核心的频道页以及一些动态组件、坑位的开发和上线工作。这个局部外围在于加强容器的各种原子化能力，例如：埋点、路由、事件、气氛、暗黑模式等，让业务通过模板编辑和配置就能实现 UI 搭建、逻辑解决、事件处理。
• 第二种类型 ：业务方通过继承或者蕴含插件的模式，写大量的 Native 业务代码，通过减少一些自定义的配置，就能反对业务的频道、组件、坑位的开发。这个局部的外围在于容器层可能提供可扩大的能力，能让业务自定义实现。
• 第三种类型 ：业务方须要写局部 Native 代码，用于解决非凡业务逻辑，再配合主动埋点、主动路由等原子化能力，来时实现业务迭代。

三种容器化类型的作用域彼此配合，根本能够笼罩业务迭代中的大部分场景，通过借助应用 GaiaX 容器化的能力，业务方能够不间接应用 GaiaXSDK，不仅升高了学习老本，也能再一次进步研发效率。

配套设施的加强

GaiaX 在优酷落地的过程中，也碰到了模板查验效率低、模板开发效率低的问题，为了解决这些问题并造福开发和测试，也别离提供了实时预览工具以及设计稿 D2C 的性能。

应用实时预览工具，能够让开发者在 IDE 上搭建好模板后，通过扫码的形式，将模板渲染在指标设施上，并且能够随着 IDE 的改变实时更新 UI 成果，相似于 Flutter 的热更新，这样不仅更直观、也能让模板的开发效率更高。

应用设计稿 D2C 工具，能够让开发者将设计稿间接导出成模板文件，省去了模板中一部分的搭建工作（例如：层级构造和款式调整），开发者只须要解决数据绑定逻辑和 UI 更新逻辑，即可实现模板 UI 组件的开发，让开发效率再上一个台阶。
除了实时预览工具和设计稿 D2C 工具外，GaiaX 还提供了模板管理器、Ribut 抓包与 Mock 神器、数据监控等配套设施，让 GaiaX 模板研发体系更为残缺，进一步推动解决研发效力的瓶颈问题。

GaiaX 开源我的项目布局

GaiaX 目前曾经在 Github 上开源 (https://github.com/alibaba/GaiaX)，并且在紧锣密鼓的迭代开发中。此外，咱们也布局了将来几个月的我的项目路线图，以便让感兴趣的同学理解咱们的动向。

系列文章

《GaiaX 开源解读》系列文章预报如下，欢送继续关注：

1. 已上线《基于优酷业务特色的跨平台技术》
2. 已上线《跨端动态化模板引擎详解，看完你也能写一个》
3. 《给 Stretch（Rust 语言编写的跨平台 FlexBox 布局计算库）新增个性，我掉了好多头发》
4. 《表达式作为逻辑动态化的根底，咱们是如何设计的》
5. 《向经典致敬 ReactNaitve 与 GaiaX 渲染核心技术剖析》
6. 《为了保障双端一致性，咱们做了哪些致力》
7. 《一条龙的模板研发体系，你不来看看么》

团队介绍

咱们来自优酷产品技术与翻新核心利用技术部，从日常工作中实在存在的研发效力及痛点问题登程，咱们自研推出了 GaiaX 动静模板技术体系，指标是解决多端卡片化 UI 组件的研发效力问题，帮忙晋升开发者体验及效率。目前 GaiaX 我的项目曾经在 GitHub 开源【https://github.com/alibaba/GaiaX】，也殷切的心愿宽广终端（挪动端及前端）技术爱好者与咱们进行技术交换与共建。