查看原文
其他

国产神器,让前端告别搬砖!

码农翻身 2022-10-14

01. 外包神器

接了一个急活,报酬尚可,整体前端打包给 3W。业务方特别着急,要求在 2 周之内交付一个商场小程序,对方提供了 UI 设计稿。最近工作也比较忙,要赶 618 公司活动,为了挣这个快钱,外包业务方的各种紧逼之下,在网上搜索了一圈,发现了一个网站:CODE.FUN,深入的研究了一下这个平台,看看这到底是何方神圣?官网入口:https://ide.code.fun/u/H0WeAhuu(大家可以复制到电脑浏览器打开)在官网看到了这样一段话:

UI 设计稿智能生成前端代码,8 小时工作量,10 分钟完成。


CODE.FUN 介绍视频也就是说,相当于可以直接将项目开发中的 UI 设计稿转成代码,前端程序员可以直接拷贝使用,这样平时大量的页面工作,全部被它承包,我只需要写基础业务逻辑就好了,这实在是太爽了。

最重要的是,这个平台支持 Sketch,Psd,Figma 等形式 UI 设计稿,最近还支持了即时设计,正好这次外包等稿子是 PSD 格式,看到这里已经很忍不住啦。

02. 神器生产力:提效500%在构建页面前,我尝试测试了几张设计稿,还是非常 surprise 的。智能生成的前端代码展示页面基本可以达到 95% 以上的还原度。在保证设计稿还原度的前提下,CODE.FUN 还提供二次编辑功能,对生成的代码进行二次优化,比如解组编组,切图,数据绑定等功能也是非常强大的!那生成的代码质量如何呢?我进一步对其进行了探索。首先从代码结构来看,生成的代码分层清晰、模块化正常,无论是相交、相离和包含的位置关系,都能很好的识别出来。如果是非常复杂的图层,提前做一下切图处理即可。其次是样式类名,该产品采用的是原子化模块构建标签样式。从 dom 结构看每个标签都添加了不同的类名,但细看代码发现样式分为全局样式和局部样式,flex 布局采用全局样式,其他采用局部样式,这也是最近在大厂非常流行的一种写法(需要学习的小伙伴可以查看 tailwindcss)。最后,这个平台支持 Sketch,Psd,Figma 等形式 UI 设计稿,最近还支持了即时设计,同时可以导出多端平台代码,H5,小程序,Vue,React 等。03. CODE.FUN  市面最优秀的D2C产品之一等交付项目后,我也对目前市面上的前端智能化平台做了一下调研,和其他转代码平台相比,CODE.FUN 到底有哪些优势?首先,在设计稿的还原这个最基础的功能上,目前优于市面甚多同类平台,几乎能做还原的 100%。在布局识别的准确性来说,CODE.FUN 能进行非常优秀的元素分组规划以及识别出各种 Flex 布局。
当然,AI 也不能万能的,在 CODE.FUN 生成的代码里面,还是有部分“漏网之鱼”,有少许不合理的地方。如果“AI 生成一分钟,手工修改半小时”,那也太得不偿失了。因此 CODE.FUN 还提供了非常丰富的“智能工具箱”,用于快速将不合理的代码修改到几乎完美的状态。比如当设计稿比较复杂的时候,对于设计稿中的某些元素,可能因为父子元素坐标“混乱”而导致其可能被按照绝对定位来处理,导致出现一种识别异常的状态。所以,出现绝对定位的地方是需要"消灭"的,CODE.FUN 目前可以通过重新编解组、手动指定绝对定位元素、区域切图等多种手段来重新调整该元素与相邻元素的关系,从而让其恢复到满足程序员“心意”的状态。
在代码的可维护性上,它生成的 CSS 代码的更加符合我们的手写逻辑,最近,上新支持了 CSS 在线编辑和可视化编辑,更加友好。最近,他们开放了支持第三方 UI 组件功能,不仅支持一些市面上常见的,还支持和公司自定义组件库。我们只需要把设计稿上传到 CODE.FUN 以后,就可以选择自定义常见组件(输入框、单选/多选框等)、高级组件(日历、进度条等),或关联已有组件,这个功能能够更快帮我们生产实际的业务代码。

目前,CODE.FUN 官网上还开通了 PC 稿的内测通道,哈哈,想要 1 小时打卡下班的小伙伴,可以去试一下:扫码加入「PC 稿社群内测」

04. 技术提效:做前端,不搬砖说到这,想再和大家唠唠,这么多行业大佬目前都在研发这类工具,由此会不会导致失业?这是最近很多道友在问的话题。首先,个人认为前端智能化是一个大趋势,技术不可阻挡,难免有些重复的工作会被取代,市场需求减少,但这不意味着失业,而是在一定程度上提效,提高公司的研发效率,提升工作者的工作价值。其次,客观来讲,大家可以实际观察一下,普通前端程序员的日常开发中,绝大多数的研发业务都是简单枯燥的重复,这反而是对自己的一个折磨,工具化自动化大大解放了程序员的生产力。对于希望在 35 岁不被淘汰的前端程序员来说,要多提升自己在业务深层次发展的能力,而不是日复一日的做“搬砖活”。好了,今天就先唠到此处,作为一个技术热衷者,最后还是推荐大家多体验一下新技术!赶紧点击“阅读原文”去体验吧下载链接:https://ide.code.fun/u/GVgaqTzz

领取优惠券:

https://ide.code.fun/coupon/6325d553d85c64001131d083

(兑换码:mlfs0917)
快复制上面链接,去官网体验吧

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存