Rax 跨容器的渲染引擎开源项目

我要开发同款
匿名用户2017年01月12日
59阅读
开发技术JavaScript
所属分类React开源项目、手机/移动开发、React 开源项目
授权协议BSD-3-Clause

作品详情

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

特性:

超轻量:Gzipped之后仅6.7K

高性能:快速的虚拟DOM

易上手:兼容ReactAPI

快速开始:

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

$npminitrax<YourProjectName>初始化项目过程中,您可以根据提示选择一个或多个需要投放的端,目前可供选择的有Web、Weex、AlibabaMiniapp、WeChatMiniProgram、Kraken(Flutter):

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

Choosetargetsyourprojectwanttorun?(Press<space>toselect,<a>totoggleall,<i>toinvertselection)❯◉Web◯Weex◯AlibabaMiniApp◯WeChatMiniProgram◯Kraken(Flutter)面向Web端,您还可以选择性的开启SSR(服务器端渲染)能力来增强应用体验。

?Doyouwanttoenablethesefeatures?❯◉serversiderrendering(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未来的重要目标之一。

未来

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

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

了解更多 Rax 相关内容,欢迎访问https://rax.js.org

查看全文
声明:本文仅代表作者观点,不代表本站立场。如果侵犯到您的合法权益,请联系我们删除侵权资源!如果遇到资源链接失效,请您通过评论或工单的方式通知管理员。未经允许,不得转载,本站所有资源文章禁止商业使用运营!
下载安装【程序员客栈】APP
实时对接需求、及时收发消息、丰富的开放项目需求、随时随地查看项目状态

评论