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

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

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

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


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

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


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

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

直接上图:

微信图片_20220526225937.png

在上面的例子中,先手绘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


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

微信图片_20220526225825.png微信图片_20220526225839.png微信图片_20220526225853.png

图片中,一位产品经理,在前面的白板上正在画草图,在后面的屏幕上,显示整个识别过程,并自动同步生成代码和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. 小结


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

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

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

目录
相关文章
|
2月前
|
监控 安全 数据可视化
情报搜集神器:Spiderfoot 保姆级教程
情报搜集神器:Spiderfoot 保姆级教程
|
7月前
|
Java 开发工具 Maven
推荐一款微软出品的开发神器,体验不输IDEA
最近微软的开发工具VSCode频繁更新Java支持,又是支持SpringBoot,又是支持Lombok,让我不禁好奇VSCode是不是也能胜任Java开发了?于是抽空体验了一把,确实完全可以胜任,Java开发者又有了新选择,不仅好用而且开源!今天带大家体验下VSCode,体验超越Eclipse,不输IDEA!
|
7月前
|
数据库连接 测试技术 开发工具
猿创征文|工具百宝箱-编辑器-笔记工具-日常小工具-原型设计工具
猿创征文|工具百宝箱-编辑器-笔记工具-日常小工具-原型设计工具
|
10月前
|
数据可视化 搜索推荐 程序员
丝滑!用了这款开发工具,我成了整个公司代码写得最秀的码农
丝滑!用了这款开发工具,我成了整个公司代码写得最秀的码农
|
12月前
|
缓存 小程序 数据库
微信小游戏开发最全系列教程
嗨!大家好,我是小蚂蚁。 最近有非常多的新朋友关注了我,再加上这一段时间里,我又写了很多的原创教程,所以,更新一下这篇“微信小游戏开发最全系列教程”,做了很多的补充,希望能够对你有帮助,可以把这篇文章收藏一下,以便在需要的时候可以找得到,因为很可能这是全网最好的微信小游戏开发系列教程资料了。 这里的教程文章已经帮助过很多人做出了自己的第一款游戏,希望它们还能够继续帮助更多想要做游戏的朋友,进入游戏开发世界的大门。
130 0
|
JavaScript Java 程序员
为什么人家的开源项目文档如此炫酷?原来用的是这款神器
VuePress是Vue驱动的静态网站生成器。对比我们的Docsify动态生成网站,对SEO更加友好。 使用VuePress具有如下优点: 使用Markdown来写文章,程序员写起来顺手,配置网站非常简洁。 我们可以在Markdown中使用Vue组件,如果你熟悉Vue的话会非常方便。 打包网站时会为每个页面预渲染生成静态的HTML,性能好,也有利于SEO。
|
监控 Ubuntu Linux
强烈推荐:网工利器PNETLab模拟器
强烈推荐:网工利器PNETLab模拟器
796 0
强烈推荐:网工利器PNETLab模拟器
|
数据采集 Linux 开发工具
猿创征文 | 三款Python学习开发任选工具
猿创征文 | 三款Python学习开发任选工具
90 0
猿创征文 | 三款Python学习开发任选工具
秒建炫酷的开源项目文档,这款神器用起来够优雅
学习过我的开源项目mall的朋友应该知道,我有一个使用Docsify 搭建的项目文档网站。使用Docsify搭建文档网站虽然简单,但是缺少分类、标签、SEO这类功能,随着文档越来越多,查找起来有点不方便!今天给大家推荐一个炫酷的文档主题vuepress-theme-hope,用来搭建项目文档网站正合适! vuepress-theme-hope 简介 vuepress-theme-hope是一个具有强大功能的VuePress主题,为Markdown添加了更多增强语法,可用于搭建项目文档和博客网站。支持分类和标签功能,可以让你的文档更加结构化!内置多种插件,功能强大,值得一试!