Rax 0.3 介紹

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 下基於 canvas

• 目標：兼容 w3c 下全部的 api

rax-charts

• 基於 rax-canvas 和 g2-mobile

• 簡單的圖表需求

• 手淘版本：安卓 6.7.4+ 和 ios 6.6.0+

rax-qrcode & rax-barcode

• 基於 rax-canvas

• 經過文本生成條形碼以及二維碼

• 支持常見條碼格式 ( CODE39 CODE128 等 )

• 支持部分樣式自定義

import {createElement, Component, render} from 'rax';
import {View} from 'rax-components';

import QRCode from 'rax-qrcode';
import BarCode from 'rax-barcode'

class Demo extends Component {
  constructor() {
    super();
    this.state = {
      data: 'Example 1234'
    };
  }

  render() {
    return (
      <View style={{flex: 1}}>
        <QRCode
          data={'1234567890'}
          options={{
            typeNumber: -1,
            errorCorrectLevel: QRCode.ErrorCorrectLevel.H
          }}
        />
        <BarCode
          data={'123456789'}
          options={{
            fillColor: 'red'
          }}
        />
      </View>
    );
  }
}

render(<Demo />);

rax-picker & rax-datepicker & rax-timepicker

喚起客戶端原生的時間選擇與日期選擇，Web 上使用原生 select 或 input 實現。

rax-checkbox & rax-counter

電商類 UI 區塊抽象

經常使用業務 UI 區塊的沉澱

webgl driver

Rax Driver

• 抽象 View 層的實現

• 提供跨容器支持能力

• 標準的統一的 API ( createElement replaceChild setAttribute …)

WebGL Driver

• 與 Rax 結合的 driver 層

• 基於 three.js

• 提升 3D 開發的效率和體驗

var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

  var renderer = new THREE.WebGLRenderer();
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );

  var geometry = new THREE.BoxGeometry( 1, 1, 1 );
  var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
  var cube = new THREE.Mesh( geometry, material );
  scene.add( cube );
  camera.position.z = 5;

  var render = function () {
    requestAnimationFrame( render );
    cube.rotation.x += 0.1;
    cube.rotation.y += 0.1;
    renderer.render(scene, camera);
  };
  render();

<scene
    width={this.width}
    height={this.height}
    onAfterRender={this.onAfterRender}
  >
    <perspective-camera
      fov={75}
      aspect={this.width / this.height}
      near={0.1}
      far={1000}
      position={this.cameraPosition}
    />
    <mesh
      rotation={this.state.cubeRotation}
    >
      <box-geometry
        width={1}
        height={1}
        depth={1}
      />
      <mesh-basic-material
        color={0x00ff00}
      />
    </mesh>
  </scene>

rax 工具包

rax-cli & rax-scripts

• rax init 初始化項目

• rax-scripts start 啓動調試

• rax-scripts build 構建項目

特性

• Hot reload 熱加載功能

• 兼容舊項目，無縫遷移

Rax 0.4，欲知後事如何，盡情期待