京东科技设计稿转代码平台介绍
Tech导读
本文将介绍京东推出的设计稿转代码平台。这个平台旨在通过智能化工具将设计稿自动转换为代码,极大提升前端开发效率。本文会探索该平台如何利用人工智能技术识别设计元素并生成可用代码,以及它对设计师与开发者工作流程的影响。
导读
本文将介绍京东推出的设计稿转代码平台。这个平台旨在通过智能化工具将设计稿自动转换为代码,极大提升前端开发效率。本文会探索该平台如何利用人工智能技术识别设计元素并生成可用代码,以及它对设计师与开发者工作流程的影响。
01 前言
在今年的敏捷团队建设中,我通过Suite执行器实现了一键自动化单元测试。Juint除了Suite执行器还有哪些执行器呢?由此我的Runner探索之旅开始了!
随着金融App业务的不断发展,为了满足不同场景下的用户体验及丰富的业务诉求,业务产品层面最直接体现就是大量新功能的上线及老业务的升级,随之也给研发带来了巨大的压力,所以研发效率的提升就是当前亟需解决的问题,今天本文带读者来看下设计稿转代码平台是如何帮助前端研发同学提效的。
02 前端开发流程概述
理解,首先 MCube 会依据模板缓存状态判断是否需要网络获取最新模板,当获取到模板后进行模板加载,加载阶段会将产物转换为视图树的结构,转换完成后将通过表达式引擎解析表达式并取得正确的值,通过事件解析引擎解析用户自定义事件并完成事件的绑定,完成解析赋值以及事件绑定后进行视图的渲染,最终将目标页面展示到屏幕。
在讨论之前,先看下前端开发流程,下图是一个典型的场景:
“业务逻辑实现”阶段一般是根据具体的产品需求,进行数据的加载、绑定和交互效果的开发,如鉴权、点击事件的添加、动效实现、埋点的上报等,不同的需求在此阶段的诉求差异较大,可复用性也比较低,通常需要针对每个需求进行定制开发。
03 什么是设计稿转代码(D2C)
理解,首先 MCube 会依据模板缓存状态判断是否需要网络获取最新模板,当获取到模板后进行模板加载,加载阶段会将产物转换为视图树的结构,转换完成后将通过表达式引擎解析表达式并取得正确的值,通过事件解析引擎解析用户自定义事件并完成事件的绑定,完成解析赋值以及事件绑定后进行视图的渲染,最终将目标页面展示到屏幕。
设计稿转代码(Design To Code)便是解决此问题的技术,其核心思想是通过解析设计师交付的设计稿源件(Sketch、Figma、XD等),读取出设计稿中元素的位置、样式、图层关系等,并通过一系列的算法处理,最终转换为前端代码。
3.1 D2C能做什么?
3.2 D2C不能做什么?
另外,D2C目前在增量需求的使用上效果比较好,因为增量需求通常需要从0到1的UI还原,不会涉及太多存量逻辑,但增量需求场景下,比如对线上楼层的改版,因为存量需求已包含大量交互、业务逻辑等,此时如果使用D2C,还需要将原有的逻辑迁移到新的UI代码上,在业务逻辑复杂的情况下,有点得不偿失。
04 平台简介
理解,首先 MCube 会依据模板缓存状态判断是否需要网络获取最新模板,当获取到模板后进行模板加载,加载阶段会将产物转换为视图树的结构,转换完成后将通过表达式引擎解析表达式并取得正确的值,通过事件解析引擎解析用户自定义事件并完成事件的绑定,完成解析赋值以及事件绑定后进行视图的渲染,最终将目
该平台是一个功能相对完善、体验优良的一站式研发平台,当前核心功能是设计稿转代码,目前支持根据设计稿一键生成Jue(金融APP原生主要开发语言)、Vue、React,Taro代码,已在金融APP多个团队落地应用,覆盖了原生、H5多个业务线,以下是典型的应用场景:
平台的关键操作流程为:上传设计稿->打开设计稿->框选要生成代码的区域->查看并确认代码->下载代码,平台目前只支持sketch设计稿,上传设计稿的步骤建议由设计师通过Sketch插件上传,通过Sketch插件可以生成准确的切图并且可自动识别缺失字体,后续体验会更加丝滑。
05 高级功能介绍
理解,首先 MCube 会依据模板缓存状态判断是否需要网络获取最新模板,当获取到模板后进行模板加载,加载阶段会将产物转换为视图树的结构,转换完成后将通过表达式引擎解析表达式并取得正确的值,通过事件解析引擎解析用户自定义事件并完成事件的绑定,完成解析赋值以及事件绑定后进行视图的渲染,最终将目
5.1 CSS类名修改
5.2 列表的识别
5.3 列表多状态
5.4 标记功能介绍
06 结尾
理解,首先 MCube 会依据模板缓存状态判断是否需要网络获取最新模板,当获取到模板后进行模板加载,加载阶段会将产物转换为视图树的结构,转换完成后将通过表达式引擎解析表达式并取得正确的值,通过事件解析引擎解析用户自定义事件并完成事件的绑定,完成解析赋值以及事件绑定后进行视图的渲染,最终将目
经过持续攻关和优化,该平台已在京东金融APP原生、H5十几个页面、几十个楼层中落地应用。目前该平台已在内部生产使用阶段,后续会进一步优化生成的代码质量及易用性,比如添加对UI组件的支持,即生成的代码自动引入特定的UI组件库,预计2024年在京东集团内部推广,后期平台成熟后会对外开放。
架构探索之ClickHouse架构师日记—聊聊开发必掌握的那些实践技能高效开发与设计:提效Spring应用的运行效率和生产力
求分享
求点赞
求在看