黑科技,推荐两款开源自动生成代码神器!

简介: 两款开源神器!

此文章来源于官方公众号:「测试开发技术」
版权声明:允许转载,但转载必须保留原链接;请勿用作商业或者非法用途

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

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

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

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

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

但是会发现即便市面上,已经有了类似AxureModao等原型工具,但是画界面的成本依然很高。这里介绍一种可以将图片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. 小结

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

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

好了,今天的分享就到这里了,年底较忙,挤出时间,创作不易,大家多多支持!

目录
相关文章
|
IDE 数据可视化 Java
5款经典代码阅读器的使用方案对比
代码阅读是技术人的必备技能之一,高效地梳理代码能够极大程度上提高开发人员的工作效率,进一步为业务创造新价值。
12611 0
5款经典代码阅读器的使用方案对比
|
SQL 关系型数据库 数据库
学习分布式事务Seata看这一篇就够了,建议收藏
学习分布式事务Seata看这一篇就够了,建议收藏
18228 2
|
11月前
|
并行计算 前端开发 物联网
全网首发!真·从0到1!万字长文带你入门Qwen2.5-Coder——介绍、体验、本地部署及简单微调
2024年11月12日,阿里云通义大模型团队正式开源通义千问代码模型全系列,包括6款Qwen2.5-Coder模型,每个规模包含Base和Instruct两个版本。其中32B尺寸的旗舰代码模型在多项基准评测中取得开源最佳成绩,成为全球最强开源代码模型,多项关键能力超越GPT-4o。Qwen2.5-Coder具备强大、多样和实用等优点,通过持续训练,结合源代码、文本代码混合数据及合成数据,显著提升了代码生成、推理和修复等核心任务的性能。此外,该模型还支持多种编程语言,并在人类偏好对齐方面表现出色。本文为周周的奇妙编程原创,阿里云社区首发,未经同意不得转载。
28929 18
|
9月前
|
数据采集 存储 JSON
用Scrapy精准爬取BOSS直聘特定行业职位
用Scrapy精准爬取BOSS直聘特定行业职位
|
11月前
|
SQL 数据可视化 关系型数据库
开源低代码平台推荐!10款优秀的开源低代码平台!
本文介绍了10款免费开源低代码开发平台,包括JeeLowCode、Ample、WaveMaker、JeecgBoot、Jabdp、华炎魔方、NocoBase、Appsmith、NodeRED和Budibase。这些平台通过减少代码编写量,提供灵活的开发工具,支持企业快速构建应用,满足不同开发需求和应用场景。文章详细列出了各平台的核心特点、适用场景及推荐指数,为企业选择最适合的开发工具提供了全面指导。
|
JavaScript
基于Vue2.X/Vue3.X对Monaco Editor在线代码编辑器进行封装与使用
这篇文章介绍了如何在Vue 2.X和Vue 3.X项目中封装和使用Monaco Editor在线代码编辑器,包括安装所需依赖、创建封装组件、在父组件中调用以及处理Vue 3中可能遇到的问题。
2852 1
基于Vue2.X/Vue3.X对Monaco Editor在线代码编辑器进行封装与使用
|
11月前
|
人工智能 自然语言处理 算法
更快、更强、更经济!港大开源大模型RAG系统LightRAG
香港大学研究团队推出LightRAG,一款新型检索增强生成系统。LightRAG通过引入图结构优化文本索引和检索,克服了传统RAG系统在上下文感知、数据表示和更新效率方面的局限。其双级检索系统、图结构与向量表示的融合及增量更新算法,显著提升了检索准确性和效率,适用于智能客服、知识问答和智能搜索等多个领域。
499 3
|
11月前
|
监控 数据安全/隐私保护 UED
数字版权管理
【10月更文挑战第30天】数字版权管理
450 4
|
Linux C++
Linux c/c++之进程的创建
这篇文章介绍了在Linux环境下使用C/C++创建进程的三种方式:system函数、fork函数以及exec族函数,并展示了它们的代码示例和运行结果。
267 0
Linux c/c++之进程的创建
|
自然语言处理 安全 测试技术
CodeGeeX高级功能
【8月更文挑战第30天】CodeGeeX高级功能
445 6