目录
- 前言
- 场景
- pix2code
- imgcook
- 起步
- 定制化处理
- 适用场景
- End
前言
设计稿生成代码一直是前端追求的方向之一,最近团队项目活动类型H5需求很多,需要维护很多App的活动,尤其一到节假日的时候需求尤其的多。
下面分享总结一下我发现了什么问题,解决问题的思路,是如何解决的,最终提高团队生产力。
场景
在开发中遇到了一些问题如下
- 页面还原与设计稿差距很大,还原质量不理想。
- 设计稿明明很简单,还需要费一定时间去调整布局、兼容、图片CND。
- 容易遗漏一些UI细节。
这些问题由于种种原因在项目开发中很常见。调样式、布局、处理图片,花费了开发周期中的大量时间。从这个现象出发,调研了一些设计稿生成代码的方案.
最开始,是想从视觉(图片等)生成代码,这条线,找到了pix2code这套解决方案。但是,成本很高,最终的效果是不确定的,为什么说不确定呢,下面pix2code章节会说明。
本来我一直关注一个博主,一个不火的博主@设计稿智能生成代码,他们团队imgcook这款产品,抱着试一试的想法,走上了设计稿生成代码这条线。加上一些团队定制化的东西,成为了团队生产力的得力武库。详情见后面imgcook详细章节。
pix2code
这个项目是一个研究项目,演示了深度神经网络从视觉输入生成代码的应用。pix2code原型仅需要一个输入图像,并且显示出77%的准确性,创始人表示pix2code有潜力结束对手动变成GUI的需求。
通俗一点说人家这个算是个半成品的神经网络算法,你要通过不断的定向训练来生成最终算法。 官网给出的基础训练需要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源码,非常贴心。
- React 开发规范:支持生成视图和逻辑代码的 React DSL
- Rax 开发规范:支持生成视图和逻辑代码的 Rax 0.x DSL
- H5 开发规范:支持生成视图和逻辑代码的 HTML DSL(不支持生命周期)
- Vue 开发规范:支持生成视图和逻辑代码的 Vue 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一个监控平台下这片文章不会烂尾,最近打算重新启动了。🙏理解万岁...