Rax 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
Rax 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
Rax 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !
授权协议 BSD-3-Clause
操作系统 跨平台
软件类型 开源软件
开源组织 阿里巴巴
地区 国产
投 递 者 王练
适用人群 未知
收录时间 2017-01-12

软件简介

Rax 是一个超轻量,高性能,易上手的前端解决方案。一次开发多端运行,解放重复工作,专注产品逻辑,提升开发效率。

特性:

  • 超轻量: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

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论

点击加入讨论🔥(28)
发表于大前端专区
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
发表了资讯
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
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表了博客
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
发表了问答
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
暂无内容
28 评论
124 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部