共计 4122 个字符，预计需要花费 11 分钟才能阅读完成。
简介：动静模板技术计划将客户端研发链路实现了串联，通过齐备的工具化支撑体系，让开发者能够高效实现组件由原始设计稿到可运行代码的最短通路，本文将对研发体系中波及到的外围模块就行介绍，心愿对技术社区及宽广开发者有肯定帮忙。
作者 | 阿里巴巴娱乐技术
起源 | 阿里开发者公众号
一 概述
优酷是一个多屏、多端，以内容散发及内容生产为主体的娱乐生态综合体。在内容散发场景，存在大量的客户端开发需要，包含视觉降级、各场景的业务需要迭代、大小屏设施需要同步等，为了升高研发在跨端场景中组件反复开发的技术老本，优酷技术团队于 2019 年底开始摸索跨端动态化研发提效解决方案，通过 2 年多工夫的致力，目前跨端动态化能力曾经在优酷各业务场景落地，帮忙研发团队在散发业务上实现提效 30% 左右。
动静模板技术体系以跨端动态化 SDK 为核心，通过在设计阶段、研发阶段、联调阶段升高对接、开发、调试等外围工作的技术老本，从而真正实现研发提效。目前整个技术计划包含画眉跨平台动效解决方案、智能化设计平台 GaiaSketch、跨端模板动态化计划 GaiaX、动静模板可视化少代码搭建平台 GaiaStudio、辅助调试工具疾速预览 FastPreview。
动静模板技术计划将客户端研发链路实现了串联，通过齐备的工具化支撑体系，让开发者能够高效实现组件由原始设计稿到可运行代码的最短通路，本文将对研发体系中波及到的外围模块就行介绍，心愿对技术社区及宽广开发者有肯定帮忙。
二 智能化设计平台 – GaiaSketch
Sketch 作为一款优良的设计软件，目前曾经是绝大多数互联网企业设计部门的次要设计工具。与 Photoshop 相比，Sketch 对矢量元素具备更强的解决能力，并且其自身提供了丰盛的二次开发接口，具备很强的开放性。
针对标注导出及组件还原两局部日常工作量占比拟高的工作，优酷技术团队基于 Sketch 插件架构体系，研发了自动化标注构建导出、组件代码主动生成以及规范素材库建库等能力。对于设计师来说能够通过插件建设起规范库（包含：组件库、款式库、图标库、页面库），也能够通过插件导出更为简略易用的【标注文件】；对于开发来说，能够通过插件能将 Sketch 设计稿中的图层导出为代码（GaiaX、React、Rax、Vue、小程序等）。
1 规范素材库
每个组件库由一个或者多个 Symbol 形成，每个 Symbol 依照肯定的格局命名后，插件就能读取并可视化展现在插件中，并可将可视化后的组件间接拖拽到 Sketch 设计稿中且与原库放弃关联。
每个 Symbol 的名称遵循着规范的格局命名，名称以 / 连贯，比方 Foundation/Bar/TabBar，导入到插件后，可视化展现的成果如上图所示。
2 标注导出
将 Sketch 源文件中的画板导出为标注文件供开发应用，导出的【标注文件】具备更好的兼容性、更易用的界面。
标注导出的产物次要蕴含两个局部，一部分是标注模板文件，另一部分包含设计稿相干数据信息，比方画板截图，图层数据、切图等。
3 代码导出
将 Sketch 设计稿中选中的图层导出为选定的语言类型的代码，比方 GaiaX 模板、React、Rax、Vue、小程序等，导出的代码布局形式基于盒子模型布局（Flexbox）和相对布局（Absolute）；对于节点的层级，【导出代码】会在导出的过程中进行一直的优化，使层级尽可能的少且正当。
4 开源我的项目
详见文末[1]。
三 动静模板引擎 – GaiaX
GaiaX 是动静模板引擎我的项目在优酷外部的代号，它是解决跨端组件开发提效计划的关键技术。在项目前期的需要分析阶段，团队从优酷的理论场景和各团队开发中的切实诉求登程，将问题空间定位在组件这个层级，不仅很好的躲避了如 Weex、ReactNative 等技术计划的复杂度和工程量，其次也在基本上让技术计划脱离 JS Bridge 的老路，保障了端侧的落地性能保障。
1 架构设计
依照分层设计理念共分为 4 层。根底依赖层保持最小依赖准则，要重点阐明的是，为了保障模板布局计算的高性能，咱们引入了由 RUST 编写的 StretchKit 高性能布局计算引擎[https://github.com/vislyhq/st…]，其具备跨端、较小的包体积（170K）、计算性能卓越等特点；外围渲染层形成模板引擎的渲染内核，解决模板文件解析、虚构节点树构建、布局计算、表达式构建解析等外围逻辑；模板核心及模板服务层则面向业务，与优酷业务架构进行联合实现对现有能力的复用，防止反复造轮子，并向下层业务提供标准化模板渲染及接入服务。
2 总线设计
对于动静模板引擎来说，输出结构化的模板文件，通过文件 IO、数据解析、虚构节点树构建、布局计算、表达式运算、渲染树构建到实在视图树组成了残缺的总线链路。
3 性能体现
因为动静模板 DSL 具备严格的标准化和规范化，因而在设计研发交付一体化链路上，GaiaSketch 的组件代码导出可间接生成 GaiaX 动静模板 DSL 代码，这样，开发工程师能够缩小模板框架的从 0 到 1 的搭建工作，通过简略的编辑优化，便可实现一个模板文件的构建。
4 开源我的项目
详见文末[2]。
四 动静模板低代码 IDE – GaiaStudio
动静模板引擎能够解决跨端组件渲染的一致性，通过一套对立的 DSL 对组件布局、款式、数据进行形容，从而实现多端开发的提效。但对于客户端开发来说，类前端的 DSL 自身存在肯定的学习老本，另外，如何编写更加正当、简洁的模板代码，对模板在终端最终的渲染及性能体现都会产生间接的影响。
为了解决上述问题，优酷技术团队在动静模板引擎上线后，着手构建了 GaiaStudio 动静模板低代码 IDE。开发者通过该 IDE，能够对模板进行可视化搭建，引擎反对的所有布局及款式属性，都在 IDE 中进行了内置，开发者只需进行抉择，便可用户界面中即可失去渲染反馈。
1 技术计划
思考到开发便捷性和后续的跨平台，咱们选用了 Electron 作为底层跨平台计划，用 Sematic UI 作为 CSS 组件库，保障在没有设计的状况下，也可能写出比拟好看的用户界面。与网页前端比照，Electron 有更好的性能、并且可更便捷的实现有手机端的互联互通。
2 性能简介
模板创立
模板是 GaiaX 技术体系的外围介质，也是跨端动静渲染的关键点。模板的构建品质决定了端侧渲染的性能和还原成果。GaiaStudio 提供了十分全面的模板治理能力，反对从 0 - 1 间接构建一个新的模板，也可通过 GaiaSketch 导出模板代码的形式，导入到 GaiaStduio 简化编辑老本。
模板编辑
模板编辑是模板构建过程中工作量最大的，为了升高开发者的技术老本及对 FlexBox 的学习曲线，GaiaStudio 提供了可视化、参数化的产品性能，即便操作者对 FlexBox、CSS 理解甚少，也能够疾速上手实现一个模板的编辑工作。
对于一个模板，一般来说咱们要进行一组残缺的编辑解决，能力实现整个构建工作，包含：根底属性、布局、款式、动画、数据绑定。
模板调试
GaiaStudio 的模板调试性能次要有两个性能形成，即模板代码动态剖析及模板真机预览（FastPreview）。
1) 模板代码动态剖析能够帮忙开发者查看模板代码的语法及合理性，针对如模板命名是否非法、布局设置则、模板嵌套层级等问题实时反馈给开发者，帮忙开发者更正当的实现模板搭建。
2) 模板预览 FastPreview，GaiaStudio 提供了亚秒级的模板真机预览能力，让开发者能够实时在真机端查看本人搭建的模板的正确性和还原成果，让 Native 开发也能够具备相似 H5、小程序的开发体验。
3 下载地址
GaiaStudio 目前对社区提供通用版本安装包，源码临时未开源，具体的下载地址在 GaiaX 开源我的项目中可获取[3]。
五 跨平台动效解决方案 – 画眉
在客户端开发的日常工作中，存在着大量动效场景需要，如 ToastView 显示与隐没、Dialog 弹出、按钮的显隐等。当动效设计需要交付给研发后，往往要达到最终的成果，须要通过多轮的走查和调优，归纳起来造成这种后果的起因次要有：1）同一动画，不同的开发人员实现的成果有差异 2）同一动画，iOS 端和 Android 端实现的成果有差异 3）对于曲线动效，设计师无奈提供精确参数，实现成果随机性强 4）局部开发人员对系统自带曲线函数不相熟，会导致降级利用线性或加速曲线，影响动态效果。为了彻底解决端侧动画实现的研发效率及成果保障，技术团队与设计核心独特推出了跨平台动效解决方案 - 画眉(Motion-curve)。在 GaiaX 动静模板引擎中，曲线动效的实现也依赖画眉提供根底服务。
1 架构设计
2 技术计划
iOS 端技术计划
SDK 接口层采纳 Category 计划，通过 AOP 思维来简化调用复杂度。
CALayer + MotionCurveX 为 CALayer 的所有可动画属性，依照动效曲线能力提供反对，且在动画实现后，无需再次设置目标值。画眉 SDK 将罕用的 7 种动效曲线，进行底层算法实现，使用者只需指定曲线枚举，即可实现标准化的动效。
Android 端技术计划
为了升高 java 调用 C 的性能损耗，Android 端采纳差值器 Interpolator 来实现曲线动效。
3 实现成果
4 开源我的项目
详见文末[4]。
六 总结
动静模板研发体系在优酷落地运行后，对设计规范化、设计与研发的对接及视觉还原提效、端侧研发的交付提效来说，都获得了不错的成绩。目前优酷技术团队正在对技术计划进行整体开源，心愿通过这篇文章的介绍能让大家对该研发体系有一个初步的理解，也心愿大家关注优酷技术团队相干的开源我的项目，一起共建让社区受害。
优酷动静模板研发体系开源我的项目列表
参考链接：
[1]GaiaSketch 开源我的项目地址：https://github.com/alibaba/Ga…。
[2]优酷动静模板引擎开源我的项目地址：https://github.com/alibaba/GaiaX
[3]GaiaX 开源我的项目：https://github.com/alibaba/GaiaX
[4]优酷画眉曲线动效开源我的项目地址：https://github.com/alibaba/ga…
原文链接
本文为阿里云原创内容，未经容许不得转载。
