简介：动态模板技术解决方案串联客户端研发环节，通过完善的工具化支撑体系，开发者可以高效完成组件从原有设计从草稿到可运行代码的最短路径，本文将介绍研发系统涉及的核心模块，希望对技术社区和开发者有所帮助。作者|阿里文娱科技来源|阿里开发者公众号1概述优酷是以内容分发和内容消费为主体的多屏、多终端的文化娱乐生态综合体。在内容分发场景中，有大量的客户端开发需求，包括视觉升级、各场景业务需求迭代、大小屏设备需求同步等。2019年底，我们开始探索跨终端的动态研发效率提升方案。经过两年多的努力，目前跨终端的动态能力已经在优酷各个业务场景落地，帮助研发团队在分发业务上实现了约30%的效率提升。动态模板技术体系以跨终端动态SDK为核心。通过降低设计、开发、联调阶段对接、开发、调试等核心任务的技术成本，真正提高研发效率。目前，整个技术方案包括画眉跨平台动画解决方案、智能设计平台GaiaSketch、跨端模板动态解决方案GaiaX、动态模板可视化和少代码构建平台GaiaStudio，以及辅助调试工具FastPreview。动态模板技术方案串联客户研发环节。通过完整的工具支持体系，开发者可以高效完成从最初的设计稿到可运行代码的最短路径。本文将对涉及到的研发系统、核心模块进行介绍，希望对技术社区和开发者有所帮助。2.智能设计平台——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]。三动态模板引擎——GaiaXGaiaX是优酷动态模板引擎项目代号，是解决跨端组件开发效率提升方案的关键技术。在项目前期的需求分析阶段，团队从优酷的实际场景和各团队开发的实际诉求出发，将问题空间定位在组件层面，不仅避免了复杂性，Weex、ReactNative等技术方案的复杂度、工程量，其次，技术方案从根本上脱离了JSBridge的老路，保证了端侧实现的性能保障。1架构设计按照分层设计理念分为4层。基础依赖层遵循最小依赖原则。需要注意的是，为了保证模板布局计算的高性能，我们引入了RUST编写的StretchKit高性能布局计算引擎[https://github.com/vislyhq/st..]，它具有跨端、封装体积小（170K）、计算性能优异等特点；核心渲染层构成模板引擎的渲染核心，解决模板文件解析、虚拟节点树构建、布局计算、表达式构建解析等核心逻辑；模板中心和模板服务层面向业务，结合优酷业务架构，实现现有能力的复用，避免重新发明轮子，为上层业务提供标准化的模板渲染和接入服务。2总线设计对于动态模板引擎，输入一个结构化的模板文件，经过文件IO、数据分析、虚拟节点树构建、布局计算、表达式计算、渲染树构建、实景树形成完整的总线链接。3性能由于动态模板DSL具有严格的标准化和规范化，在设计、开发和交付一体化环节，GaiaSketch的组件代码导出可以直接生成GaiaX动态模板DSL代码，使开发工程师可以减少模板框架从0到1的构建工作，经过简单的编辑优化，即可完成一个模板文件的构建。4开源项目详见文末[2]。4、动态模板低代码IDE——GaiaStudio动态模板引擎可以解决跨端组件渲染的一致性问题，通过一套统一的DSL描述组件布局、样式和数据，提高多端开发效率.但是对于客户端开发来说，前端DSL本身就有一定的学习成本。另外，如何编写更加合理简洁的模板代码，将直接影响到模板在终端的最终渲染效果和性能表现。为了解决上述问题，在动态模板引擎上线后，优酷技术团队着手打造GaiaStudio动态模板低代码IDE。通过IDE，开发者可以直观地构建模板。引擎支持的所有布局和样式属性都内置在IDE中。开发者只需做出选择，即可在用户界面中获得渲染反馈。1技术方案考虑到开发和后续跨平台的便利性，我们选择了Electron作为底层跨平台方案，SematicUI作为CSS组件库，保证不用设计也能写出更漂亮的用户界面。与web前端相比，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所有可动画属性的支持，动画完成后无需再次设置目标值。ThrushSDK实现了7种常用运动曲线的底层算法。用户只需指定曲线枚举即可实现标准化的运动效果。Android端技术方案为了减少java调用C的性能损失，Android端使用Interpolator来实现曲线动效。3实现效果4开源项目详情见文末[4]。6.总结动态模板研发系统在优酷上线后，在设计标准化、设计与研发对接、视觉还原与效率提升、端到端研发交付效率提升等方面取得了良好的效果。目前，优酷技术团队正在将技术方案整体开源。希望通过本文的介绍，可以让大家对研发系统有一个初步的了解。也希望大家关注优酷技术团队相关的开源项目，共同建设，造福社区。.优酷动态模板研发系统开源项目列表参考链接：[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...原文链接本文为阿里云原创内容，未经允许不得转载。
