Iceworks: 多端研发套件

前端开发

Iceworks

什么是 Iceworks?

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

Iceworks 包含哪些功能?

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

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

根据我们进行的开发者问卷调查统计,编写用户界面这一传统的前端开发工作依然包含较大的工作量和一定的技术门槛,让非专业前端开发者头疼不已。

面向 B 端中后台业务场景,ICE 抽象了物料这一概念,结合研发框架和 Serverless 前后端一体化方案,为业务的端应用开发提供了方方面面的能力,规范了端应用的生产流程:

端应用的生产流程

Iceworks 结合框架,通过可视化手段进一步降低前端技术的使用门槛:

Iceworks结合

生成物料

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

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

模板创建插件

以及组件创建插件,开发者可通过可视化搭建的方式生成业务组件或区块,这种所见即所得的拖拽交互操作大大地降低了用户界面的开发工作(备注 1):

组件创建插件

使用物料

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

例如,Iceworks 提供了应用创建插件,使用模板快速流程式地创建多端应用

创建应用

以及物料添加插件,提供物料的预览、文档和示例,并且可通过一键点击将组件或区块添加到代码中(备注 1):

物料添加插件

还有页面生成插件通过区块组装生成页面

页面创建插件

利用智能感知技术提升前端开发的体验和效率

智能感知(IntelliSense)的定义来自于 VS Code,包含了输入自动补全、函数参数信息提示、变量的信息概览等功能。

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

例如,Iceworks 提供了物料使用辅助插件,在使用组件时,对组件的参数输入进行自动补全和以及参数值的合法性进行校验提示

属性输入进行自动补全

以及样式开发辅助插件,在编写行内样式输入 classNamestyle 的值时都提供了输入自动补全功能

行内样式输入自动补全

style值输入自动补全

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

样式参数的信息概览和代码导航

如何快速开始使用?

安装

操作演示:

install demo

使用

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

undefined

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

undefined

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

undefined

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

undefined

下一步

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

备注

  1. 部分功能仍在开发中,演示仅是开发测试状态下的示例,最终效果以线上产品为准。
  2. Iceworks 团队是阿里集团内最早的低代码应用开发领域的探索者,在低代码引擎方向深耕多年,同时也是阿里集团低代码引擎项目的主导团队之一。