Rax intro

Rax体系设计背景及现状

为什需要跨端解决方案

• 容器在持续的变化

• webview

• RN/Weex

• 小程序

• Flutter

• 除了运行在特定容器里，大多数业务都有投放到浏览器中的需求

• 不想根据容器写多套代码，也不想写代码的方式一直在变，开发效率低

Rax的起点

• RN无法支持Web，但是业务投放到Web又是必需的

• 与RN方案类似的Weex诞生，但是Weex的DSL其实是仿的Vue，与PC端React为主的技术栈不符

• 尝试将React与Weex融合，发现有很多无法解决的性能问题

Rax的愿景

• DSL标准

• 多端投放

• 生态完善

• 一次开发，多端运行

Rax跨端解决方案的设计及原理

跨端方案设计

VDOM的优势

特点

1. 标准的数据结构

2. 与具体的端解耦

价值

1. UI = fn(state)

2. 跨端

从VDOM到跨平台

• React/Vue起初都不具备跨平台的能力，所以早起RN/Weex都是内置一份hack的React/Vue

• Rax本身就是针对与跨平台来设计的，因此诞生时通过driver层的模式切换来适配不同的平台

• React会将jsx转换成VDOM，Rax在转换成VDOM后，若是Web端，会采用driver-dom将VDOM转换成DOM，Weex端则会采用driver-weex转换成Weex下渲染的DOM节点等等

DSL设计

为什么有了VDOM还需要语法编译

• VDOM的跨端能力需要容器来提供一些能力，有的容器不具备这样的能力

语法编译带来的缺陷

• 无法覆盖所有语法，一般都是一个子集，用起来效率不高

• 架构的复杂度较高，需要持续的投入

• 语法编译不是银弹，更推荐在特定的情况下使用

• 如通过babel-plugin-import按需引入组件

目前社区编译时的方案

1. Rax的driver-weex

2. Taro2.0

3. uniapp

框架设计

应用入口

// src/app.json
{
  "routes": [
    {
      "path": "/",
      "source": "pages/Home/index"
    }
  ],
  "tabBar": {
    "textColor": "#999",
    "selectedColor": "#666",
    "backgroundColor": "#f8f8f8",
    "items": [
      {
        "name": "home",
        "path": "/",
        "icon": "https://gw.alicdn.com/tfs/TB1ypSMTcfpK1RjSZFOXXa6nFXa-144-144.png",
        "activeIcon": "https://gw.alicdn.com/tfs/TB1NBiCTgHqK1RjSZFPXXcwapXa-144-144.png"
      }
    ]
  }
}

// src/app.ts
import { runApp, IAppConfig } from 'rax-app';

// 应用配置
const appConfig: IAppConfig = {
  app: {
    // ...
    onLaunch(){},
    onShow(){}
  },
  router: {
    // ...
  },
  store: {
    // ...
  }
};

runApp(appConfig);

多端构建

{
  "targets": ["web", "miniapp"],
  "web":{
  	"ssr": true
  },
  "miniapp": {
  	"buildType": "runtime"
  },
  "plugins": [
  	["build-plugin-rax-faas",[
    	"options": {}
    ]]
  ]
}

多端构建原理

Rax小程序整体架构

编译时方案

缺陷

// rax中
<View>
  {props.children}
</View>

// 小程序中可以用slot实现
<View>
  <slot />
</View>

// 如果rax中操作复杂一些，小程序就无法支持了
<View>
  {
  	props.children.map(child=><Text>{child}</Text>)
	}
</View>

运行时方案

特点： 弥补编译时方案的不足

• 不存在语法限制

• 运行真正的Rax，支持新特性

• 基于Webpack的工程

原理