谈谈 Rax(一):介绍

前端2017-09-051 篇评论 移动开发 JavaScript

很荣幸能够在大三的暑假作为一名实习生进入阿里巴巴参与暑期实习,实习工作最大的收货就是学习掌握了 Rax 项目的开发,并在有了一些自己的感悟。

Rax 对我来说是一个全新的、入职前从未听说过的一个前端框架,相信对于大多数人来说也是如此。虽说其与 Weex 有非常紧密的联系,但相比之下网上的技术文章和博客对 Rax 的介绍非常之少,除官方文档外仅有几篇由官方提供的文章。所以我希望能够通过接下来的几篇文章,向大家介绍一下 Rax。

Rax 概念

Rax 是由阿里巴巴内部开发并于2017年1月开源的一个移动前端框架,官方对其的定义是:

Rax - 跨容器的渲染引擎

或许这定义有一点深奥,有两个名词可能难以理解,再稍微解释下吧:

  • 容器:指应用运行所基于的环境,一般处于操作系统的上层。Rax 目前所支持的容器包括浏览器、Weex、Node.js 甚至 WebGL 等。
  • 渲染引擎:Rax 包含了一套与 React 类似的 View 层框架,使用数据填充模板后完成 DOM 的渲染,最终通过容器将界面展现出来。

那么,Rax 有何用呢?

先引用一下官方对 Rax 的口号

Write once, run everywhere!

一次编写,到处运行,这不就是跨平台最有强力的口号吗?

Rax 的使用场景

既然 Web 规范就提供了完美的跨平台解决方案,只要有浏览器就能实现跨平台的运行,那为什么还要专门开发跨平台的框架出来呢?

的确,有很多 APP 为了节省开发成本,或是为了提升界面的开发效率,在很多界面都采用内嵌 WebView 的形式,引用 Web 界面作为交互。通过这样的方式,确实解决了以上这两点问题,但同时所带来的,就是大量用户体验上的问题了。

最显而易见的就是 12306 APP 客户端,整个 APP 可是说就是在一套 HTML 页面套了层 APP 的壳子,使用体验想必大家已经清楚,在低配置的手机上简直是不能忍啊。加载慢、卡顿、交互迟缓等等都是 Web 界面在低性能移动设备上无法避免的问题。

但如果为了保证 APP 的最佳用户体验,一个大型 APP 将内部所有的界面都通过 Native 进行开发(Java、 Objective-C/Swift)也是很困难的。特别是针对于电商类 APP,经常会有大量的大促活动页面需要开发上线,无论是从开发成本还是更新发布来说,Native 开发都是不太现实的。所以大多数活动页面的搭建都是建立在 Web 之上的。

那么是否就无法解决开发效率与用户体验之间的矛盾了呢?答案当然是否定的。Rax 通过 Weex 容器可使得使用 Web 技术开发的页面在 Android 及 iOS 平台上通过 Native 组件进行渲染,如此一来便可充分结合 Native 高效的交互和渲染以及 Web 的高效开发方式。

Rax? Weex?

Rax 项目的跨平台特性主要是通过 Weex 容器提供的。想必大家对 Weex 早已有所耳闻,Weex 是一套构建高性能、可扩展的原生应用跨平台开发方案,但对 Rax 和 Weex 之间的关系可能还不是很清楚。

下面说明一下两者的区别与联系

  • Weex 是 Rax 应用最重要的容器。Rax 在 Android 和 iOS 中的 Native 界面均由 Weex 容器使用系统 Native 组件渲染完成。
  • Rax 提供了一个 Weex 的扩展 JS Framework,实现了一套与 React API 相兼容的 View 层框架,在拥有 React 高效开发体验的同时,还可以直接使用 React 社区中大量成熟的类库,这算是 Rax 最大的亮点。

Weex 官方提供支持的 View 层框架是 Vue 2.0,而 Rax 提供的 View 层框架是兼容 React API 的一套自有实现,这样就使得 React 开发者占据多数的阿里前端不再需要为无线开发而放弃已有成熟的 React 生态。

其实在集团内部,都把通过 Rax 开发并且运行在 Weex 容器中的项目称作是 Weex 项目,因为无论是对于 Native APP 的开发者还是对于最终用户来说,两者并没有什么不同之处。

Rax 示例

讲了这么久的概念,我们还是直接上代码,来看看 Rax 的真正模样吧。

下面是一个官方的示例,

// index.js
import {createElement, Component, render} from 'rax';
import Text from 'rax-text';
import View from 'rax-view';
import Player from 'rax-player';
import './index.css';

class App extends Component {
  render() {
    const poster = 'https://t.cn/Rix2n5W';
    const video = 'https://t.cn/Rix23Kr';
    return (
      <View className="container">
        <Text className="text">
          Hello,this is Rax Playgroud, support web and weex preivew.
          You can use any Rax components here.
        </Text>

        <Text className="text">
          这里是 Rax Playgroud, 支持 web 和 weex 的预览.
          你可以在这里使用 Rax 的任意组件。
        </Text>

        <Player
          className="player"
          poster={poster}
          src={video}
          controls
          startBtn
        />
      </View>
    );
  }
}

render(<App />);
/* index.css */

.container {
  width: 750rem;
}

.player {
  height: 400rem;
}

.text {
  margin-bottom: 50rem;
}

如果你有 React 的开发经验,那么对于以上代码一定很熟悉。对,Rax 保证了对 React 的兼容,因此,你完全可以按照 React 的开发方式来开发 Rax 项目。

光贴代码还不够,怎么把这段代码跑起来呢?是不是还得再来一大段文字介绍 Rax 开发环境的搭建?

如果你只是想初步了解 Rax 的话,就不用那么复杂了,Rax 提供了一个 Playground,你可以直接在上面编辑 Rax 代码,随后点击运行,然后拿出手机打开淘宝 APP 直接扫描页面上方的 Weex 二维码就可以直接访问 Weex 渲染出的界面了。扫描页面下方的 Web 二维码可以访问 Web 渲染的页面,并且可以从播放器的形态体现出两者的差别。

是不是很简单,并且很有趣?这篇文章只是对 Rax 做了一个初步的介绍,真正的 Rax 精髓就等接下来几篇文章的介绍吧!

Rax 相关文档资料

评论区

发表评论
用户名
(必填)
电子邮箱
(必填)
个人网站
(选填)
评论内容
Copyright © 2017 dremy.cn
皖ICP备16015002号