飛冰(ICE)是一套基于 React 的中后臺應用解決方案,在阿里巴巴內部,已經有 270 多個來自幾乎所有 BU 的項目在使用。經過 2 年的發展,ICE 已經是中后臺 2.0 體系,這個階段中我們的目標是賦能企業、組織搭建自己的中后臺體系。ICE 包含了一條從設計端到開發端的完整鏈路,幫助我們的用戶快速搭建屬于自己的中后臺應用。

我們希望中后臺應用的開發能變得更高效。面向設計者端,我們提供了 ICE Design 設計語言,來給我們的 UI 界面提供專業的視覺指導。面向開發者端,我們提供了 Iceworks 工具,這是一個圖形化界面的開發平臺,它承載了 ICE 的物料體系和開發體驗,獲取更多信息您可以立即點擊這里下載體驗。同時,我們還提供了獨有的服務體系,在物料與工具這一基礎之上進行服務的配套。我們將構建一個面向開發者的服務體系。針對每一個使用 ICE 體系的企業或個人,我們會安排專人客服進行一對一的對接,一旦有問題可以隨時找到我們,第一時間幫助解決問題。
初心
在整個阿里體系內,面向賣家、運營小二以及達人有數不盡的后臺,并且這些后臺一直在持續不斷的增長著,但是隨著時間的推移,這些項目或多或少的存在著以下這些問題:
每個后臺相互獨立,同類功能也需要重復開發,前期開發成本較高
技術方案差異大,人員變動后維護成本非常高
視覺質量參差不齊,使用效率大打折扣
...
飛冰就是為了解決這些問題而誕生。飛冰由淘寶前端團隊發起,與淘寶 UED 及后端開發同學共同打造,旨在「提高中后臺系統的開發效率」。
物料體系
在飛冰中,組件、區塊、布局、模板等統稱為物料,由飛冰團隊維護,在內部有一套完整的開發規范和工具,目前也正在逐步對外開放中;基于此,你可以參與共建 ICE,也可以自建私有的物料體系。
組件:比較基礎的物料,目前飛冰的基礎組件達到 55+,具有高度可復用性。
區塊:通過對大量的中后臺系統常用的場景進行分類、對比和抽象,基于基礎組件組合而成,目前飛冰的區塊達到 110+,可以通過 iceworks 進行快速組合搭建應用,減少重復的開發,提升效率。
布局:在中后臺系統中布局通常較為統一,以 頂部-側邊布局-通欄 模式為主,為此我們提供了 4+ 常見的布局,支持 light 和 dark 兩套主題。
模板:基于已有的區塊搭建而成,目前提供了 4+ 的特定領域的模板,可以從零開始搭建應用,也可以選擇特定類型的模板開始使用。
更新日志
v2.19.0
2019年04月15日
功能:安裝依賴時增加版本檢查機制
公告:下線小程序物料源和自定義區塊功能
修復:修復 vue 頁面生成問題
修復:修復 oss 上傳失敗問題
修復:修復 koa 項目創建失敗問題
其他:日志治理 & 穩定性提升
文件信息
文件大。83311294 字節
文件說明:ICE Desktop Application.
文件版本:2.19.0
MD5:B8422E582A3B77D8177679D44B41843E
SHA1:BA2FCC847D539E3594E98924D7A6FEBD438177E6
零環境搭建 零配置 簡單易用
Iceworks 是 ICE 推出的輔助開發者快速開發中后臺前端應用的 GUI 軟件,目前支持 macOS 和 Windows 兩大平臺。通過 Iceworks 點擊下載按鈕即可。
創建項目
軟件啟動后,項目列表為空,可通過的【創建項目】新建一個項目。

界面會跳轉到模板市場,目前提供三種模板進行選擇,鼠標移動到指定的模板上,點擊【以該模板創建項目】進入項目配置頁面。

新建一個文件夾或者選擇已有的空文件夾(避免覆蓋原有文件)。
給項目起一個項目名,以便后續識別。
點擊【開始創建項目】即可開始創建
默認會在創建的時候同時安裝項目依賴,時間上會相對久一些,也可取消勾選,后續自行安裝
管理項目
項目創建完成后,會自動添加到項目列表中,并打開當前項目管理面板。
通過項目管理面板,可執行 啟動調試服務 新建頁面 構建項目 等操作。

啟動調試服務
點擊 啟動調試服務 等待完成后出現服務地址,點擊可以預覽當前項目。

上圖是一個 ICE Design CMS 模板啟動后的預覽效果。
新建頁面
啟動調試服務后,可使用新建頁面來搭建頁面,通過 block 的組合完成頁面的創建。
進入 block 搭建界面

上方列出了當前項目可用的 layout 布局方式,選中任一一個作為新頁面的布局。
下方列出了當前可選擇的 blocks,點擊即可選擇該 block 到已選區塊列表中。
右側為選中 block 組合的縮略圖預覽。
選擇 layout 以及 block 后,點擊右下角生成頁面,會提示輸入頁面名,路由名,可以定義需要的名稱,
頁面名:表示生成的文件名稱。
路由名:表示頁面的訪問地址,可通過 http://127.0.0.1:4444/#/xxxx 訪問到對應的路由頁面。
示例中,創建了 page16 訪問后即可看到剛搭建的頁面了。