【重磅更新】飛冰（ICE）現(xiàn)已支持無(wú)線開(kāi)發(fā)

前言

從我們正式發(fā)布飛冰（ICE）項(xiàng)目截止到目前，在過(guò)去的這段時(shí)間里，僅僅淘寶內(nèi)部已經(jīng)有約 2000+ 項(xiàng)目使用它進(jìn)行開(kāi)發(fā)；除了內(nèi)部之外同時(shí)也持續(xù)得到了業(yè)內(nèi)廣大的關(guān)注，并被社區(qū)眾多個(gè)人與公司在其中后臺(tái)項(xiàng)目中采用，飛冰致力于提供簡(jiǎn)單而友好的前端研發(fā)體系。

然而在實(shí)際中除了中后臺(tái)業(yè)務(wù)場(chǎng)景外，也被部分用戶經(jīng)常問(wèn)到能否使用飛冰開(kāi)發(fā)無(wú)線應(yīng)用，何時(shí)能支持無(wú)線開(kāi)發(fā)等問(wèn)題，這意味著之前的產(chǎn)品定位和架構(gòu)設(shè)計(jì)已不能滿足業(yè)務(wù)場(chǎng)景的需要。

經(jīng)過(guò)持續(xù)的高速迭代，ice.js 終于迎來(lái)了重大的升級(jí)（完全向下兼容），正式支持無(wú)線 Web App 和小程序的開(kāi)發(fā)，目前支持的小程序平臺(tái)包括阿里小程序和微信小程序。這意味著如果你想開(kāi)發(fā)多端投放的小程序、Web App、中后臺(tái)管理系統(tǒng)，那么你只需使用 ice.js 就夠了，這在一定程度上能極大的提升開(kāi)發(fā)效率。更重要的是，無(wú)需學(xué)習(xí)各個(gè)平臺(tái)的小程序語(yǔ)法，只要你會(huì)使用 React 即可開(kāi)發(fā)。

多端一致的開(kāi)發(fā)體驗(yàn)

毫無(wú)疑問(wèn)，小程序原生語(yǔ)法的開(kāi)發(fā)體驗(yàn)是為人所詬病的，從微信開(kāi)始到后來(lái)的眾多追隨者如支付寶、百度、頭條等，都選擇了與微信類似的架構(gòu)設(shè)計(jì)，但也存在著一定的差異性，導(dǎo)致開(kāi)發(fā)人員需要適配的小程序平臺(tái)越來(lái)越多，而每個(gè)端開(kāi)發(fā)一套代碼又不現(xiàn)實(shí)，進(jìn)一步導(dǎo)致研發(fā)成本上升，代碼維護(hù)困難。

社區(qū)基于小程序的上層開(kāi)發(fā)框架也層出不窮，這類框架主要的區(qū)別和重心在于 DSL 和 多端適配。核心解決的是能復(fù)用現(xiàn)有 Web 的生態(tài)，以及能提供不同平臺(tái)一致性的開(kāi)發(fā)體驗(yàn)。如能使用類 React 或者類 Vue 去開(kāi)發(fā)小程序，能復(fù)用 NPM 上數(shù)以萬(wàn)計(jì)的工具包等。

這是很重要但也很基礎(chǔ)的能力，但在飛冰體系中卻有所不同，除了支持阿里、支付寶等不同端開(kāi)發(fā)的一致性之外，我們致力于為 ICE 開(kāi)發(fā)者提供更簡(jiǎn)單更平滑的開(kāi)發(fā)小程序的解決方案， 這意味著如果你使用 ice.js 開(kāi)發(fā)過(guò)中后臺(tái)應(yīng)用，那么幾乎可以無(wú)任何成本的上手小程序開(kāi)發(fā)。同時(shí)將中后臺(tái)領(lǐng)域沉淀出的標(biāo)準(zhǔn)化的 React 應(yīng)用開(kāi)發(fā)模式和最佳實(shí)踐，完全應(yīng)用到了小程序開(kāi)發(fā)上，包括但不限于狀態(tài)管理、數(shù)據(jù)請(qǐng)求、生命周期、樣式、Hooks 等能力，

提供從中后臺(tái)到小程序開(kāi)發(fā)的體驗(yàn)一致性是至關(guān)重要的，這其中包括：

• 開(kāi)發(fā)心智：提供完整的 React 支持，無(wú)需額外的學(xué)習(xí)成本；
• 開(kāi)發(fā)體驗(yàn)：提供基于 VS Code 的輔助插件，默認(rèn)支持 TypeScript；
• 多端適配：一次編碼多端投放，已支持阿里小程序，支付寶小程序，Web；
• 社區(qū)生態(tài)：與現(xiàn)有社區(qū)生態(tài)完全兼容。

不受限制地使用 React 所有特性

ice.js 的小程序機(jī)制基于 Rax 小程序的運(yùn)行時(shí)方案，采用模擬 DOM/BOM API 的方式適配，因此可做到 DSL 無(wú)關(guān)。目前這套方案已經(jīng)在阿里內(nèi)部落地 100+ 小程序項(xiàng)目，經(jīng)過(guò)了大量線上項(xiàng)目的驗(yàn)證，值得信賴。讓你可以不受限制地使用 React 所有特性。

• 幾乎沒(méi)有任何語(yǔ)法約束
• 支持使用 Hooks
• 支持操作 DOM （不推薦）
• 豐富的 React 社區(qū)生態(tài)

