imgcook 被 Thought Works 技术雷达收录 & CCF B类论文发表

简介: 可见,从 Thought Works 团队到前端技术行业,对于 imgcook.com 的价值虽然保持肯定态度,但是,对于智能生成代码的应用场景和代码可维护性还是普遍存在担忧。因此,前端智能化方向和 imgcook.com 的 D2C (Design To Code)技术还需要进一步的成熟和完善,用优秀的产品品质、先进的技术和扎实的服务,真正赋能一线前端研发人员,做到“技术普惠”。也因此,我想针对应用场景和代码的可维护性问题做一些简要的说明,借此打消一部分用户的疑虑。

image.png

作者: 甄子

在这个春暖花开的日子,前端智能化的核心技术产品 imgcook.com 被 Thought Works 的 24 期技术雷达收录,ICON 识别的论文已正式发表(https://dl.acm.org/doi/10.1145/3397481.3450671)。


Thought Works 的 24 期技术雷达,指出:https://insights.thoughtworks.cn/thoughtworks-techradar-vol-24/


「imgcook是阿里巴巴旗下的软件即服务产品。它可以通过智能化技术把不同种类的视觉稿(Sketch/PSD/静态图片)一键生成前端代码。imgcook可以生成静态代码,如果你定义了领域专用语言,它也可以生成数据绑定模块代码,该技术还没达到完美的程度,设计人员需要参考某些规范,以提高代码生成的准确性(此后仍需开发人员的调整)。我们对于魔术代码生成一直十分谨慎,因为从长远看,生成的代码通常很难维护,imgcook也不例外。但是如果你限定它用于特定的上下文,例如一次性活动广告页,这项技术值得一试。


image.png


可见,从 Thought Works 团队到前端技术行业,对于 imgcook.com 的价值虽然保持肯定态度,但是,对于智能生成代码的应用场景和代码可维护性还是普遍存在担忧。因此,前端智能化方向和 imgcook.com 的 D2C (Design To Code)技术还需要进一步的成熟和完善,用优秀的产品品质、先进的技术和扎实的服务,真正赋能一线前端研发人员,做到“技术普惠”。也因此,我想针对应用场景和代码的可维护性问题做一些简要的说明,借此打消一部分用户的疑虑。



imgcook 应用场景问题



应用场景问题诚如 Thought Works 所言,imgcook 首先是一款通过视觉稿一键生成前端代码的 SaaS(软件即服务)技术产品,通过访问 imgcook.com 即可使用全部功能。其次,通过 DSL(Domain-Specific Language 领域专用语言)的定义,imgcook 可以适用于:前端、客户端、小程序等不同的领域。


最后,通过 CLI(Command-Line Interface 命令行界面)将 imgcook 的功能深度整合进自己的前端业务平台,并利用 imgcook 的字段模型拓展自己的业务数据对象识别能力,即可适用于:用户产品、工具产品、营销导购产品、营销活动承接页……等一系列业务场景。


image.png


imgcook 研发效能数据概览


现已在阿里巴巴集团超过 17 个 BU 落地,超过 20 个团队通过 API 调用 imgcook 技术能力建设自己的业务平台,支撑着各种 C 端业务场景和移动端业务。此外,通过 imgcook 还能够生成以 CRUD 为核心功能的中后台页面代码,已经大规模在阿里云等业务上落地应用。



imgcook 代码可维护性问题



代码的可维护性问题一直是我们关注的焦点,从最初的生成代码规则中对于:变量命名规范、变量书写规范、变量使用规范等,到代码可用率度量,我们用丰富的维度去全面考察 imgcook 生成代码的可用率和可维护性:


image.png

布局可用趋势(括号内为统计样本数量)

全部视觉稿

图片

Sketch上传

PSD插件

Sketch插件

08

06

04

02

0

如女来祝如0您老家奥,推中部中市济物g朝5限加球球泸

baocountRate

Av9ScORe

更新时间

详情

布局可用Jr

模块ID

算法版本

模块名

管理员

项目ID

2021-05-100

详情

22069

a3xkaogo

1112222333

99.97%

80399

v0.2.11

1:59:27

2021-05-100

详情

Hbaux70a

80395

12956

1241

100%

v0.2.11

1:45:53

2021-05-100

详情

B7fpStpv

79968

21994

100%

v0.2.11

test1

1:38:35

青溪-工具-合

2021-05-101

详情

80390

100%

FwgORMI

v0.2.11

22032

2:06:16

2021-05-101

详情

100%

v0.2.11

80388

22062

IWiNTJBM

dome

1:59:28

2021-05-101

车轮个人

详情

Qcrl1GFP

vo.2.11

80383

22061

100%

1:55:16

2021-05-101

详情

修改信息

n7kJ2040

19910

80366

v0.2.11

100%

1:21:19



代码可维护性的指标度量和监控


并且,每周都会对 Badcase 进行详细的分析,从中找出工程技术、规则算法和机器学习模型能力的问题和缺陷,加以改进,平均每个月因此修改的 BUG 和问题有数百个之多,持续的改进和迭代,持续的用户使用和反馈,让 imgcook 可以形成以用户体验为驱动力的增长飞轮。



对未来的思考



首先,我们会继续关注:应用场景泛化能力代码生成准确率 这两个核心指标,根据用户的反馈不断借助机器学习的能力进行优化和迭代,用优秀的体验和坚若磐石的产品质量,真正服务好一线研发同学打造普惠的技术。


其次,利用 https://github.com/alibaba/pipcook 提供的前端机器学习框架,帮助一线开发者借助机器学习的能力定制自己的算法模型,进一步提升 imgcook 在业务上的表现力。


image.png




最后,围绕动画、动效、富交互……等问题,用 imgcook 降低前端在复杂需求、跨平台、跨场景业务开发过程中遇到的实际研发问题,进一步提升前端技术的业务表现力,让前端技术支撑的业务彻底摆脱生产力束缚。


从 CCF 论文 IconFont 识别为起点,阿里巴巴前端委员会智能化方向必将产出更多有价值的研究成果,分享到各种顶会和学术期刊上接受同行的检验,让我们可以用更加客观、更加全面的视角,来评价我们的研究和技术工程成果是否具有技术先进性。


同时,也能够用这种方式来为前端技术带来更多新的思考和理论工具。我会和阿里巴巴前端委员会、智能化方向、淘系技术前端、F(x)Team、开源社区和技术生态的伙伴们一起,继续努力和坚持我们“技术普惠、赋能一线研发”的理想,让时间来证明一切吧。


欢迎大家与我们交流:https://juejin.cn/post/6952774108543188999


image.png

相关文章
|
机器学习/深度学习 人工智能 算法
一文让你了解AI产品的测试 评价人工智能算法模型的几个重要指标
一文让你了解AI产品的测试 评价人工智能算法模型的几个重要指标
2009 0
一文让你了解AI产品的测试 评价人工智能算法模型的几个重要指标
|
JSON Dart 安全
国庆假期,整整七天,我使用Flutter终于做出了即时通信!!!😤
7天时间,踩了很多很多坑,终于完成了Flutter WebSocket即时通讯的功能,个人觉得蛮有学习意义的,来看看吧!哦对了,求个赞,哥哥们,国庆假期就贡献在这里啦~
|
安全 Java API
手把手带你实现第三方应用登录
手把手带你实现第三方应用登录
1707 0
手把手带你实现第三方应用登录
|
数据安全/隐私保护
|
6月前
|
数据可视化 IDE Java
OneCode图生代码技术深度解析:从可视化设计到注解驱动实现的全链路架构
OneCode图生代码技术通过可视化设计与Java注解驱动,实现UI到代码的高效转换,支持设计即开发、组件复用与动态加载,提升企业应用开发效率与协作能力。
OneCode图生代码技术深度解析:从可视化设计到注解驱动实现的全链路架构
|
6月前
|
人工智能 监控 数据处理
数据标注管理工具:AI燃料工厂的精益引擎
本文详解如何构建高吞吐数据标注系统,涵盖实时质检、智能调度与全息监控三大技术支柱,结合真实案例与代码实现,揭示从技术债到工程化落地的完整路径。
|
10月前
|
人工智能 前端开发 JavaScript
AI程序员:通义灵码 2.0应用VScode前端开发深度体验
AI程序员:通义灵码 2.0应用VScode前端开发深度体验,在软件开发领域,人工智能技术的融入正深刻改变着程序员的工作方式。通义灵码 2.0 作为一款先进的 AI 编程助手,与广受欢迎的代码编辑器 Visual Studio Code(VScode)相结合,为前端开发带来了全新的可能性。本文将详细分享通义灵码 2.0 在 VScode 前端开发环境中的深度使用体验。
1732 2
AI程序员:通义灵码 2.0应用VScode前端开发深度体验
|
前端开发 API
自定义 Hooks 在 Vue3 中的应用和重要性
自定义 Hooks 在 Vue3 中的应用和重要性
|
Docker 容器 Linux
私有知识库搭建
私有知识库搭建,纯docker文件
1183 6
|
算法 Java UED
【JVM】分代收集算法:提升Java垃圾回收效率
【JVM】分代收集算法:提升Java垃圾回收效率
329 0