Rax 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
Rax 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
Rax 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」 !
Rax 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」「最积极运营项目」 !
Rax 获得 2020 年度 OSC 中国开源项目评选「最积极运营项目」 !

软件简介

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/

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (28)

加载中
死了吗?star 3876 最后一次 Commits on Jan 8, 2018
2018/01/18 10:47
回复
举报
Rax_ZeroLing软件作者
一直在维护的,可以查看 Github 的 Commit 记录
2020/02/19 15:58
回复
举报
可以积极把项目相关的东西在OSC上维护,不然人家都以为这项目挂了。相关资讯、博客、问答什么的都可以参与进来。
2020/02/20 14:49
回复
举报
Rax_ZeroLing软件作者
后续会陆续有内容更新进来
2020/02/20 20:04
回复
举报
2020/02/21 00:26
回复
举报
打分: 力荐
一年后没死并star超过1w,就考虑用。首先要确保不是kpi产物
2017/09/14 10:13
回复
举报
一年后没死并star超过1w,就考虑用。首先要确保不是kpi产物
2017/05/23 15:36
回复
举报
一年后没死并star超过1w,就考虑用。首先要确保不是kpi产物
2017/05/23 15:27
回复
举报
打分: 很差
一年后没死并star超过1w,就考虑用。首先要确保不是kpi产物
2017/05/23 14:35
回复
举报
打分: 力荐
推荐
2017/03/27 13:13
回复
举报
一年后没死并star超过1w,就考虑用。首先要确保不是kpi产物
2017/01/17 09:33
回复
举报
一年后没死并star超过1w,就考虑用。首先要确保不是kpi产物
2017/01/13 15:56
回复
举报
mark
2017/01/13 15:34
回复
举报
一年后没死并star超过1w,就考虑用。首先要确保不是kpi产物
2017/01/13 15:07
回复
举报
更多评论
发表于大前端专区
2020/03/02 11:54

Rax 2020.03.02 发布:TypeScript 模板来了,修复 Windows 兼容问题

三月的第一个工作日,一起来看下 Rax 团队上周的发布吧~有没有能够解决你手边正好碰到的问题?或者你还有什么别的诉求,可以在评论区和我们互动,Rax 关注每一个用户的开发体验,希望能成为你的选择🎁。 Rax 工程 支持 TypeScript 模板:初始化新工程支持 TypeScript 模板 修复 Windows 下 MPA 插件路径错误 修复 KeepAlive 页面在 url 变化时 useEffect 被触发问题 修复 MPA 应用 app.json hydrate 配置不生效问题 新增 ra...

2
3
发表于大前端专区
2020/02/27 16:32

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

作者:水澜@Rax Team 最近随着 Rax SSR 完成渲染性能 6x React 的提升,以及工程上 Serverless 发布形式的对接,我想是时候跟大家介绍下 Rax SSR 了。 什么是 SSR SSR 的全称是 Server Side Rendering,对应的中文名是:服务器端渲染,顾名思义是将渲染的工作放在 Server 端进行。 而与之对应的是 CSR ,客户端渲染,也就是目前 Web 应用中主流的渲染模式,一般由 Server 端返回的初始 HTML 页面,然后再由 JS 去异步加载数据,...

18
25
发表于大前端专区
2020/02/21 14:05

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

忙碌了一周的你,休息一下吧~来看下 Rax 本周的最新发布,有没有能够解决你手边正好碰到的问题?或者你还有什么别的诉求,可以在评论区和我们互动,Rax 关注每一个用户的开发体验,希望能成为你的选择🎁。 Rax 工程 Feat: 支持禁用或者自定义设置 doctype Refactor: 调整 SSR 的构建产物 Refactor: 工程路径规则统一:统一 SPA 、 MPA 的构建产物及 url 的路径标准 Feat: 支持透传 pageInfo 到每个页面的模板: 解决 MPA 下,...

2
5
发表于大前端专区
2020/02/17 14:48

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

Rax 工程 新增多端支持全局 css 变量 新增在工程中的 build.json 中设置 alias 新增 dark 和 light 模式开发:业务开发支持使用 css 开发 dark 模式 UI 新工程 eslint 检测:新工程支持 eslint-config-rax 配置 修复 build-plugin-rax-app 中 web target 必须在第一个位置,否则 start 命令启动异常问题 修复当项目为 css module 的时候 style 动态计算报错 修复 html 文件在 windows 上的路径问题 新增产物输出 umd 格式 新增 ...