邏輯層做的事情其實(shí)比較復(fù)雜。首先要做的是，去處理節(jié)點(diǎn)間的關(guān)系，去模擬appendChild/ removeChild/updateNode 等各個(gè)行為來(lái)操作 VDOM 樹(shù)。其次是去模擬事件，在邏輯層每一個(gè)節(jié)點(diǎn)類會(huì)繼承自 EventTarget 基類，這個(gè)和 W3C 是一樣的，然后通過(guò) nodeId 作為標(biāo)識(shí)去收集需要監(jiān)聽(tīng)的事件，當(dāng)視圖層通過(guò) action 觸發(fā)了某個(gè)節(jié)點(diǎn)的事件之后，再通過(guò)原生小程序事件中的 event.currentTarget.dataset.nodeId獲取到目標(biāo)節(jié)點(diǎn)的 id，最終觸發(fā)目標(biāo)回調(diào)。

完備的應(yīng)用開(kāi)發(fā)實(shí)踐

ice.js 小程序在設(shè)計(jì)上繼承了Web應(yīng)用開(kāi)發(fā)的最佳實(shí)踐，如果你使用過(guò)ice.js 開(kāi)發(fā)過(guò)應(yīng)用，那么使用它開(kāi)發(fā)小程序幾乎是零成本的，遵循同一套開(kāi)發(fā)規(guī)范和最佳實(shí)踐。

應(yīng)用入口 ** 通過(guò)默認(rèn)生成的代碼運(yùn)行應(yīng)用而無(wú)需任何配置，只需要調(diào)用 runApp 即可啟動(dòng)小程序。

import { runApp } from 'ice';


runApp();

生命周期

生命周期指的是應(yīng)用自身的一些函數(shù)，這些函數(shù)在特殊的時(shí)間點(diǎn)或一些特殊的框架事件時(shí)被自動(dòng)觸發(fā)?？蚣芴峁┝送暾膽?yīng)用生命周期能力。

import { runApp } from 'ice';


const appConfig = {
  app: {
    // 應(yīng)用啟動(dòng)的時(shí)候觸發(fā)
    onLaunch() {},


    // 應(yīng)用喚起時(shí)觸發(fā)
    // 應(yīng)用從后臺(tái)切到前臺(tái)的時(shí)候觸發(fā)
    onShow() {},


    // 應(yīng)用從前臺(tái)切到后臺(tái)的時(shí)候觸發(fā)
    onHide() {},


    // 監(jiān)聽(tīng)全局錯(cuò)誤
    onError(error) {}
  }
};


runApp(appConfig);

全局配置

用于對(duì)應(yīng)用進(jìn)行全局的靜態(tài)配置，如設(shè)置路由、窗口表現(xiàn)等。

• routes 用于指定應(yīng)用的頁(yè)面，每一項(xiàng)代表對(duì)應(yīng)頁(yè)面的路徑及文件信息。

{
  "routes": [
    {
      "path": "/",
      "source": "pages/Home/index"
    }
  ]
}

• window 用于配置應(yīng)用的窗口表現(xiàn)，同時(shí)也支持針對(duì)每個(gè)頁(yè)面設(shè)置窗口表現(xiàn)。目前已經(jīng)支持的參數(shù)的有：

{
  "window": {
    "titleBarColor": "",
    "pullRefresh": true,
    "title": "Home"
  }
}

樣式方案

默認(rèn)推薦使用 CSS Modules 方案，這能很好的解決樣式開(kāi)發(fā)中的全局污染和命名混亂的兩個(gè)痛點(diǎn)問(wèn)題。但同時(shí)也支持 Sass、Less 等編寫(xiě)樣式。

數(shù)據(jù)請(qǐng)求

大多數(shù)情況下都需要通過(guò) HTTP 協(xié)議與后端服務(wù)器通訊，開(kāi)發(fā)小程序時(shí)我們提供了 universal-request 用于網(wǎng)絡(luò)請(qǐng)求，該模塊已支持多端發(fā)送請(qǐng)求。

Hooks 方案

開(kāi)發(fā)小程序時(shí)除了使用基礎(chǔ)的 Hooks 之外，我們還提供了一套完備的自定義 Hooks 的工具庫(kù) ahooks，覆蓋絕大部分的 Hooks 場(chǎng)景，助力您的應(yīng)用開(kāi)發(fā)。

更多其他細(xì)節(jié)如狀態(tài)管理，工程配置，事件等能力詳見(jiàn)官網(wǎng)文檔。

三分鐘上手

初始化項(xiàng)目

基于 npm init ice 命令選擇初始化模板進(jìn)行下載：

$ npm init ice <projectName>


# 或者使用 yarn
$ yarn create ice <projectName>

選擇模板

可選擇小程序 TypeScript 或者 JavaScript 模板：

? Please select a template (Use arrow keys)
? Lightweight JavaScript template with Mini Program
  Lightweight TypeScript template with Mini Program

啟動(dòng)項(xiàng)目

使用小程序開(kāi)發(fā)者工具打開(kāi)項(xiàng)目，執(zhí)行以下命令即可看到如下界面:

$ cd <projectName>
$ npm install
$ npm start

• 支付寶小程序效果圖：

• 微信小程序效果圖：

最后

隨著業(yè)務(wù)場(chǎng)景的不斷復(fù)雜和需要，飛冰（ICE）從專注中后臺(tái)領(lǐng)域升級(jí)為面向多終端的研發(fā)框架，但初心未變我們始終致力于提供簡(jiǎn)單而友好的前端研發(fā)體系，提升開(kāi)發(fā)效率和幸福感。

文章來(lái)源：公眾號(hào)--前端人

以上就是W3Cschool編程獅關(guān)于 【重磅更新】飛冰（ICE）現(xiàn)已支持無(wú)線開(kāi)發(fā) 的相關(guān)介紹了，希望對(duì)大家有所幫助。