淘系前端研发提效|Iceworks: 多端研发套件

avatar
前端 @阿里巴巴

文末福利:开发者藏经阁

NO.1

什么是 Iceworks?

  • Iceworks 诞生于 2018 年,定位是「基于物料的 GUI 工具」。Iceworks 的初心是通过桌面客户端,屏蔽前端工程环境的差异和降低工程技术的复杂度,通过物料提效中后台前端开发。关于 Iceworks 的历史,可以从《Iceworks: 从 GUI 开发工具到集成研发工作台》(zhuanlan.zhihu.com/p/94102675)…

  • 何为「研发套件」?  近些年开发者的工具链和业务的研发模式有了很多的变化,Iceworks 作为开发工具也一直紧跟时代的潮流,贴近淘系实际的业务场景在演进。在云+端一体化的新时期,Iceworks 升级为 IDE(VS Code(code.visualstudio.com/)/DEF IDE(ide.def.alibaba-inc.com/)) 配套的插件集合,以套件(Pack)(code.visualstudio.com/api/referen… IDE 的一部分,为开发者提供更多易用好用的功能。

  • 何为「多端」?  多端包含了两个层面的含义,一是云端+客户端,即既可运行在 Web 端也可以运行在桌面客户端;二是支持多端应用的开发,即大家熟系的 Rax(rax.js.org/)(无线跨端)和  ICE(ice.work/)(PC Web)应用均提供了支持。

  • 关于 Iceworks 的更多介绍,可访问 ice.work/iceworks 进行了解。

提示:这是一篇介绍性的文章,没有实现原理和思考推导的内容,如果你想直接使用功能,请访问 Iceworks Pack(marketplace.visualstudio.com/items?itemN…)  进行安装体验。

NO.2

Iceworks 包含哪些功能?

使用可视化手段降低前端开发门槛

这些年来前端技术体系日益完善,深度不断下钻,但高速发展的互联网产业对端应用的诉求也在与日俱增。

根据我们进行的开发者问卷调查(zhuanlan.zhihu.com/p/96827091)…

面向 B 端中后台业务场景,ICE 抽象了物料(ice.work/docs/materi… Serverless 前后端一体化方案,为业务的端应用开发提供了方方面面的能力,规范了端应用的生产流程: Iceworks 结合框架,通过可视化手段进一步降低前端技术的使用门槛:

生成物料

传统的物料开发以编码实现为主,将物料的生产下移到了专业前端。Iceworks 通过可视化搭建和流程配置化方式,让非专业前端也可以轻松地生产出高质量的物料。

例如,Iceworks 提供模板创建插件,开发者可通过配置化方式生成模板,再由模板一键创建端应用(备注 1):

以及组件创建插件(marketplace.visualstudio.com/items?itemN… 1):

使用物料

物料生产完成,即可投入到应用开发流程中。Iceworks 将物料的使用也通过可视化交互的方式进行。

例如,Iceworks 提供了应用创建插件(marketplace.visualstudio.com/items?itemN… 以及物料添加插件,提供物料的预览、文档和示例,并且可通过一键点击将组件或区块添加到代码中(备注 1):

还有页面生成插件(marketplace.visualstudio.com/items?itemN…

利用智能感知技术提升体验和效率

智能感知(IntelliSense(code.visualstudio.com/docs/editor… VS Code,包含了输入自动补全、函数参数信息提示、变量的信息概览等功能。

Iceworks 结合框架,能够做到更好更全面的智能感知。

例如,Iceworks 提供了物料使用辅助插件(marketplace.visualstudio.com/items?itemN…

以及样式开发辅助插件(marketplace.visualstudio.com/items?itemN…  className  或  style  的值时都提供了输入自动补全功能:

样式开发辅助插件还提供了诸如  className  或  style  参数值的信息概览和代码导航等功能,辅助开发者更快地进行样式开发:

NO.3

如何快速开始使用?

安装

  • 点击 VS Code 活动栏上的「插件商店图标」;

  • 在输入框中输入「iceworks」进行搜索;

  • 点击第一个「iceworks」选项;

  • 在打开的 Iceworks Pack 页面上点击「安装」。

操作演示:

使用

第一步:点击活动栏上的 Iceworks 图标,打开侧边栏:

第二步:点击 Iceworks 侧边栏上的「创建应用」按钮,唤起多端应用的创建流程:

第三步:应用创建完成,在 Iceworks 侧边栏上进行 npm 脚本执行、创建页面、创建组件等操作:

第四步:更多能力,可以在命名面板中搜索「Iceworks」关键字获取:

NO.4

下一步

  • 源码可视化:类似 OutSystems(www.outsystems.com/)  和  Mendix(www.mendix.com/)  在商业上的成功推动了企业低代码应用平台(www.gartner.com/reviews/mar… Microsoft Expression Web(en.wikipedia.org/wiki/Micros…)  和  Dreamweaver(www.adobe.com/products/dr…)  非常流行,人们无需任何编程技能,只需要投放一些方框并在其中键入文本就可以轻松构建一个网站。今天我们对 Web 的理解和端技术的抽象已经深刻很多(备注 2),我们将借助可视化编排的技术让前端开发更加简单和轻松。

  • 智能代码(IntelliCode):智能感知让开发者的编码便捷性和幸福感有了很大的提升,它的进阶版本——AI 辅助编码(智能代码)(visualstudio.microsoft.com/zh-hans/ser…

  • 质量提升:工程师最重要的工作产物就是代码,而代码作为公司重要的资产,其质量的评估、改进始终缺乏工具和流程的保障。我们正在制定前端代码质量评估模型,并将联合前端工程团队,落地到淘系外包前端的项目中,并将外包项目的质量提升一个水平。

如果你对 👆 上面的任一方向感兴趣,欢迎加入我们,淘系数百名前端开发人员、数千万计的前端应用将会是这些技术最好的落地场景和试金石。

NO.5

备注

  1. 部分功能仍在开发中,演示仅是开发测试状态下的示例,最终效果以线上产品为准。

  2. Iceworks 团队是阿里集团内最早的低代码应用开发领域的探索者,在低代码引擎方向深耕多年,同时也是阿里集团低代码引擎项目的主导团队之一。

推荐阅读

1. 频道业务黑科技--行业魔方 | 618 淘系前端技术分享

2. P2C - 需求智能出码的思考| 618 淘系前端技术分享

3. 资损防控 — 代码扫描技术揭秘 | 618 淘系前端技术分享

文末福利

关注后回复“藏金阁”