0
6
发表了资讯
2017/06/15 15:06

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

2017年5月底 Rax 发布 0.3 版本。伴着初夏,我们看看都有哪些新东西。 一些数据 经过近一个多月的稳步发展,Rax 体系上积累了一些新的尝试。 1377 commits 199 pull requests 70 issues 2910 stars framework 新增支持 API,进一步向 W3C 标准同步 location assign replace reload navigator.userAgent WebSocket 重复检测 检测项目里的 Rax 重复打包情况 组件生态 基础组件体系的扩充 rax-canvas Weex 下基于 gcanvas Web 下基...

4
12
发表了资讯
2017/06/15 15:05

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

2017年3月底 Rax 发布了 0.2 版本,让我们一起看一下 0.2 版本为我们带来了哪些新的思考。 一些数据 从开源到 0.2 的发布上线,一些数据印证了 Rax 背后的成长,同时也是 Rax 的一种督促,督促我们要提供一个更好的 Rax 体系。 940 commits 141 pull requests 58 issues 2691 stars weex-driver 基于 Driver 的设计我们可以做什么? 下面是一个渲染按钮的简单例子 import {createElement, Component, render} from 'rax'; ...

0
2
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
2020/01/16 17:17

Rax 系列直播第二弹|双引擎驱动 Rax 颠覆小程序开发

淘系技术 直播分享报名通道火热开启 直播须知 主题:双引擎驱动 Rax 颠覆小程序开发 时间:1月20日 19:00-20:00 嘉宾: 逆葵 阿里巴巴淘系技术前端工程师 洋风 阿里巴巴淘系技术高级前端工程师 分享简介 Rax 自 2019 年 7 月起正式支持小程序和淘系商家应用开发。半年时间,覆盖了阿里全集团所有 BU,淘系内部大部分商家应用业务均使用 Rax 开发。目前 Rax 支持阿里系小程序、淘系商家应用和微信小程序等多端,同时底层支持了...

0
0
发表于大前端专区
2020/10/23 00:00

当我谈 Rax 按端拆分代码的时候我谈些什么

写在前面 Rax 是淘系的一套跨端解决方案,可以看 入门支撑了淘宝上亿日活的跨端框架 Rax 了解一下使用方法。 根据 Rax 工程配置[1] 知道,使用 Rax 时,如果设置了 target: ['web', 'weex'],则构建产物 build 目录会有两个子目录:web 和 weex,分别在 web 端和 weex 端消费。并且通过观察可以发现,两个目录下的内容是不一样的,已经根据不同环境拆分代码。业务逻辑比较复杂时,代码体积会比较大,按端拆分代码的能力是必须的...

0
0
发表于大前端专区
2020/10/20 08:00

入门支撑了淘宝上亿日活的跨端框架 Rax

一些废话 ❝ 沉寂了两个月,我又回来了。❞ 跟你们猜的一样,我已经到淘系实习了一段时间了,从上一篇文章之后就放了更多的心思在工作上。上篇文章发出去之后,我去腾讯实习了一段时间,等待阿里实习生入职流程开启。 收到淘系的实习生 offer 后,我买了人生中的第一张机票,第一次坐上了飞机,来到了一个陌生的城市——杭州。干净的街道、宽敞的沥青马路,吸引了我这个来自小城市的年轻人。 博客很久没更新了,不管是个人的网站...

0
0
2020/06/15 09:28

直播通道预开启!独家分享带你玩转Rax

淘系技术 直播分享重磅推出报名🔥热开启 直播须知 主题:使用 Rax 快速构建多端应用 时间:12月26日 19:00-19:45 嘉宾:洋风 Rax 项目核心负责人之一 ▼ 分享简介 Rax 是一个多端开发方案,用户一次开发可以运行在 Web、Weex、小程序等不同端。与2017年正式开源,目前有5.8k star,阿里巴巴、小米、美邦等公司使用。2019年阿里巴巴双11,天猫淘宝等业务全部使用 Rax 进行开发,降低前端的开发成本,带来更加极致的体验。 参...

0
0
发表于大前端专区
2020/02/15 09:20

