这,就是飞冰物料

9,294 阅读7分钟

image | left

引言

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

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

看到这里,如果你使用过飞冰开发项目,可能已经知道飞冰是什么,但如果你是初次了解飞冰,可能还是茫然的;那这便是这篇文章存在的意义,借着这篇文章,可以带着以下三个问题去了解飞冰物料:

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

物料是什么

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

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

image | left

图片来源:fusion.design

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

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

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

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

BLOCKS | left

PAGHS | left

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

TEMPLATES | left

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

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

ICEWORKS | left

解决了什么问题

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

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

image | left

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

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

ICE | left

图片来源:@元彦

相关链接