飞冰(ICE)是一套基于 React 的中后台应用解决方案,在阿里巴巴内部,已经有 270 多个来自几乎所有 BU 的项目在使用。经过 2 年的发展,ICE 已经是中后台 2.0 体系,这个阶段中我们的目标是赋能企业、组织搭建自己的中后台体系。ICE 包含了一条从设计端到开发端的完整链路,帮助我们的用户快速搭建属于自己的中后台应用。
我们希望中后台应用的开发能变得更高效。面向设计者端,我们提供了 ICE Design 设计语言,来给我们的 UI 界面提供专业的视觉指导。面向开发者端,我们提供了 Iceworks 工具,这是一个图形化界面的开发平台,它承载了 ICE 的物料体系和开发体验,获取更多信息您可以立即点击这里下载体验。同时,我们还提供了独有的服务体系,在物料与工具这一基础之上进行服务的配套。我们将构建一个面向开发者的服务体系。针对每一个使用 ICE 体系的企业或个人,我们会安排专人客服进行一对一的对接,一旦有问题可以随时找到我们,第一时间帮助解决问题。
初心
在整个阿里体系内,面向卖家、运营小二以及达人有数不尽的后台,并且这些后台一直在持续不断的增长着,但是随着时间的推移,这些项目或多或少的存在着以下这些问题:
每个后台相互独立,同类功能也需要重复开发,前期开发成本较高
技术方案差异大,人员变动后维护成本非常高
视觉质量参差不齐,使用效率大打折扣
...
飞冰就是为了解决这些问题而诞生。飞冰由淘宝前端团队发起,与淘宝 UED 及后端开发同学共同打造,旨在「提高中后台系统的开发效率」。
物料体系
在飞冰中,组件、区块、布局、模板等统称为物料,由飞冰团队维护,在内部有一套完整的开发规范和工具,目前也正在逐步对外开放中;基于此,你可以参与共建 ICE,也可以自建私有的物料体系。
组件:比较基础的物料,目前飞冰的基础组件达到 55+,具有高度可复用性。
区块:通过对大量的中后台系统常用的场景进行分类、对比和抽象,基于基础组件组合而成,目前飞冰的区块达到 110+,可以通过 iceworks 进行快速组合搭建应用,减少重复的开发,提升效率。
布局:在中后台系统中布局通常较为统一,以 顶部-侧边布局-通栏 模式为主,为此我们提供了 4+ 常见的布局,支持 light 和 dark 两套主题。
模板:基于已有的区块搭建而成,目前提供了 4+ 的特定领域的模板,可以从零开始搭建应用,也可以选择特定类型的模板开始使用。
更新日志
v2.19.0
2019年04月15日
功能:安装依赖时增加版本检查机制
公告:下线小程序物料源和自定义区块功能
修复:修复 vue 页面生成问题
修复:修复 oss 上传失败问题
修复:修复 koa 项目创建失败问题
其他:日志治理 & 稳定性提升
文件信息
文件大小:83311294 字节
文件说明:ICE Desktop Application.
文件版本:2.19.0
MD5:B8422E582A3B77D8177679D44B41843E
SHA1:BA2FCC847D539E3594E98924D7A6FEBD438177E6
零环境搭建 零配置 简单易用
Iceworks 是 ICE 推出的辅助开发者快速开发中后台前端应用的 GUI 软件,目前支持 macOS 和 Windows 两大平台。通过 Iceworks 点击下载按钮即可。
创建项目
软件启动后,项目列表为空,可通过的【创建项目】新建一个项目。
界面会跳转到模板市场,目前提供三种模板进行选择,鼠标移动到指定的模板上,点击【以该模板创建项目】进入项目配置页面。
新建一个文件夹或者选择已有的空文件夹(避免覆盖原有文件)。
给项目起一个项目名,以便后续识别。
点击【开始创建项目】即可开始创建
默认会在创建的时候同时安装项目依赖,时间上会相对久一些,也可取消勾选,后续自行安装
管理项目
项目创建完成后,会自动添加到项目列表中,并打开当前项目管理面板。
通过项目管理面板,可执行 启动调试服务 新建页面 构建项目 等操作。
启动调试服务
点击 启动调试服务 等待完成后出现服务地址,点击可以预览当前项目。
上图是一个 ICE Design CMS 模板启动后的预览效果。
新建页面
启动调试服务后,可使用新建页面来搭建页面,通过 block 的组合完成页面的创建。
进入 block 搭建界面
上方列出了当前项目可用的 layout 布局方式,选中任一一个作为新页面的布局。
下方列出了当前可选择的 blocks,点击即可选择该 block 到已选区块列表中。
右侧为选中 block 组合的缩略图预览。
选择 layout 以及 block 后,点击右下角生成页面,会提示输入页面名,路由名,可以定义需要的名称,
页面名:表示生成的文件名称。
路由名:表示页面的访问地址,可通过 http://127.0.0.1:4444/#/xxxx 访问到对应的路由页面。
示例中,创建了 page16 访问后即可看到刚搭建的页面了。