引言
最近在討論“飛冰物料”的時候，有位設計專家對飛冰“區塊” 的概念提出爭議，認為區塊這個詞在她看來不容易理解，觀點是社群沒有區塊這個概念，只聽說過區塊鏈沒聽說過區塊，建議我們將“區塊”改成“場景”，由於當時我們在會議，沒有花過多的時間去討論這件事請。那麼，這裡引申出來的一個問題是：當開發者或者設計師談到飛冰時，到底在談論些什麼，區塊是什麼，飛冰是什麼，適用場景又是什麼。
在飛冰的官網首頁可以看到一個字號是 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 質量的保障。
工程： 對非專業前端開發來說，要做的事情不僅僅是提供物料就能完成一箇中後臺系統的開發任務，隨著前端社群的發展，ES6、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…
- 飛冰群二維碼
