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

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

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

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


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

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


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

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

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

目录
打赏
0
2
0
0
134
分享
相关文章
腾讯出品!这款Markdown神器让你码字效率翻倍,双模式编辑太香了!
由腾讯开源的CherryMarkdown编辑器,集思维导图式大纲写作与专业分屏模式于一身,支持实时预览、流程图绘制、多主题切换等硬核功能,助你轻松驾驭技术文档、博客写作、会议纪要等多种场景!
117 6
揭秘Python编程之美:从基础到进阶的代码实践之旅
【9月更文挑战第14天】本文将带领读者深入探索Python编程语言的魅力所在。通过简明扼要的示例,我们将揭示Python如何简化复杂问题,提升编程效率。无论你是初学者还是有一定经验的开发者,这篇文章都将为你打开一扇通往高效编码世界的大门。让我们开始这段充满智慧和乐趣的Python编程之旅吧!
💡Android开发者必看!掌握这5大框架,轻松打造爆款应用不是梦!🏆
在Android开发领域,框架犹如指路明灯,助力开发者加速应用开发并提升品质。本文将介绍五大必备框架:Retrofit简化网络请求,Room优化数据库访问,MVVM架构提高代码可维护性,Dagger 2管理依赖注入,Jetpack Compose革新UI开发。掌握这些框架,助你在竞争激烈的市场中脱颖而出,打造爆款应用。
624 3
从零起步,到亲手实现:一步步教你用Unity引擎搭建出令人惊叹的3D游戏世界,绝不错过的初学者友好型超详细指南 ——兼探索游戏设计奥秘与实践编程技巧的完美结合之旅
【8月更文挑战第31天】本文介绍如何使用Unity引擎从零开始创建简单的3D游戏世界,涵盖游戏对象创建、物理模拟、用户输入处理及动画效果。Unity是一款强大的跨平台游戏开发工具,支持多种编程语言,具有直观编辑器和丰富文档。文章指导读者创建新项目、添加立方体对象、编写移动脚本,并引入基础动画,帮助初学者快速掌握Unity开发核心概念,迈出游戏制作的第一步。
470 1
"告别Java8 Stream噩梦,JDFrame神器来袭!让你的代码简洁如诗,效率翻倍,编程新体验等你尝鲜!"
【8月更文挑战第11天】Java 8的Stream API以强大的函数式编程能力革新了集合数据处理方式,但其抽象概念和复杂的链式调用让不少开发者望而却步。为此,JDFrame框架应运而生,通过直观易懂的操作符简化Stream使用,减少代码量并提高效率。
195 3
Xamarin开发者的神器!揭秘你绝不能错过的插件和工具,让你的开发效率飞跃式提升
【8月更文挑战第31天】Xamarin.Forms 是一个强大的框架,让开发者通过单一共享代码库构建跨平台移动应用,支持 iOS、Android 和 Windows。使用 C# 和 XAML,它简化了多平台开发流程,保持一致的用户体验。本指南通过创建一个简单的 “HelloXamarin” 应用介绍 Xamarin.Forms 的基本功能和工作原理。首先配置 Visual Studio 开发环境,然后创建并运行一个包含标题、按钮和消息标签的示例应用,展示如何定义界面布局及处理按钮点击事件。这帮助开发者快速入门 Xamarin.Forms,提高跨平台应用开发效率。
90 0
【独家揭秘】当WPF邂逅DirectX:看这两个技术如何联手打造令人惊艳的高性能图形渲染体验,从环境搭建到代码实践,一步步教你成为图形编程高手
【8月更文挑战第31天】本文通过代码示例详细介绍了如何在WPF应用中集成DirectX以实现高性能图形渲染。首先创建WPF项目并使用SharpDX作为桥梁,然后在XAML中定义承载DirectX内容的容器。接着,通过C#代码初始化DirectX环境,设置渲染逻辑,并在WPF窗口中绘制图形。此方法适用于从简单2D到复杂3D场景的各种图形处理需求,为WPF开发者提供了高性能图形渲染的技术支持和实践指导。
532 0
探索代码之美:我的编程思考之旅
【5月更文挑战第8天】 在数字化的浪潮中,编程已成为一种艺术,一种用逻辑与创造力编织的语言。本文将分享我在编程实践中的一些技术感悟,从最初的困惑到逐渐的深入理解,再到最后的灵活应用,我经历了一段充满挑战与收获的旅程。文章不仅探讨了编程技巧的提升,还涉及了对软件设计原则的认识,以及如何通过不断学习来适应快速变化的技术环境。
秒建炫酷的开源项目文档,这款神器用起来够优雅
学习过我的开源项目mall的朋友应该知道,我有一个使用Docsify 搭建的项目文档网站。使用Docsify搭建文档网站虽然简单,但是缺少分类、标签、SEO这类功能,随着文档越来越多,查找起来有点不方便!今天给大家推荐一个炫酷的文档主题vuepress-theme-hope,用来搭建项目文档网站正合适! vuepress-theme-hope 简介 vuepress-theme-hope是一个具有强大功能的VuePress主题,为Markdown添加了更多增强语法,可用于搭建项目文档和博客网站。支持分类和标签功能,可以让你的文档更加结构化!内置多种插件,功能强大,值得一试!
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等