Rax SSR 完成6倍 React 渲染性能 提升!

最近随着 Rax SSR 完成渲染性能 6x React 的提升,以及工程上 Serverless 发布形式的对接,我想是时候跟大家介绍下 Rax SSR 了。 什么是 SSR SSR 的全称是 Server Side Rendering,对应的中文名是:服务器端渲染,顾名思义是将渲染的工作放在 Server 端进行。 而与之对应的是 CSR ,客户端渲染,也就是目前 Web 应用中主流的渲染模式,一般由 Server 端返回的初始 HTML 页面,然后再由 JS 去异步加载数据,然后完成页面的渲染。...

0
0
2020/02/18 09:30

Rax SSR 完成6倍 React 渲染性能提升!

最近随着 Rax SSR 完成渲染性能 6x React 的提升,以及工程上 Serverless 发布形式的对接,我想是时候跟大家介绍下 Rax SSR 了。 什么是 SSR SSR 的全称是 Server Side Rendering,对应的中文名是:服务器端渲染,顾名思义是将渲染的工作放在 Server 端进行。 而与之对应的是 CSR ,客户端渲染,也就是目前 Web 应用中主流的渲染模式,一般由 Server 端返回的初始 HTML 页面,然后再由 JS 去异步加载数据,然后完成页面的渲染。...

0
0
发表于大前端专区
2020/03/13 15:18

Rax,完美融合编译时与运行时的双引擎小程序框架

> 作者:阿里巴巴淘系前端工程师 弗申 逆葵 > > [Rax Github Repo](https://rax.js.org/miniapp) > >[Rax 小程序官网](https://rax.js.org/miniapp) 经过持续的迭代,Rax 小程序迎来了一个大的升级,支持全新的**运行时方案**。站在 2020 年初这个时间点,我们想从 Rax 小程序的特点出发,进行一次全面的梳理与总结,并且在文末附上了 Rax 与当前主流的小程序开发框架的对比。本文将从 **API 设计与性能**、**双引擎架构**、**优...

0
4
2020/05/29 09:25

写给跨端玩家:支撑淘宝上亿日活的跨端框架—— Rax 的入门教程(附 TODO Demo)

作者最近上手了淘系的开源跨端框架——Rax,新奇又好玩,也总结了一些「很基础」的开发技巧,补充一下官方文档的缺漏(官方文档对于新手来讲确实不太友好)。 基础部分演示项目 Git 仓库:Rax-TODO[1] 进阶技巧演示项目 Git 仓库:Software-Engineering[2](同时也是我的课程设计,欢迎大伙点个 Star) 前面的部分是针对只有一点 React 基础的同学的,高端玩家请点击:进阶技巧[3] 项目环境 node >=10.3.0 npm >= 6.1.0 前置知识...

0
0
发表了博客
2016/01/25 18:35

[免杀] 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] // InLoadOrderModuleList.Blink, mov rax,[rax] // [_LDR_MODULE.InLoadOrderModuleList].Blink kernelbase.dll mov rax,[rax] // [_LDR_MODULE.InLoadOrderModuleList].Blink kernel32.dll mov rax,[rax+$10] //[_LDR_MODULE.InLoadOrderModuleL...

0
1
发表了博客
2016/01/10 20:42

[免杀] 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] // InLoadOrderModuleList.Blink, mov rax,[rax] // [_LDR_MODULE.InLoadOrderModuleList].Blink kernelbase.dll mov rax,[rax] // [_LDR_MODULE.InLoadOrderModuleList].Blink kernel32.dll mov rax,[rax+$10] //[_LDR_MODULE.InLoadOrderModuleL...

0
1
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表了问答
2020/03/07 23:30

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

回顾一周社区热门资讯 第【六十三】期:20200229-20200306 点击相应标题,跳转阅读全文。 Apache Subversion(SVN)诞生 20 周年 大人,时代变了,现在是 Git 的天下。。。不过 SVN 的光辉永在。 Ubuntu 20.04 默认壁纸来了,这只猫有“镭射眼” 延续传统,Ubuntu 每个大版本都会给出一套特制的桌面壁纸,并且一般以代号中的动物(这本身也是一个传统)为创作灵感。比如 18.04 LTS Bionic Beaver、19.04 Disco Dingo 和 19.10 ...

3
9
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
28 评论
123 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部