Rax (Web & Weex)

Rax is a front-end framework with a React like syntax. The main difference is that React is used for Web page rendering, while Rax is aimed at a generic cross-container rendering engine.

We can understand what cross-containers are from the Weex architecture.

Weex architecture

Weex is a lightweight cross-platform dynamic technology solution for mobile terminals. Weex as a whole can be divided into DSL and container (runtime environment).

DSLS are Domain Specific languages, which are specifically designed to solve tasks in certain scenarios. There are many common DSLS:

• Regular expression
• HTML&CSS
• SQL

Under Weex, the development effort focused on writing code in Weex DSL and then packaging the DSL code to produce xxx.bundle.js files, which completed the major development effort. The xxx.bundle.js file is rendered into Native components by the Weex container (runtime environment). Specific Native functions can be called during the execution.

In general, the final input to a basic Weex container (regardless of extending Native capabilities) is one or more xxx.bundle.js files packaged with Weex DSL. With this in mind, we continue to explore how Rax development should proceed.

Overhand Rax

The core function of Rax is cross-container, that is, it can run not only under Weex container, but also under Browser container. The cross-container nature of Rax is implemented by abstracting the Driver layer. The Rax Driver supports Weex, Browser, Server, WebGL, applets and other platforms, although it is not specified in the Rax documentation.

On the Rax Driver layer, the React syntax is used for programming.

Next document the process of developing a simple Rax project.

1. Install Weex Playground App

Weex Playground provides the Weex runtime environment. After downloading and installing Weex Playground App, you can load the XXX.bundle. js file generated by Rax packaging on the LAN for real-time preview.

2. Install raX-CLI scaffolding tools

Rax-cli is a scaffolding and integrated development tool provided by RAX.

npm install -g rax-cli
Copy the code

3. Initialize the project

rax init hello-rax
Copy the code

The initialization process will give you the option to initialize the Web project or Weex project.

4. Run

yarn start
Copy the code

According to Issue #1018, the current RAx-CLI no longer displays qr codes as described in the documentation and requires manual concatenation of urls.

The stitching rules are as follows:

• Web page: http://yourip:port/index.html
• Weex page: http://yourip:port/index.js

You can preview the URL on the Web page in the browser. You need to generate a QR code on the Weex page and use the Weex App to scan and preview the URL.

5. Packaging

yarn build
Copy the code

In the Rax(Weex) project, the generated XXX.index.js file for Weex is stored in the build directory. The file name is index.js.

When you open this file, you can see that the framework type token described in the Weex documentation is in the first line.

// {"framework" : "Rax"}
Copy the code

Copy the file to the DIST directory of the Weex project and overwrite the original index.js file to preview the file in the Weex project. In fact, vue. js was developed in Weex-Toolkits and packaged as dist/index.js.

If you want to compile an iOS or Android APP, use the Weex compilation process. That’s why in Issue #378, Yuanyan, lead developer of Rax, says:

You only need to package weeX app according to WEEX document to use RAX

If there is any mistake, welcome to point out, discuss!

Reference links:

1. Rax Series tutorials (hands-on)
2. Rax Series tutorials (Native Literacy)
3. Weex document
4. Preliminary study on Flutter and Rax