阿里飞冰-可视化搭建前端工程

什么是飞冰

通常我们的项目开流程：框架选型初始化脚手架（比如使用 create-react-app 或者 vue-cli）也可能你选择了开源脚手架，克隆仓库四处找轮子安装各种依赖新建页面，写逻辑，设计菜单，设计路由，新建页面的时候去复制旧的页面修改发等等。这些重复的工作现在交给一款叫飞冰的工具来做。飞冰是一套基于 React 的中后台应用解决方案，在阿里巴巴内部，已经有 270 多个来自几乎所有 BU 的项目在使用。

使用流程

步骤

下载 GUI 工具并安装 => 可视化的选择的初始模板创建项目 => 可视化的创建页面并选择内置的 100+ 高质量可复用区块 => 生成代码进行二次开发 => 开发完成之后点击打包编译出 HTML、JS、CSS 文件 => 部署使用。

在整个流程中，你可以完全通过 GUI 工具点击操作，无需安装配置 Node 环境等前端开发工具，也无需配置 webpack 等构建脚本，飞冰已经按照淘宝前端最佳实践全部内置。此外，绝大部分的业务需求，飞冰都已经开发出对应的物料，可以通过 GUI 进行可视化的拼装，尽可能避免你去编写额外的业务逻辑。

物料

在飞冰中，组件、区块、布局、模板等统称为物料，由飞冰团队维护，基于这些物料结合 Iceworks 可以快速搭建中后台应用。在此之外，如果已有的物料不能满足你的业务需求，Iceworks 提供了一套完整的开发规范和开发者工具，你可以参与共建飞冰物料，也可以自建私有的物料体系。

组件：最基础的物料，目前飞冰的基础组件达到 55+，具有高度可复用性。
区块：通过对大量的中后台系统常用的场景进行分类、对比和抽象，基于基础组件组合而成，目前飞冰的区块达到 110+，可以通过 iceworks 进行快速组合搭建应用，减少重复的开发，提升效率。
布局：在中后台系统中布局通常较为统一，以 "顶部-侧边布局-通栏" 模式为主，为此飞冰提供了 4+ 常见的布局，支持 light 和 dark 两套主题。
模板：基于已有的区块搭建而成，目前提供了 4+ 的特定领域的模板，可以从零开始搭建应用，也可以选择特定类型的模板开始使用。

下面这张是飞冰的物料源截图，物料源还在不断增长，目前已支持 react vue Angular三大主流框架的物料源。