Rax跨容器的渲染引擎

Rax 是一個(gè)超輕量，高性能，易上手的前端解決方案。一次開發(fā)多端運(yùn)行，解放重復(fù)工作，專注產(chǎn)品邏輯，提升開發(fā)效率。

特性：

• 超輕量：Gzipped 之后僅 6.7K

• 高性能：快速的虛擬 DOM

• 易上手：兼容 React API

快速開始：

基于 npm init rax 命令，可以快速創(chuàng)建一個(gè) Rax 多端應(yīng)用（注意：npm 版本需 >= 6.1.0）：

$ npm init rax <YourProjectName>

初始化項(xiàng)目過(guò)程中， 您可以根據(jù)提示選擇一個(gè)或多個(gè)需要投放的端，目前可供選擇的有 Web、 Weex、Alibaba Miniapp、WeChat MiniProgram、Kraken (Flutter):

使用方向鍵導(dǎo)航到具體項(xiàng)目，使用空格選中或者取消選中。

Choose targets your project want to run? (Press <space> to select, <a> to toggle all, <i> to invert selection)
? ? Web
   ? Weex
   ? Alibaba MiniApp
   ? WeChat MiniProgram
   ? Kraken (Flutter)

面向 Web 端，您還可以選擇性的開啟 SSR（服務(wù)器端渲染） 能力來(lái)增強(qiáng)應(yīng)用體驗(yàn)。

? Do you want to enable these features?
?? server sider rendering (ssr)

Rax 的多端項(xiàng)目遵循同一套工程結(jié)構(gòu)和開發(fā)規(guī)范，一次開發(fā)，便可同時(shí)被投放于 Web、Weex、小程序等多個(gè)容器，從而避免了業(yè)務(wù)在多端投放需求下的重復(fù)開發(fā)工作。

關(guān)于 Rax 的介紹

2015 年雙十一，Weex 的方案開始逐步使用，經(jīng)過(guò)這次試水，證明了這套方案未來(lái)的場(chǎng)景及可行性，接著 2016 年 Weex 開始進(jìn)入快速發(fā)展的階段。但是使用 Weex 就意味著必須用 Vue 的語(yǔ)法，這對(duì)于整個(gè)團(tuán)隊(duì)來(lái)說(shuō)是一個(gè)不小的挑戰(zhàn)：PC 場(chǎng)景下的項(xiàng)目，小伙伴們普遍基于 React 開發(fā)，已經(jīng)有了相當(dāng)多的經(jīng)驗(yàn)與沉淀。如果無(wú)線的項(xiàng)目要采用一個(gè)不同方案（Vue）去做，強(qiáng)推未必會(huì)不奏效，但是小伙伴們大概會(huì)傷心吧。

于是我們嘗試將 React 與 Weex 結(jié)合起來(lái)，但是由于方案太過(guò) hack 導(dǎo)致各種問(wèn)題，遂無(wú)奈放棄。接著 Rax 的方案應(yīng)運(yùn)而生：「Rax 基于 React 的標(biāo)準(zhǔn)，支持在不同容器中渲染，當(dāng)前最重要的容器即 Weex 和 Web」。

Rax 與 React

React 是一種標(biāo)準(zhǔn)，Rax 是對(duì)該標(biāo)準(zhǔn)的一個(gè)實(shí)現(xiàn)。Rax 只是無(wú)線端的解決方案，與 React 并無(wú)沖突。事實(shí)上淘寶 PC 端的新項(xiàng)目，依然主要是基于 React。當(dāng)然，Rax 跟 Preact 之類的方案也有本質(zhì)區(qū)別，前者偏向于解決多端問(wèn)題，后者偏向于解決性能問(wèn)題，具體可參考下文「Rax 的特點(diǎn)」。

Rax 的特點(diǎn)

1、設(shè)計(jì)上支持不同容器

Rax 在設(shè)計(jì)上抽象出 Driver 的概念，用來(lái)支持在不同容器中渲染，比如目前所支持的：Web, 小程序(支付寶、微信等)、Weex, Node.js(SSR), Flutter(Kraken). 基于 Driver 的概念，未來(lái)即使出現(xiàn)更多的容器（如 VR 等），Rax 也可以從容應(yīng)對(duì)。Rax 在設(shè)計(jì)上盡量抹平各個(gè)端的差異性，這也使得開發(fā)者在差異性和兼容性方面再也不需要投入太多精力了。

2、體積足夠小

如上文所述，Rax 是一個(gè)面向無(wú)線端的解決方案，因此自身的體積對(duì)于性能來(lái)講就顯得非常重要。Rax 壓縮 + Gzip 后的體積是 6.7kb, 相比 React 的 43.7kb, 對(duì)于無(wú)線端友好了很多。

3、支持返回多個(gè)同級(jí)節(jié)點(diǎn)

任何用過(guò) React 的同學(xué)大概都踩過(guò)同一個(gè)坑：方法返回了多個(gè)同級(jí)節(jié)點(diǎn)導(dǎo)致報(bào)錯(cuò)。在設(shè)計(jì)上 React 只能返回單個(gè)節(jié)點(diǎn)，因此頁(yè)面上或多或少會(huì)產(chǎn)生一些冗余的節(jié)點(diǎn)，這在 PC 端并沒(méi)有太多問(wèn)題，然而在無(wú)線 Android 端嵌套層級(jí)越多，應(yīng)用的 Crash 率會(huì)不斷提高，這一點(diǎn)在低端 Android 機(jī)上表現(xiàn)尤其明顯。因此 Rax 支持了返回多個(gè)同級(jí)節(jié)點(diǎn)的功能，如：

import {createElement, Component, render} from 'rax';

class Test extends Component {
  render() {
    return [1, 2, 3].map((item) => {
      return <p>{item}</p>;
    });
  }
}

這一特性可以有效減少頁(yè)面的嵌套層級(jí)，從而減少應(yīng)用因嵌套層級(jí)過(guò)多而出現(xiàn)的 Crash 問(wèn)題。

4、標(biāo)準(zhǔn)化

在上文里，我們不斷的提各個(gè)端的一致性，一致則必有規(guī)范可依，Rax 遵循 W3C 標(biāo)準(zhǔn)，比如在 Weex 容器中已經(jīng)可以直接調(diào)用 navigator, document, location, alert 等 W3C 的標(biāo)準(zhǔn) API.

當(dāng)然，受限于各個(gè)端的差異，標(biāo)準(zhǔn)化的道路還很長(zhǎng)，「更標(biāo)準(zhǔn)化」這也是 Rax 未來(lái)的重要目標(biāo)之一。

未來(lái)

Write once, run everywhere. 這是口號(hào)，亦是目標(biāo)。Rax 未來(lái)會(huì)在更多的端上不斷探索，比如 VR/AR, 甚至之前微博上有同學(xué)提出的是否可以用 Rax 寫微信小程序，也是一個(gè)蠻有意思的想法。

對(duì)于開發(fā)者來(lái)說(shuō)，當(dāng)越來(lái)越多的端不斷出現(xiàn)在眼前時(shí)，我們應(yīng)該如何應(yīng)對(duì)？是通過(guò)不斷的踩坑來(lái)整理一份長(zhǎng)長(zhǎng)的 checklist, 然后做項(xiàng)目時(shí)一一對(duì)照？ 或者讓我們一起來(lái)探索 Rax?

了解更多 Rax 相關(guān)內(nèi)容，歡迎訪問(wèn) https://rax.js.org