Rax 0.3 介绍,兼容 React 的通用渲染引擎

太阳Z
 太阳Z
发布于 2017年06月15日
收藏 12

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,欲知后事如何,尽情期待

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动共创开源社区。
转载请注明:文章转载自 OSCHINA 社区 [http://www.oschina.net]
本文标题:Rax 0.3 介绍,兼容 React 的通用渲染引擎
加载中

最新评论(4

昵称为何这么难取
昵称为何这么难取
阿里的东西,呵呵一下就行了,认真就输了
notreami
notreami
KPI啊,KPI。。。。。下次晋升有希望啦
无发可说
无发可说
阿里这东西咋说呢 唉不说了
返回顶部
顶部