飛冰(ICE)是一套基于 React 的中后臺應(yīng)用解決方案,在阿里巴巴內(nèi)部,已經(jīng)有 270 多個來自幾乎所有 BU 的項(xiàng)目在使用。經(jīng)過 2 年的發(fā)展,ICE 已經(jīng)是中后臺 2.0 體系,這個階段中我們的目標(biāo)是賦能企業(yè)、組織搭建自己的中后臺體系。ICE 包含了一條從設(shè)計(jì)端到開發(fā)端的完整鏈路,幫助我們的用戶快速搭建屬于自己的中后臺應(yīng)用。
我們希望中后臺應(yīng)用的開發(fā)能變得更高效。面向設(shè)計(jì)者端,我們提供了 ICE Design 設(shè)計(jì)語言,來給我們的 UI 界面提供專業(yè)的視覺指導(dǎo)。面向開發(fā)者端,我們提供了 Iceworks 工具,這是一個圖形化界面的開發(fā)平臺,它承載了 ICE 的物料體系和開發(fā)體驗(yàn),獲取更多信息您可以立即點(diǎn)擊這里下載體驗(yàn)。同時,我們還提供了獨(dú)有的服務(wù)體系,在物料與工具這一基礎(chǔ)之上進(jìn)行服務(wù)的配套。我們將構(gòu)建一個面向開發(fā)者的服務(wù)體系。針對每一個使用 ICE 體系的企業(yè)或個人,我們會安排專人客服進(jìn)行一對一的對接,一旦有問題可以隨時找到我們,第一時間幫助解決問題。
初心
在整個阿里體系內(nèi),面向賣家、運(yùn)營小二以及達(dá)人有數(shù)不盡的后臺,并且這些后臺一直在持續(xù)不斷的增長著,但是隨著時間的推移,這些項(xiàng)目或多或少的存在著以下這些問題:
每個后臺相互獨(dú)立,同類功能也需要重復(fù)開發(fā),前期開發(fā)成本較高
技術(shù)方案差異大,人員變動后維護(hù)成本非常高
視覺質(zhì)量參差不齊,使用效率大打折扣
...
飛冰就是為了解決這些問題而誕生。飛冰由淘寶前端團(tuán)隊(duì)發(fā)起,與淘寶 UED 及后端開發(fā)同學(xué)共同打造,旨在「提高中后臺系統(tǒng)的開發(fā)效率」。
物料體系
在飛冰中,組件、區(qū)塊、布局、模板等統(tǒng)稱為物料,由飛冰團(tuán)隊(duì)維護(hù),在內(nèi)部有一套完整的開發(fā)規(guī)范和工具,目前也正在逐步對外開放中;基于此,你可以參與共建 ICE,也可以自建私有的物料體系。
組件:比較基礎(chǔ)的物料,目前飛冰的基礎(chǔ)組件達(dá)到 55+,具有高度可復(fù)用性。
區(qū)塊:通過對大量的中后臺系統(tǒng)常用的場景進(jìn)行分類、對比和抽象,基于基礎(chǔ)組件組合而成,目前飛冰的區(qū)塊達(dá)到 110+,可以通過 iceworks 進(jìn)行快速組合搭建應(yīng)用,減少重復(fù)的開發(fā),提升效率。
布局:在中后臺系統(tǒng)中布局通常較為統(tǒng)一,以 頂部-側(cè)邊布局-通欄 模式為主,為此我們提供了 4+ 常見的布局,支持 light 和 dark 兩套主題。
模板:基于已有的區(qū)塊搭建而成,目前提供了 4+ 的特定領(lǐng)域的模板,可以從零開始搭建應(yīng)用,也可以選擇特定類型的模板開始使用。
更新日志
v2.19.0
2019年04月15日
功能:安裝依賴時增加版本檢查機(jī)制
公告:下線小程序物料源和自定義區(qū)塊功能
修復(fù):修復(fù) vue 頁面生成問題
修復(fù):修復(fù) oss 上傳失敗問題
修復(fù):修復(fù) koa 項(xiàng)目創(chuàng)建失敗問題
其他:日志治理 & 穩(wěn)定性提升
文件信息
文件大。83311294 字節(jié)
文件說明:ICE Desktop Application.
文件版本:2.19.0
MD5:B8422E582A3B77D8177679D44B41843E
SHA1:BA2FCC847D539E3594E98924D7A6FEBD438177E6
官方網(wǎng)站:https://alibaba.github.io/ice/#/
零環(huán)境搭建 零配置 簡單易用
Iceworks 是 ICE 推出的輔助開發(fā)者快速開發(fā)中后臺前端應(yīng)用的 GUI 軟件,目前支持 macOS 和 Windows 兩大平臺。通過 Iceworks 點(diǎn)擊下載按鈕即可。
創(chuàng)建項(xiàng)目
軟件啟動后,項(xiàng)目列表為空,可通過的【創(chuàng)建項(xiàng)目】新建一個項(xiàng)目。
界面會跳轉(zhuǎn)到模板市場,目前提供三種模板進(jìn)行選擇,鼠標(biāo)移動到指定的模板上,點(diǎn)擊【以該模板創(chuàng)建項(xiàng)目】進(jìn)入項(xiàng)目配置頁面。
新建一個文件夾或者選擇已有的空文件夾(避免覆蓋原有文件)。
給項(xiàng)目起一個項(xiàng)目名,以便后續(xù)識別。
點(diǎn)擊【開始創(chuàng)建項(xiàng)目】即可開始創(chuàng)建
默認(rèn)會在創(chuàng)建的時候同時安裝項(xiàng)目依賴,時間上會相對久一些,也可取消勾選,后續(xù)自行安裝
管理項(xiàng)目
項(xiàng)目創(chuàng)建完成后,會自動添加到項(xiàng)目列表中,并打開當(dāng)前項(xiàng)目管理面板。
通過項(xiàng)目管理面板,可執(zhí)行 啟動調(diào)試服務(wù) 新建頁面 構(gòu)建項(xiàng)目 等操作。
啟動調(diào)試服務(wù)
點(diǎn)擊 啟動調(diào)試服務(wù) 等待完成后出現(xiàn)服務(wù)地址,點(diǎn)擊可以預(yù)覽當(dāng)前項(xiàng)目。
上圖是一個 ICE Design CMS 模板啟動后的預(yù)覽效果。
新建頁面
啟動調(diào)試服務(wù)后,可使用新建頁面來搭建頁面,通過 block 的組合完成頁面的創(chuàng)建。
進(jìn)入 block 搭建界面
上方列出了當(dāng)前項(xiàng)目可用的 layout 布局方式,選中任一一個作為新頁面的布局。
下方列出了當(dāng)前可選擇的 blocks,點(diǎn)擊即可選擇該 block 到已選區(qū)塊列表中。
右側(cè)為選中 block 組合的縮略圖預(yù)覽。
選擇 layout 以及 block 后,點(diǎn)擊右下角生成頁面,會提示輸入頁面名,路由名,可以定義需要的名稱,
頁面名:表示生成的文件名稱。
路由名:表示頁面的訪問地址,可通過 http://127.0.0.1:4444/#/xxxx 訪問到對應(yīng)的路由頁面。
示例中,創(chuàng)建了 page16 訪問后即可看到剛搭建的頁面了。