提示:这是一篇介绍性的文章,没有实现原理和思考推导的内容,如果你想直接使用功能,请访问 Iceworks Pack 进行安装体验。
这些年来前端技术体系日益完善,深度不断下钻,但高速发展的互联网产业对端应用的诉求也在与日俱增。
根据我们进行的开发者问卷调查统计,编写用户界面这一传统的前端开发工作依然包含较大的工作量和一定的技术门槛,让非专业前端开发者头疼不已。
面向 B 端中后台业务场景,ICE 抽象了物料这一概念,结合研发框架和 Serverless 前后端一体化方案,为业务的端应用开发提供了方方面面的能力,规范了端应用的生产流程:
Iceworks 结合框架,通过可视化手段进一步降低前端技术的使用门槛:
传统的物料开发以编码实现为主,将物料的生产下移到了专业前端。Iceworks 通过可视化搭建和流程配置化方式,让非专业前端也可以轻松地生产出高质量的物料。
例如,Iceworks 提供模板创建插件,开发者可通过配置化方式生成模板,再由模板一键创建端应用(备注 1):
以及组件创建插件,开发者可通过可视化搭建的方式生成业务组件或区块,这种所见即所得的拖拽交互操作大大地降低了用户界面的开发工作(备注 1):
物料生产完成,即可投入到应用开发流程中。Iceworks 将物料的使用也通过可视化交互的方式进行。
例如,Iceworks 提供了应用创建插件,使用模板快速流程式地创建多端应用:
以及物料添加插件,提供物料的预览、文档和示例,并且可通过一键点击将组件或区块添加到代码中(备注 1):
还有页面生成插件,通过区块组装生成页面:
智能感知(IntelliSense)的定义来自于 VS Code,包含了输入自动补全、函数参数信息提示、变量的信息概览等功能。
Iceworks 结合框架,能够做到更好更全面的智能感知。
例如,Iceworks 提供了物料使用辅助插件,在使用组件时,对组件的参数输入进行自动补全和以及参数值的合法性进行校验提示:
以及样式开发辅助插件,在编写行内样式、输入 className
或 style
的值时都提供了输入自动补全功能:
样式开发辅助插件还提供了诸如 className
或 style
参数值的信息概览和代码导航等功能,辅助开发者更快地进行样式开发:
操作演示:
第一步:点击活动栏上的 Iceworks 图标,打开侧边栏:
第二步:点击 Iceworks 侧边栏上的「创建应用」按钮,唤起多端应用的创建流程:
第三步:应用创建完成,在 Iceworks 侧边栏上进行 npm 脚本执行、创建页面、创建组件等操作:
第四步:更多能力,可以在命名面板中搜索「Iceworks」关键字获取:
如果你对👆上面的任一方向感兴趣,欢迎加入我们,淘系数百名前端开发人员、数千万计的前端应用将会是这些技术最好的落地场景和试金石。