其他
干货 | 提升前端工程化,携程 Design2Code 从零到一的实践
作者简介
by,携程高级研发经理,专注低代码平台搭建和前端智能化技术。Jialu,携程研发总监,专注大前端技术和工程化的研究与发展。高效协作:使用智能化技术,提升前端工程师和设计师之间的协作效率。 高还原度:降低设计师检查页面还原度的人力成本。 高兼容性:减少多端适配的开发成本。 快速上线:自动生成视图层代码,减少手工工作量。
预装Sketch插件或上传文件解析,导出DSL数据。 通过 AI 自动处理并生成前端代码,支持使用Web编辑器对代码进行人工干预和编辑。 需要将设计稿数据存储在对方服务器。 代码未开源,解决方案也只是简略描述。 部分公司进阶功能需付费使用。
1. 上传Sketch源文件入口 → 2. 对数据进行处理并返回结果 → 3.展示转换结果。 通过“查看代码”功能获取多端代码。 我们对APP、H5 、Online和小程序设计稿进行了还原比对,还原精度达到80%,且在不断提升中。
筛选过滤无用信息和图层:对于 sketch2json 获取的 JSON 数据中,有因 Sketch 的映射关系存在的大量对于图像还原无效的数据字段和因为设计师对于图像绘制不规范产生的无用图层信息,所以需要对其中无效数据字段和无用图层信息做一层数据过滤,减轻 JSON 的量级方便后续计算。
字段类型映射:瘦身处理后的数据还需要再精细化处理,其中 Sketch 的样式字段等与传统的 CSS 不一致,需要通过转换进行关系映射。对于 Sketch 的图层具体定义为文本还是图片等也需要做相关字段映射。
图层结构重组:sketch2json 转化后的图层嵌套结构严格依赖视觉稿规范程度,可用性较低,需要对其进行一次结构重组,将所有图层打平,后续利用图层位置信息计算出准确的包含关系。
Order 层级深度推算:图层打平重组后,如何计算每个图层在DOM Tree中的层叠关系。我们可以根据初始JSON数据中的原始嵌套关系进行推算,为重组后的图层赋予新的层级深度值。
Symbol 元素处理:在 Sketch 中,Symbol 作为一种特殊元素,创建后可以被重复引用,类似前端中的组件。Symbol 元素在 Sketch 转化后的 JSON 数据中,只包含了其引用ID,它的真实图层数据被保存在了其它位置,需要通过引用ID检索到真实数据后替换 JSON数据中的 Symbol 元素。
视图渲染应用:负责渲染转换结果界面。
布局算法服务:负责计算元素的位置和布局,以确保界面还原精准。
切图算法服务:负责将图像切割成合适的尺寸显示在界面上。
若图层节点A是图层节点B的子孙节点,那么,图层A层级 大于 图层B层级; 若两个图层节点非子孙/祖父节点,那么,这两个节点所在的最小公共子树中,若存在图层A的祖父节点为图层B的祖父节点的右兄弟节点,则表示图层A层级 大于 图层B层级。
通过判断子layer,当他们的大小接近,并且Y值相差在固定阈值内且X值相差过大时,可以推断出该层layer的布局使用flex,且direction为row。
通过判断子layer,当他们的大小接近,并且X值相差在固定阈值内且Y值相差过大时,可以推断出该层layer的布局使用flex,且direction为column。
建议将组件保持在独立的画板中,这样可以避免转换无效的元素,方便工程师后续的代码逻辑开发。
保留有意义的图层,删除无效的空图层,并且尽量避免过深的图层嵌套。这样可以避免渲染树过深,影响页面加载性能。
图层分组(即 Sketch 中的文件夹)应该合理嵌套,避免交错放置。合理摆放元素文件夹可以有利于还原元素的 DOM 树关系。
除设计上有必要以外,应尽量避免将同级元素放在容器中交错排列,因为这会导致这些元素在渲染树中被视为父子关系。
对于相同类型的多行文本,建议使用一个文本图层,这样可以避免因为设计稿中的两个图层而将相同类型的文本转换为两个 HTML 段,从而提高代码复用率,减少代码重复。对于滤镜等特殊效果,建议使用图片来实现,以提高还原精度。
提高flex弹性布局的推算准确度 提升dom tree 分割准确度 减少dom tree 深度
列表循环识别能力 提升长页面还原度能力
减少视觉稿人工干预频次 适配不同团队设计规范
探索前端智能化:通过将设计稿转化为前端代码的方式,实现前端智能化。可以提高前端开发的效率,保证设计的精确实现。
优化产品研发流程:可以提高产品研发的效率,减少人力成本,提升团队的协作效率。更高效地进行产品的迭代和优化。
简化设计到开发流程:可以优化设计到开发的流程,减少沟通成本,提升工作效率。设计人员可以直接使用设计工具制作设计图,并将其转化为代码,减少设计到开发的翻译过程。
加速研发进度:可以帮助团队加速研发进度,更快地将产品推向市场,并可以更快速地完成设计和开发工作。同时,也可以更快地进行产品的测试和验证。
“携程技术”公众号
分享,交流,成长