这，就是飞冰物料

引言

最近在讨论“飞冰物料”的时候，有位设计专家对飞冰“区块” 的概念提出争议，认为区块这个词在她看来不容易理解，观点是社区没有区块这个概念，只据说过区块链没据说过区块，建议咱们将“区块”改为“场景”，因为当时咱们在会议，没有花过多的时间去讨论这件事请。那么，这里引伸出来的一个问题是：当开发者或者设计师谈到飞冰时，到底在谈论些什么，区块是什么，飞冰是什么，适用场景又是什么。

在飞冰的官网首页能够看到一个字号是 46px 大小的 slogan：『让前端开发简单而友好』。同时配有一段文字说明：『海量可复用物料，配套桌面工具极速构建前端应用，效率提高 100%』。

看到这里，若是你使用过飞冰开发项目，可能已经知道飞冰是什么，但若是你是初次了解飞冰，可能仍是茫然的；那这即是这篇文章存在的意义，借着这篇文章，能够带着如下三个问题去了解飞冰物料：

• 物料是什么
• 解决了什么问题
• 将来的规划是什么

物料是什么

组件时代： 2018 以前，从无到有，以组件抽象，使用组件为标志发展阶段

如引言所讲，飞冰的理念是让前端开发简单而友好 ，在淘宝内部，有大量的中后台系统须要开发，每一个业务线每一个团队都有着不一样的需求，然而，开发这些系统的开发人员并不是都是专业的前端开发，他们大可能是后端开发者，测试工程师等；如何赋能这些非专业前端团队用简单而友好的方式快速的搭建中后台系统，在飞冰早期阶段，大概是在 2016 年左右，飞冰团队在淘宝内部推出了一套基于 React 的 飞冰基础组件库，提供给淘宝不一样的团队使用，与此同时，社区基于 React 的 UI 组件库 Material UI、Ant Design 也开始出现和开源，基础组件库的出如今必定程度上提高了产品的设计研发效率及中后台系统的 UI 质量。

图片来源：fusion.design

UI 搭建时代：2018 ~ xxxx，以少许直接使用组件，大量直接使用区块与模版为标志

在提供基础组件库后，基于各个业务线团队的不断深刻使用和反馈，除了经常使用的基础 UI 组件以外，团队基于组件继续向上沉淀，相继推出了区块、模板、和可视化工程管理等配套设施。能够总结为如下几点：

• 物料
  • 组件：页面最小的元素
  • 区块：可复用的代码片断
  • 模板：不一样领域的工程脚手架模板
• 工程
  • Iceworks：可视化工程管理
  • ice-scripts：工程构建

区块： 随着组件的普遍使用，能知足最基础的业务开发，但在实际业务开发中，咱们很难由基础 UI 组件组合出一个完整的页面，不一样的功能模块之间每每是有相关联性的，经过对比淘宝内部大量的中后台系统，咱们发现，大部分业务场景下的展现是大同小异的，一个页面能够看做是不一样的块组合而成，像积木同样堆叠起来，在开发中，咱们也会按照对应的组织方式将代码进行模块划分，顺着这个思路，有没有可能在开发页面时，也能像搭积木同样生成出一个页面，答案是有的，这即是飞冰区块的概念，将平常业务中不一样系统的相同功能模块进行抽离，但这种代码块是仅限于 UI 展现的。咱们称之为区块。

模板： 大多数的中后台系统并无标准化的衡量规则，场景大同小异，每每也没有设计师的参与，存在在很大的抽象和收敛空间，飞冰模板则是从这个角度出发，从淘系的不一样业务进行抽象，基于行业领域进行模板物料的沉淀，并整理了飞冰模板白皮书规范，统一视觉和交互，经过配合 GUI 工具一键生成项目，来提高中后台系统的研发效率和 UI 质量的保障。

工程： 对非专业前端开发来讲，要作的事情不只仅是提供物料就能完成一个中后台系统的开发任务，随着前端社区的发展，ES六、Babel、Webpack 以及各类围绕着 React 状态管理库的出现，在尚未开始项目以前，可能就被各类繁杂的配置和概念绕晕。术业有专攻，对非专业的前端开发来讲，要去搭建一个 React 的工程项目，并非一件容易的事情。如何统一淘宝中后台项目的开发方式，提供一套通用的解决方案和最佳的开发体验，成了团队须要思考的问题。

基于 UI 搭建的思路，咱们推出了 GUI 可视化搭建工具 Iceworks，它承载了页面搭建和 CLI 的功能，替代了使用命令行和编写页面的过程，转为可视化操做界面。

解决了什么问题

咱们要作的就是尽量的磨平工程构建和环境的问题，经过代码块复用的思路，基于可视化工具搭建的方式，减小重复的开发，下降中后台应用的开发成本，让前端开发变得简单而友好。

• 经过提供基础组件、丰富的物料、不一样行业领域的模板结合 Iceworks GUI 工具，无需安装配置任何前端开发的环境（好比安装 node 等）、无需编写构建脚本等，便可拥有前端开发最佳实践，开发过程简单易操做。
• 后端开发人员具备逻辑编程能力，但其前端开发能力比较弱， 在开发中后台系统时，经过飞冰团队提供的官网物料，不须要进行重度的前端页面结构和样式开发, 能够专一在逻辑和数据处理上。
• 除了飞冰团队提供的官网物料，还提供了物料开发者工具，能够基于业务进行沉淀，搭建私有物料，目前已有淘宝商家后台，心选，飞猪商家后台等不一样的业务团队进行接入和私有物料的开发。

物料体系将来的规划是什么

• 物料开发者工具 2.0 即将完成内测，赋能业务自定义私有物料。
• 提供可视化搭建区块的功能, 对区块进行可视化组合来输出一个基本的前端页面; 并在页面搭建工具上提供业务逻辑编写的输入点，或将基本前端页面源码导出到 IDE 中供中后台开发人员进行业务逻辑的开发。
• 在将来咱们将会持续关注物料的易用性和建设。结合 Iceworks GUI 工具方面作一些探索，下降中后台系统开发的成本。『让前端开发简单而友好』会是咱们一直的努力方向。

图片来源：@元彦

相关连接

• 官方网站：飞冰-让前端开发简单而友好
• 区块预览：alibaba.github.io/ice/block
• 模板预览：alibaba.github.io/ice/scaffol…
• 下载 Iceworks：alibaba.github.io/ice/icework…
• Github：github.com/alibaba/ice
• 社区关于飞冰的介绍：juejin.im/post/5b6349…
• 飞冰钉钉答疑群