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

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

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

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


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

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. 小结


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

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

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

目录
相关文章
|
小程序 JavaScript 前端开发
微信小程序前后端交互与WXS的应用
微信小程序前后端交互与WXS的应用
379 0
|
JavaScript PHP 开发工具
web如何将动态内容分享到Facebook,Twitter等社交平台
web如何将动态内容分享到Facebook,Twitter等社交平台
1597 0
web如何将动态内容分享到Facebook,Twitter等社交平台
|
移动开发 JavaScript HTML5
Vue集成vue-video-player实现播放视频
Vue集成vue-video-player实现播放视频
942 0
|
3月前
|
运维 安全 网络协议
打印机共享,错误代码0x00000709,0x0000011b等修复
本文介绍了多款打印机共享修复工具,适用于解决Windows系统连接共享打印机时出现的各种问题,例如错误代码0x0000011b、0x00000709等。内容涵盖问题原因分析、推荐工具介绍及详细修复步骤,帮助用户快速恢复打印机连接。
627 0
|
9月前
|
JavaScript 前端开发 Linux
flutter开发-figma交互设计图可以转换为flutter源代码-如何将设计图转换为flutter源代码-优雅草央千澈
flutter开发-figma交互设计图可以转换为flutter源代码-如何将设计图转换为flutter源代码-优雅草央千澈
328 18
|
6月前
|
JavaScript 前端开发 程序员
甚至用不了五分钟就能学会vscode插件开发
本文介绍了VSCode插件的开发流程,从创建项目到最终发布。首先通过安装`yo`和`generator-code`脚手架工具初始化项目,选择JavaScript语言配置基础信息。接着,在`extension.js`中实现业务逻辑,例如将中文“变量”替换为“var”。通过F5进入调试模式验证功能。完成后使用`vsce`工具进行打包,解决可能遇到的版本不兼容或README文档问题。最后生成`.vsix`文件,可通过VSCode的“从VSIX安装”加载插件,实现开发闭环。进一步可将插件发布至官方市场供更多开发者使用。
|
7月前
|
人工智能 数据可视化 定位技术
AI 小技巧 | PPT 也能用数据地图?
AI 小技巧 | PPT 也能用数据地图?
277 4
|
9月前
|
人工智能 自然语言处理 API
大模型编程(3)让 AI 帮我调接口
这是大模型编程系列第三篇,分享学习某云大模型工程师ACA认证免费课程的笔记。本文通过订机票和查天气的例子,介绍了如何利用大模型API实现函数调用,解决实际业务需求。课程内容详实,推荐感兴趣的朋友点击底部链接查看原文,完全免费。通过这种方式,AI可以主动调用接口并返回结果,极大简化了开发流程。欢迎在评论区交流实现思路。
941 1
|
算法 安全 Linux
Ansible自动化工具copy复制用法
Ansible 中的 copy 模块用于将文件或目录从本地计算机或远程主机复制到远程主机上的特定位置。它是一个功能强大的模块,可用于各种文件传输任务. ### 作用 将配置文件复制到远程服务器 将应用程序部署到远程服务器 将日志文件从远程服务器复制到本地计算机 备份和恢复文件和目录
400 2
Ansible自动化工具copy复制用法
在Linux中,如何创建一个分区?
在Linux中,如何创建一个分区?