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 (); }}render( );
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();
rax 工具包
rax-cli & rax-scripts
rax init 初始化项目
rax-scripts start 启动调试
rax-scripts build 构建项目
特性
Hot reload 热加载功能
兼容旧项目,无缝迁移
Rax 0.4,欲知后事如何,尽情期待