這，就是飛冰物料

引言

最近在討論「飛冰物料」的時候，有位設計專家對飛冰「區塊」 的概念提出爭議，認爲區塊這個詞在她看來不容易理解，觀點是社區沒有區塊這個概念，只據說過區塊鏈沒據說過區塊，建議咱們將「區塊」改爲「場景」，因爲當時咱們在會議，沒有花過多的時間去討論這件事請。那麼，這裏引伸出來的一個問題是：當開發者或者設計師談到飛冰時，到底在談論些什麼，區塊是什麼，飛冰是什麼，適用場景又是什麼。

在飛冰的官網首頁能夠看到一個字號是 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…
• 飛冰釘釘答疑羣