新闻 Rax 0.3 介绍，兼容 React 的通用渲染引擎 下载

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，欲知后事如何，尽情期待
Rax 0.3 介绍，兼容 React 的通用渲染引擎下载地址