GaiaX跨端模板引擎，是在阿里优酷、淘票票、大麦内广泛运用的Native动态化计划，其中心优势是功能、安稳和易用。本系列文章《GaiaX开源解读》，带咱们看看曩昔三年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技能形状的发展
续接文章的上一节内容，在提出了处理研制效能瓶颈问题的思路之后，在本节内容中评论和讲述一下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上开源(github.com/alibaba/Gai…) 而且在紧锣密鼓的迭代开发中。此外，咱们也规划了未来几个月的项目路线图，以便让感兴趣的同学了解咱们的意向。
团队介绍
咱们来自优酷产品技能与立异中心运用技能部，从日常作业中真实存在的研制效能及痛点问题动身，咱们自研推出了GaiaX动态模板技能系统，方针是处理多端卡片化UI组件的研制效能问题，协助提高开发者体会及功率。现在GaiaX项目现已在GitHub开源【github.com/alibaba/Gai… 也深切的希望广阔移动端及前端技能爱好者与咱们进行技能交流与共建。
《GaiaX开源解读》系列文章预告如下，欢迎继续关注：
第一篇：《GaiaX开源解读 | 根据优酷事务特征的跨渠道技能》
第二篇：《GaiaX开源解读 | 跨端动态化模板引擎详解，看完你也能写一个》
第三篇：《GaiaX开源解读 | 给Stretch（Rust言语编写的跨渠道FlexBox布局计算库）新增特性，我掉了很多头发》
第四篇：《GaiaX开源解读 | 表达式作为逻辑动态化的基础，咱们是怎样规划的》
第五篇：《GaiaX开源解读 | 向经典问候 ReactNaitve与GaiaX烘托中心技能分析》
第六篇：《GaiaX开源解读 | 为了确保双端一致性，咱们做了哪些尽力》
第七篇：《GaiaX开源解读 | 一条龙的模板研制系统，你不来看看么》
引证：
《「ReactNative」原理剖析》：「ReactNative」原理剖析 – 知乎
《GaiaX》：github.com/alibaba/Gai…
