GaiaX开源解读 | 跨端动态化模板引擎详解，看完你也能写一个

GaiaX跨端模板引擎，是在阿里优酷、淘票票、大麦内广泛使用的Native动态化方案，其核心优势是性能、稳定和易用。本系列文章《GaiaX开源解读》，带大家看看过去三年GaiaX的发展过程。

引言

在“GaiaX开源解读系列之第一篇：《GaiaX开源解读 | 基于优酷业务特色的跨平台技术》”中，为各位读者详细介绍了GaiaX起源背景、业务中碰到的瓶颈问题、解决问题的思路以及GaiaX技术形态的发展过程，在本篇中将进一步深入GaiaX的各个细节，深度解读GaiaX团队同学是如何进行方案落地的，看完本篇内容相信你一定会有所收获。

核心概念

GaiaX是由优酷应用技术中心团队研发的一款跨端高性能渲染引擎，其本质是个视图还原框架，其核心理念是将模板还原成双端的视图组件，我们先通过一个视图还原渲染的流程图，看看GaiaX的上下游是如何工作的：
组件设计稿：组件设计稿是由设计同学给出，用于展示视图组件的效果图，开发同学需要用这个文件进行视图组件的开发。

GaiaStudio：
开发同学通过使用GaiaStudio，以拖拽、编写的方式来创建节点的层级、设置节点的样式、为节点绑定数据，最终得到模板文件。
模板文件：
模板文件也被称作GaiaX的DSL，其中包含三个子DSL，分别是index.json、index.css、index.databinding，用来描述节点的层级关系、节点样式、节点数据绑定逻辑。
GaiaX：
在双端上通过使用SDK来解析模板的内容，经过节点树的构建和视图树的构建、视图树的数据绑定等步骤后，得到Native视图，最终交给双端渲染。
端渲染：
经过双端SDK对模板的加工和处理后，在Android和iOS上可以分别得到一个View和一个UIVIew，这两个NativeView便是最终用于渲染的视图，只需要将其插入的原生视图中即可展示出渲染效果。

在了解了GaiaX的上下游与涉及到的环节后，下面就介绍一下GaiaX中的两个核心概念 - 模板、节点树与视图树：

模板：
其描述了用于视图还原的各种信息，模板作为自定义的DSL，其由三个子DSL构成，分别是FlexBox、Css、Databinding，它们会被存储在index.json文件、index.css文件、index.databinding文件中：

index.json文件用于存储视图的关联关系。在该文件中，以json的格式，描述了每个视图的层级关系、并列关系、嵌套关系等。

index.css文件用于存储视图的样式。在该文件中，以通用的Css规范格式，描述了每个视图节点的布局信息和样式信息。

index.databinding文件用于存储视图的数据绑定逻辑。在该文件中，以json的格式，描述了每个视图的数据绑定关系和动态更新逻辑。这其中用到了自定义的表达式 ，它支持常规的取值、对比、条件等计算。

节点树与视图树：
如果用比喻的手法来描述节点树与视图树，那么可以将其比作人体的骨架与血肉。节点树的主体结构由模板的index