聊一聊如何通过UI智能生成代码提高团队成产力

3,963 阅读10分钟

目录

  • 前言
  • 场景
  • pix2code
  • imgcook
  • 起步
  • 定制化处理
  • 适用场景
  • End

前言

设计稿生成代码一直是前端追求的方向之一,最近团队项目活动类型H5需求很多,需要维护很多App的活动,尤其一到节假日的时候需求尤其的多。

下面分享总结一下我发现了什么问题,解决问题的思路,是如何解决的,最终提高团队生产力。

场景

在开发中遇到了一些问题如下

  • 页面还原与设计稿差距很大,还原质量不理想。
  • 设计稿明明很简单,还需要费一定时间去调整布局、兼容、图片CND。
  • 容易遗漏一些UI细节。

这些问题由于种种原因在项目开发中很常见。调样式、布局、处理图片,花费了开发周期中的大量时间。从这个现象出发,调研了一些设计稿生成代码的方案.

最开始,是想从视觉(图片等)生成代码,这条线,找到了pix2code这套解决方案。但是,成本很高,最终的效果是不确定的,为什么说不确定呢,下面pix2code章节会说明。

本来我一直关注一个博主,一个不火的博主@设计稿智能生成代码,他们团队imgcook这款产品,抱着试一试的想法,走上了设计稿生成代码这条线。加上一些团队定制化的东西,成为了团队生产力的得力武库。详情见后面imgcook详细章节。

pix2code

这个项目是一个研究项目,演示了深度神经网络从视觉输入生成代码的应用。pix2code原型仅需要一个输入图像,并且显示出77%的准确性,创始人表示pix2code有潜力结束对手动变成GUI的需求。

传送门:github.com/tonybeltram…

通俗一点说人家这个算是个半成品的神经网络算法,你要通过不断的定向训练来生成最终算法。 官网给出的基础训练需要1500次,就是需要让他不断的识别设计稿并纠正识别的正确性。

考虑到已经有很多网站可以在线使用,而且每天都有新网站创建,因此从理论上讲,网络可以提供无限量的培训数据

当然,我个人认为1500次是远远不够的,后面很可能需要定制化一些东西,比如团队特有的一些框架、代码风格,设计稿风格等等。我们需要解决的是团队层面的问题而不只只是个人。

学习成本

  • python

官网一直强调“实验性”,“toy example”等等,最终的效果是不确定,风险很高的,虽然我相信会有训练的非常好的算法会出现,但是对于我们团队来说风险太大了,在我们现在团队层面是不推荐的。希望以后谁训练完了我去膜拜一下。以后我可能也会私下里偷偷去“玩一玩”。如果有所成果,我会再来分享。

imgcook

首先我们来一些简介。

imgcook产品是阿里巴巴前端委员会智能化小组的服务化的内外落地产品,专注以 Sketch、PSD、静态图片等形式的视觉稿作为输入,通过智能化技术一键生成可维护的前端代码,包含视图代码、数据字段绑定、组件代码、部分业务逻辑代码等。(广告费到时候可以私聊我哈哈)

传送门:www.imgcook.com/

我这边采用的是设计稿Sketch、PSD生成sechema这条线。而且提供了DSL、Plugn等团队定制化功能。

先话不多说,我是怎么做的呢?

起步

首先我们需要下载Sketch(我这边用Sketch来做演示)

然后我们要在imgcook官网下载Sketch,然后安装到Sketch。

向UI索取项目UI的Sketch源文件。然后我们来本地打开。

我们来打开看一下效果。

在Sketch的这个操作界面中呢,首先可以看到右侧多了一栏插件。

首先先讲解一下最大的三个按钮,导出数据、合并、成组。

  • 导出数据 - 根据设计稿结构生成结构化json,结构化json用于生成sechema源码,页面调整完毕后即可点击这个按钮导出数据。
  • 合并 - 用于合并图层。为什么要合并图层呢,如果你详细看一下UI源文件的话,设计稿中很多的效果都是由N多图片拼凑起来的,我们在项目中用到的切图往往是UI合并导出的完整图,所以说,这个功能还是很有必要的。这边你记得这个功能即可,不做操作也是可以的。
  • 成组 - 把一些图层识别为一个组,代码中体现为一个公共父盒子模型。

其次讲一下下面有个添加协议的下拉框,点开后可以看到一些协议规则在里面。

  • 添加类型名前缀 - 防污染。
  • 添加类名 - 自定义class
  • 数据模型
  • 添加字段名
  • 添加循环
  • 添加逻辑名
  • 设置组件名
  • 设置模块名
  • 自定义协议
  • 设置导出图片

这些规则在做DSL解析的时候会用到,在解析schema源码时候要根据配置的协议来调整解析结构。自定义协议给予了开发者很多发空间。

