跨容器的渲染引擎 Rax

跨容器的渲染引擎 Rax

BSD
JavaScript 查看源码»
跨平台
阿里巴巴
2017-01-12
王练

Rax 是阿里开源的一个通用的 JavaScript 库,主要有 React 兼容的 API 。 使用 React 的就应该已经知道如何使用 Rax。

特性:

  • 快速:快速的虚拟 DOM。

  • 微型:min + gzip 之后仅 8.0kb。

  • 通用:跨浏览器、Weex 和 Node.js。

示例:


快速开始:

将 Rax CLI 工具安装到 init 项目中:

npm install rax-cli -g
rax init YourProjectName

启动本地服务器运行项目:

cd YourProjectName
npm run start

关于的 Rax 介绍

2015 年双十一,Weex 的方案开始逐步使用,经过这次试水,证明了这套方案未来的场景及可行性,接着 2016 年 Weex 开始进入快速发展的阶段。但是使用 Weex 就意味着必须用 Vue 的语法,这对于整个团队来说是一个不小的挑战:PC 场景下的项目,小伙伴们普遍基于 React 开发,已经有了相当多的经验与沉淀。如果无线的项目要采用一个不同方案(Vue)去做,强推未必会不奏效,但是小伙伴们大概会伤心吧。

于是我们尝试将 React 与 Weex 结合起来,但是由于方案太过 hack 导致各种问题,遂无奈放弃。接着 Rax 的方案应运而生:「Rax 基于 React 的标准,支持在不同容器中渲染,当前最重要的容器即 Weex 和 Web」。

Rax 与 React

React 是一种标准,Rax 是对该标准的一个实现。Rax 只是无线端的解决方案,与 React 并无冲突。事实上淘宝 PC 端的新项目,依然主要是基于 React。当然,Rax 跟 Preact 之类的方案也有本质区别,前者偏向于解决多端问题,后者偏向于解决性能问题,具体可参考下文「Rax 的特点」。

Rax 的特点

1、设计上支持不同容器

Rax 在设计上抽象出 Driver 的概念,用来支持在不同容器中渲染,比如目前所支持的:Web, Weex, Node.js. 基于 Driver 的概念,未来即使出现更多的容器(如 VR 等),Rax 也可以从容应对。Rax 在设计上尽量抹平各个端的差异性,这也使得开发者在差异性和兼容性方面再也不需要投入太多精力了。

2、体积足够小

如上文所说,Rax 是一个面向无线端的解决方案,因此自身的体积对于性能来讲就显得非常重要。Rax 压缩 + gzip 后的体积是 8.0kb, 相比 React 的 43.7kb, 对于无线端友好了很多。

3、支持返回多个同级节点

任何用过 React 的同学大概都踩过同一个坑:方法返回了多个同级节点导致报错。在设计上 React 只能返回单个节点,因此页面上或多或少会产生一些冗余的节点,这在 PC 端并没有太多问题,然而在无线 Android 端嵌套层级越多,应用的 crash 率会不断提高,这一点在低端 Android 机上表现尤其明显。因此 Rax 支持了返回多个同级节点的功能,如:

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

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

这一特性可以有效减少页面的嵌套层级,从而减少应用因嵌套层级过多而出现的 crash 问题。

4、标准化

在上文里,我们不断的提各个端的一致性,一致则必有规范可依,Rax 遵循 W3C 标准,比如在 Weex 容器中已经可以直接调用 navigator, document, location, alert 等 W3C 的标准 API.

当然,受限于各个端的差异,标准化的道路还很长,「更标准化」这也是 Rax 未来的重要目标之一。

未来

Write once, run everywhere. 这是口号,亦是目标。Rax 未来会在更多的端上不断探索,比如 VR/AR, 甚至之前微博上有同学提出的是否可以用 Rax 写微信小程序,也是一个蛮有意思的想法。

对于开发者来说,当越来越多的端不断出现在眼前时,我们应该如何应对?是通过不断的踩坑来整理一份长长的 checklist, 然后做项目时一一对照? 或者让我们一起来探索 Rax?

了解更多 Rax 相关内容,欢迎访问 alibaba.github.io/rax

参考文章: http://taobaofed.org/blog/2017/02/10/why-rax/

的码云指数为
超过 的项目
加载中

评论(24)

