黑科技：进阶必备，推荐两款自动生成代码神器

关注上方“测试开发技术”，选择星标，

干货技术，第一时间送达！

最近两年，在互联网行业各大技术峰会上，都能看到关于工程效能这个概念，从侧面也反映出了研发效能已经逐渐被各企业所重视！

在以前，软件行业还处于野蛮发展时期时，互联网企业比拼的是家底，谁的家底雄厚，谁肯愿意烧钱，谁就能存活下来。而现在比拼的是什么？是研发能力，具体来讲就是从需求转化成软件或者服务的能力，这其中研发效能的高低对于需求转化速率起到了至关重要的作用。

在研发工作实践过程中，围绕提升研发效能，能尝试做的事，有很多很多。当然，我们今天分享的重点，并不是讨论关于什么是研发效能，而是，针对在实际实践如何提升研发效能过程中，分享两个非常有意思的工具。

1. 自动生成前端原型：Sketch2Code

我们知道，在做前端开发时，是先由产品人员确定好需求，再借助产品原型工具来实现产品GUI界面的设计，前端拿到原型再去开展具体的前端编码工作。

但是会发现即便市面上，已经有了类似Axure和Modao等原型工具，但是画界面的成本依然很高。这里介绍一种可以将图片GUI设计稿，甚至是手画GUI设计稿转化成目标平台代码的一键自动化生成方案。

直接上图：

在上面的例子中，先手绘GUI界面设计，然后通过Sketch2Code可以直接转换成目标平台的代码，如果你指定的目标平台是Web，那就直接生成html，如果你指定的目标平台是iOS，那就会生成XCode的项目，通过编译打包后就可以直接在iPhone上安装执行了，采用这种方式的引入将大幅提升原型构建环节的效率。

关于Sketch2Code

进一步来了解一下Sketch2Code，它是一个前端智能AI-识别草图生成代码且基于 Web 的解决方案，使用 AI 将手绘的用户界面草图转换为可用的 HTML 代码。Sketch2Code 由微软和 Kabel、Spike Techniques 合作开发。

Sketch2Code: 核心是有一套微软自定义视觉模型（Custom Vision）：这个模型是基于不同的手绘稿的图象训练得出的，并标记了与常见 HTML 元素（如文本框、按钮、图像等）相关的信息。

Sketch2Code 项目地址：

https://github.com/Microsoft/ailab/tree/master/Sketch2Code

实际效果验证：

https://sketch2code.azurewebsites.net/

笔者已经亲自试验过（手绘草图，自动生成原型），识别效果还不错，感兴趣的读者，可以自行体验一下。

2. 自动生成前端代码：teleportHQ

如果你觉得刚刚那个已经很厉害了，那接下，给大家介绍一个更牛的项目，大家可以先看几张效果图，大家看到了什么？

图片中，一位产品经理，在前面的白板上正在画草图，在后面的屏幕上，显示整个识别过程，并自动同步生成代码和UI界面预览。

整个过程中，电脑借助摄像头拍摄到产品经理正在白板上绘制的原型草稿，一边就即时“画”出了UI，生成了代码，展示着成品网页。每一步都是机器自动识别产品经理画出来的东西，直接变成相应的网页样式，还附带了HTML代码。进行任何增删，都可以实时跟进、更新。

随着画图的那位产品经理停笔，识别也就完成了，此时的代码清晰可鉴。网页也生成了，和正常的网页一样，可以随意调整大小并适配。

有了这个工具，大家只要在白板上勾勾画画，就可以立马看到成品长什么样，敲定方案，一次成型，还可以直接拿去改进UI和代码，给设计师和前端开发省了不少功夫，能把一两个星期的工作，压缩到一两天，效率提升N倍。

这个工具出自一个名为teleportHQ的项目，由Evo Forge和Corebuild两家欧洲公司合作创立，欧洲区域发展基金（European Fund for Regional Development）出资赞助，他们希望这个项目能让非技术人员也能方便的创建可视化的应用程序和web页面。

该项目通过支持向量机（SVM）、神经网络和XGBoost三种方式，实现对web页面的语义分割，目前已经可以生成React，React Native，Vue，HTML/CSS和AngularJS代码。

teleportHQ的项目：

https://github.com/teleporthq

3. 小结

看完了上述两款工具（项目）的强悍能力，相信大家能隐约感受到研发效能提升的魅力之处，可能有的读者会想，有了这些自动生成原型、自动生成代码工具，那前端开发人员岂不是有失业了？这是个认知上的误区，发明这些工具，本质的目的: 并不是说，把谁淘汰，或者是把某类研发岗位（职业）淘汰，而是希望通过这一系列的研发效能的提升点，让大家的工作可以开展起来更高效，让人的工作，更聚焦在更有价值，更有意义的工作创作上。

这个和测试行业中，常被提到的一个观点：引入自动化测试，只是希望将人的时间，从那些重复性的工作中解脱出来，去做更多有价值有探索性的工作，并不是为了淘汰手工测试人员一样的道理！

好了，今天的分享就到这里了，年底较忙，挤出时间，创作不易，大家多多支持！更多好文，黑科技，请持续关注我！

如果你觉得文章还不错，请大家点赞、分享、关注 下，因为这将是我持续输出更多优质文章的最强动力！

作者新书

新书资讯：新书除了纸质图书外，电子版也已在京东、当当网上线了。

（点击直达小程序)

推荐阅读

重磅消息 |《自动化测试实战宝典：从小工到专家》隆重上市！

推荐一款最强Python自动化神器！不用写一行代码！

推荐一款万能抓包神器：Fiddler Everywhere

推荐一款技术人必备的接口测试神器：Apifox

推荐一款Python开源库，技术人必备的造数据神器！

重磅消息 | 2020年最新全栈测试开发技能实战指南（第1期）

END

所有原创文章

第一时间发布至此公众号「测试开发技术」

长按二维码/微信扫码关注

关注后，回复「me」试试

点击阅读原文