接下来,在左侧菜单处,选中一个画板,点击导出数据。然后等待解析完成。

解析完成后会弹出如上弹窗,我们点击去粘贴。

直接在这个页面ctrl + v 即可看到如下情形。

左侧结构是imgcook解析出来的结构化Sechema源码组件树,右侧还可以对解析后的样式进行调整,都是可操做的。

点击顶部导航中的“代码”按钮,我们可以看到官方给予的一些针对此sechema源码解析DSL示例,你可以直接选中某种类型的DSL进行代码导出功能。

导出的代码是一套文件,我们用 H5 开发规范(静态)导出看一下效果。

生成的目录结构及文件如下。

运行的效果如下,文字识别成了文字,图片生成了图片,上传到了阿里云的cdn上。

效果还是不错的,文件中生成了三套样式供你使用。

拿react举例子,三套样式有什么用呢

  • vw布局拉伸性很好,可以直接在静态h5中使用
  • 750的px布局,这套样式,如果你在项目中编译环境配置了px自动转rem。那么px布局的样式尤为适合你。
  • rem布局就不用多说了,如果你没配,用这套。

定制化处理

以上就是官放给出的一些流程,如果团队上要使用的话,我们遇到了一些问题。

这里重点说一下,官方给出的接入流程是没有问题的,你只要按照我上面说的步骤来接入即可,如果你们团队或者个人要接入的话,是可以完美接入的。下面的问题主要是我们团队遇到的问题以及解决的方案。

1、DSL问题

虽然官网给出了一些样本,但是并不符合我们团队的代码风格、规范。官方当然也想到了这个问题,给予你自己创建编写DSL的权限,我们来看一下。

当然随之配套的也给出了相应的DSL源码,非常贴心。

原理如下:

按照正常的流程来说是没有问题的,创建完 Github 的 repo,会自动发起添加你为项目协同者权限(需在 Github 消息通知里确认下加入),然后可直接提交 Commit。

接下来,就是比较繁琐的审批环节,是的比较繁琐,你自己编写的DSL需要过他们的审核,才可以在自己账号的代码DSL模块下看到自己的解析模块,每次更新都要走审核。这个环节是不符合我们预期的, 我们希望的是方便又快捷的的维护、调试模式,

所以我把DSL解析的这个过程放在了我们自己的能力之中,不走官方。

下面这个流程图可以看到两者的流程上差别。

定制化私有的DSL之后,发布到npm上,通过nodejs + commander 全局命令方式进行文件编译处理,并生成编译后的文件。(这里如果我没讲明白的话可以留言,我这边开源一个demo给你看好了)

这样DSL编译模式的问题解决后,我们发现了另一个问题如下。

2、图片CDN

schema源码中所有的切图都默认上传到了阿里云cnd上,这一点官方的文档里也做了一些说明。

传送门:imgcook.taobao.org/docs?slug=c…

具体操作就不说了,一句话总结:“需要定制,很麻烦”。

换一种思路,既然我们已经把DSL编译的步骤用node做到了,那么,何不写一个批量替换cdn外链为内链接的自动脚本呢?思路如下:

  • 读取DSL编译后文件中所有阿里cdn图片的地址(fs、vm)
  • 下载下来(fs)
  • 上传到我们自己的cdn上 (needle)
  • 然后把上传后的链接替换回去即可。(fs)

我们来看一下最终效果。

我们的组件是基于react的,最终生成的组件跑出来的效果如图。dom结构与上方“H5 静态规则”还是有一些区别的,但是生成页面布局的质量还是不错的。

下面是我写的DSL跑出来的效果。

适用场景

并不是所有的业务都适合接入这套流程。

  • 移动端细粒度模块开发场景 - 特别推荐
  • 移动端活动页 - 特别推荐
  • 移动端全页面开发 - 推荐
  • PC 端 toC 应用 - 推荐
  • PC 端 toB 应用
  • PC 端富交互应用 - 不推荐
  • 游戏场景 - 不推荐

复杂的交互、未定版UI设计,都是不适合接入此套流程的。如果接入,反而可能有副作用。这一点呢,我相信随着算法、流程上的完善都会一一解决。

End

关于这套流程:暂时并不可以代替前端所有的工作量,我认为这套工具对我带来的生产力提升只有30%,其实这个数据已经很高了,还是非常不错的。后面我会精准的统计一下我们团队提升的团队效率。

这套流程接入后可以让前端更专注与业务逻辑开发,而不是被布局样式等拘泥住。

最后:前一阵还是很忙,中级知识体系也整理完毕了,我再过几遍然后开放出来。大家敬请期待。DIY一个监控平台下这片文章不会烂尾,最近打算重新启动了。🙏理解万岁...