跨容器的渲染引擎 Rax

跨容器的渲染引擎 Rax

BSD-3-Clause
跨平台
阿里巴巴
2017-01-12
王练

Rax 是渐进式 React 框架,可以帮助你快速构建多端应用。一次开发多端运行,解放重复工作,专注产品逻辑,提升开发效率。

特性:

  • 超轻量:Gzipped 之后仅 6.7K

  • 高性能:快速的虚拟 DOM

  • 易上手:兼容 React API

快速开始:

基于 npm init rax 命令,可以快速创建一个 Rax 多端应用(注意:npm 版本需 >= 6.1.0):

$ npm init rax <YourProjectName>

初始化项目过程中, 您可以根据提示选择一个或多个需要投放的端,目前可供选择的有 Web、 Weex、Alibaba Miniapp、WeChat MiniProgram、Kraken (Flutter):

使用方向键导航到具体项目,使用空格选中或者取消选中。

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(服务器端渲染) 能力来增强应用体验。

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

Rax 的多端项目遵循同一套工程结构和开发规范,一次开发,便可同时被投放于 Web、Weex、小程序等多个容器,从而避免了业务在多端投放需求下的重复开发工作。

关于 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(SSR), Flutter(Kraken). 基于 Driver 的概念,未来即使出现更多的容器(如 VR 等),Rax 也可以从容应对。Rax 在设计上尽量抹平各个端的差异性,这也使得开发者在差异性和兼容性方面再也不需要投入太多精力了。

2、体积足够小

如上文所述,Rax 是一个面向无线端的解决方案,因此自身的体积对于性能来讲就显得非常重要。Rax 压缩 + Gzip 后的体积是 6.7kb, 相比 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 相关内容,欢迎访问 https://rax.js.org

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

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

评论(28)

七月_
七月_
死了吗?star 3876 最后一次 Commits on Jan 8, 2018
Rax_ZeroLing
Rax_ZeroLing 软件作者
一直在维护的,可以查看 Github 的 Commit 记录
编辑部的故事
编辑部的故事
可以积极把项目相关的东西在OSC上维护,不然人家都以为这项目挂了。相关资讯、博客、问答什么的都可以参与进来。
Rax_ZeroLing
Rax_ZeroLing 软件作者
后续会陆续有内容更新进来
忙两夜
忙两夜
一年后没死并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 2020.03.02 发布:TypeScript 模板来了,修复 Windows 兼容问题

三月的第一个工作日,一起来看下 Rax 团队上周的发布吧~有没有能够解决你手边正好碰到的问题?或者你还有什么别的诉求,可以在评论区和我们互动,Rax 关注每一个用户的开发体验,希望能成为你...

03/02 11:54

当 SSR 遇上 Serverless,轻松实现页面瞬开

作者:水澜@Rax Team 最近随着 Rax SSR 完成渲染性能 6x React 的提升,以及工程上 Serverless 发布形式的对接,我想是时候跟大家介绍下 Rax SSR 了。 什么是 SSR SSR 的全称是 Server Side ...

02/27 16:32

Rax 2020.02.21 发布: 更合理的构建产物输出、小程序运行时方案要来了

忙碌了一周的你,休息一下吧~来看下 Rax 本周的最新发布,有没有能够解决你手边正好碰到的问题?或者你还有什么别的诉求,可以在评论区和我们互动,Rax 关注每一个用户的开发体验,希望能成为...

02/21 14:05

Rax 2020.2.14 发布: Flexbox 布局 VSCode 插件、更好的工程体验

Rax 工程 新增多端支持全局 css 变量 新增在工程中的 build.json 中设置 alias 新增 dark 和 light 模式开发:业务开发支持使用 css 开发 dark 模式 UI 新工程 eslint 检测:新工程支持 esli...

02/17 14:48

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

没有更多内容

加载失败,请刷新页面

没有更多内容

2
回答
【一周】3月各大排行榜公布,Dart要火、Delphi没落 | 多个项目大版本更新

回顾一周社区热门资讯 第【六十三】期:20200229-20200306 点击相应标题,跳转阅读全文。 Apache Subversion(SVN)诞生 ...

03/07 23:30

没有更多内容

加载失败,请刷新页面

没有更多内容

[免杀] 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
104
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
178
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
794
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
4.3K
1
浅析360在系统的进程自保护及突破

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

2012/12/29 18:00
4.6K
2
协程分析之context上下文切换

协程现在已经不是个新东西了,很多语言都提供了原生支持,也有很多开源的库也提供了协程支持。 最近为了要给tbox增加协程,特地研究了下各大开源协程库的实现,例如:libtask, libmill, boo...

2016/10/28 23:40
291
0
x264的堆栈对齐 x264_stack_align

x264_stack_align 为什么要对齐,因为AVX2指令需要32字节对齐。 怎么对齐,在common/x86/cpu-a.asm 一句话,就是模拟一个空调用,这个调用只是对齐堆栈和转调真实的函数 %if ARCH_X86_64 ;-...

2013/10/08 16:52
446
0
汇编总结:lea指令

lea指令变种(按大小分类): leaw #2个字节 leal #4个字节 leaq #8个字节 lea的用法: leaq a(b, c, d), %rax 首先lea指令是mov指令的变种,据说,lea指令是x86体系结构中,是一条最古老...

2015/09/20 21:39
1.6W
0
SHA512编程实现与优化之一:maj函数

SHA512是常见的成熟的散列算法之一,实现高效SHA512运算有助于提高x64汇编编程能力,本文以SHA512算法中的maj函数为切入点,提醒自己不要忽视基本数学运算规则的掌握。

2016/05/20 15:21
195
2
我可以在Visual Studio中进行调试时在返回之前找出返回值吗?

具有以下功能: DataTable go() { return someTableAdapter.getSomeData(); } 当我在此函数中设置断点时,是否有可能检查返回的值? go()直接与.aspx页中的数据网格耦合。 检查返回的数据表的...

02/16 17:41
75
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部