开源优酷动态模板研发体系为分发提效30

临沂白癜风医院 http://www.yunweituan.com/m/
一概述优酷是一个多屏、多端，以内容分发及内容消费为主体的文娱生态综合体。在内容分发场景，存在大量的客户端开发需求，包括视觉升级、各场景的业务需求迭代、大小屏设备需求同步等，为了降低研发在跨端场景中组件重复开发的技术成本，优酷技术团队于年底开始探索跨端动态化研发提效解决方案，经过2年多时间的努力，目前跨端动态化能力已经在优酷各业务场景落地，帮助研发团队在分发业务上实现提效30%左右。动态模板技术体系以跨端动态化SDK为中心，通过在设计阶段、研发阶段、联调阶段降低对接、开发、调试等核心工作的技术成本，从而真正实现研发提效。目前整个技术方案包括画眉跨平台动效解决方案、智能化设计平台GaiaSketch、跨端模板动态化方案GaiaX、动态模板可视化少代码搭建平台GaiaStudio、辅助调试工具快速预览FastPreview。动态模板技术方案将客户端研发链路实现了串联，通过完备的工具化支撑体系，让开发者可以高效完成组件由原始设计稿到可运行代码的最短通路，本文将对研发体系中涉及到的核心模块就行介绍，希望对技术社区及广大开发者有一定帮助。二智能化设计平台-GaiaSketchSketch作为一款优秀的设计软件，目前已经是绝大多数互联网企业设计部门的主要设计工具。与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高性能布局计算引擎[

转载请注明：http://www.abuoumao.com/hyfw/9084.html