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

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

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

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


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

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


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

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

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

目录
相关文章
|
3月前
|
人工智能 JSON Java
【极速入门版】编程小白也能轻松上手Comate AI编程插件
【极速入门版】编程小白也能轻松上手Comate AI编程插件
43 0
|
5月前
|
图形学 人工智能 C#
从零起步,到亲手实现:一步步教你用Unity引擎搭建出令人惊叹的3D游戏世界,绝不错过的初学者友好型超详细指南 ——兼探索游戏设计奥秘与实践编程技巧的完美结合之旅
【8月更文挑战第31天】本文介绍如何使用Unity引擎从零开始创建简单的3D游戏世界,涵盖游戏对象创建、物理模拟、用户输入处理及动画效果。Unity是一款强大的跨平台游戏开发工具,支持多种编程语言,具有直观编辑器和丰富文档。文章指导读者创建新项目、添加立方体对象、编写移动脚本,并引入基础动画,帮助初学者快速掌握Unity开发核心概念,迈出游戏制作的第一步。
286 1
|
5月前
|
开发者 Android开发 iOS开发
Xamarin开发者的神器!揭秘你绝不能错过的插件和工具,让你的开发效率飞跃式提升
【8月更文挑战第31天】Xamarin.Forms 是一个强大的框架,让开发者通过单一共享代码库构建跨平台移动应用,支持 iOS、Android 和 Windows。使用 C# 和 XAML,它简化了多平台开发流程,保持一致的用户体验。本指南通过创建一个简单的 “HelloXamarin” 应用介绍 Xamarin.Forms 的基本功能和工作原理。首先配置 Visual Studio 开发环境,然后创建并运行一个包含标题、按钮和消息标签的示例应用,展示如何定义界面布局及处理按钮点击事件。这帮助开发者快速入门 Xamarin.Forms,提高跨平台应用开发效率。
61 0
|
8月前
|
Java 开发者
效率工具RunFlow完全手册之Java开发者篇
这篇手册面向Java开发者,介绍了如何使用QLExpress执行Java代码和进行方法验证。示例包括数学计算、读取系统环境变量及格式化输出。QLExpress提供运行时执行Java代码的功能,并支持QLExpress语法的脚本文件。
50 3
效率工具RunFlow完全手册之Java开发者篇
|
8月前
|
存储 JSON 数据格式
效率工具RunFlow完全手册之进阶篇
RunFlow进阶指南包括搜索文件、计算器、解散文件夹、独立窗口运行、数据导入导出(JSON格式)及同步(本地及云服务如OneDrive)。此外,还提供定时任务功能,利用Cron表达式设定如每日12点执行清理。
74 1
效率工具RunFlow完全手册之进阶篇
|
8月前
|
SQL 存储 分布式计算
Kylin使用心得:从入门到进阶的探索之旅
【5月更文挑战第2天】Apache Kylin是开源大数据分析平台,提供亚秒级OLAP查询。本文深入解析Kylin的工作原理,包括预计算模型Cube、构建过程和查询引擎。常见问题涉及Cube设计、查询性能和资源管理,解决方案涵盖合理设计、性能监控和测试验证。文中还分享了Cube创建的JSON示例,并探讨了Cube构建优化、查询优化、与其他组件集成、监控维护及生产环境问题解决。通过学习和实践,读者能有效提升数据洞察力和决策效率。
467 5
|
8月前
|
JSON 开发者 数据格式
揭秘5.3k⭐开发者的秘密武器:it-tools在线工具集,你不可不知!
揭秘5.3k⭐开发者的秘密武器:it-tools在线工具集,你不可不知!
69 0
|
JavaScript 前端开发 uml
推荐 5 个开源的 yyds 效率神器
本期推荐开源项目目录: 1. Wox:效率神器 2. 图表编辑工具客户端 3. 在线白板工具 4. 分屏神器 5. 番茄钟
|
数据可视化 搜索推荐 程序员
丝滑!用了这款开发工具,我成了整个公司代码写得最秀的码农
丝滑!用了这款开发工具,我成了整个公司代码写得最秀的码农
|
Web App开发 移动开发 JSON
谈一谈|谷歌插件入门
谈一谈|谷歌插件入门
319 0

热门文章

最新文章