七月_
七月_
死了吗?star 3876 最后一次 Commits on Jan 8, 2018
忙两夜
忙两夜
一年后没死并star超过1w,就考虑用。首先要确保不是kpi产物
小白小霸王
小白小霸王
一年后没死并star超过1w,就考虑用。首先要确保不是kpi产物
官万人员
官万人员
一年后没死并star超过1w,就考虑用。首先要确保不是kpi产物
l
libbb
一年后没死并star超过1w,就考虑用。首先要确保不是kpi产物
太阳Z
太阳Z
推荐
极客教程
极客教程
一年后没死并star超过1w,就考虑用。首先要确保不是kpi产物
xmut
xmut
一年后没死并star超过1w,就考虑用。首先要确保不是kpi产物
uni7corn
uni7corn
mark
诡道
诡道
一年后没死并star超过1w,就考虑用。首先要确保不是kpi产物

Rax 0.3 介绍,兼容 React 的通用渲染引擎

2017年5月底 Rax 发布 0.3 版本。伴着初夏,我们看看都有哪些新东西。 一些数据 经过近一个多月的稳步发展,Rax 体系上积累了一些新的尝试。 1377 commits 199 pull requests 70 issues 291...

2017/06/15 15:02

Rax 0.2 介绍,兼容 React 的通用渲染引擎

2017年3月底 Rax 发布了 0.2 版本,让我们一起看一下 0.2 版本为我们带来了哪些新的思考。 一些数据 从开源到 0.2 的发布上线,一些数据印证了 Rax 背后的成长,同时也是 Rax 的一种督促,督...

2017/06/15 15:01

没有更多内容

加载失败,请刷新页面

没有更多内容

暂无问答

[免杀] Delphi 内嵌ASM获取kernel32.dll的模块句柄 XP/Vista/WIN7

///XP/Vista/WIN7以及X86/X64 通吃 function Kernel32Handle(): HMODULE; {$IFDEF CPUX64} asm mov rbx,$60 mov rax,[gs:rbx] // peb mov rax,[rax+$18] // LDR mov rax,[rax+$30] // InLoad...

2016/01/25 18:35
52
1
[免杀] Delphi 内嵌ASM获取kernel32.dll的模块句 XP/Vista/WIN7以

///XP/Vista/WIN7以及X86/X64 通吃 function Kernel32Handle(): HMODULE; {$IFDEF CPUX64} asm mov rbx,$60 mov rax,[gs:rbx] // peb mov rax,[rax+$18] // LDR mov rax,[rax+$30] // InLoad...

2016/01/10 20:42
29
1
无core文件根据系统日志查找 程序core信息

由于系统没有设置core文件大小 [828][@zw_52_72 iproxy]# ulimit -a core file size (blocks, -c) 0 data seg size (kbytes, -d) unlimited scheduling priority (-e) 0 file size (blocks, ...

2014/08/12 11:30
728
0
借助编译器阅读耗子叔6个变态的C语言Hello World程序

hello1.c ```c #define _________ } #define ________ putchar #define _______ main #define _(a) ________(a); #define ______ _______(){ #define __ ______ _(0x48)_(0x65)_(0x6C)_(0x6C...

2016/07/12 15:07
1K
1
C++基础知识

链接:https://zhuanlan.zhihu.com/p/38399566 本文主要提一下以下三个区别: 引用必须初始化,而指针可以不初始化。 我们在定义一个引用的时候必须为其指定一个初始值,但是指针却不需要。 ...

2018/09/21 18:24
21
0
浅析360在系统的进程自保护及突破

自从改行玩硬件后,就很少关注病毒和反病毒之间的斗争了。某天在中关村论坛听到一 名网友说 360在WIN64 上有了进程自我保护,万分牛逼,连微软的Process Explorer都不 能结束呢!我听后心里十...

2012/12/29 18:00
2.1K
2
我的汇编学习之路(2):主要术语和概念

对于不折不扣的汇编新手来说,第一部分中出现的很多概念可能不是很明白,于是我决定写更多有价值的文章。所以,让我们开始《我的汇编学习之路》的第二部分的学习。 术语和概念 当我写了第一篇...

2015/09/05 12:12
80
0
我的汇编学习之路(1):指令

引言 我们很多人是开发者,每天写大量的代码,有时也不是糟糕的代码。每个人都能很轻松写下这样的代码: 1 2 3 4 5 6 7 8 #include <stdio.h> intmain() { intx = 10; inty = 100; printf("...

2015/09/05 12:09
84
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部