Onsen UI 2.0で何が変わったか？

• アンドロイドのマテリアルデザインを追加しました。
• 自動的にプラットフォームによってスタイルを切り替える機能を追加しました。
• Reactコンポーネントを作りました。
• Angular 2のコンポーネントを作成中。

マテリアルデザイン

Auto styling

• 見た目はプラットフォームによって自動的に変わります。
• アンドロイドで実行するとマテリアルデザインのコンポーネントが表示されます。
• ワンソースでiOSとアンドロイドに対応できます。

Onsen UI Reactコンポーネント

Reactって何？

• UIコンポーネントを作るライブラリです。
• フレームワークではありません。
• パーフォマンスが良いです。
• React Nativeを使ってネイティブアプリも書けます。

簡単なコンポーネント

import React from 'react';
import ReactDOM from 'react-dom';

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {number: 0};
    this.increment = this.increment.bind(this);
  } 
  
  increment() {
    this.setState({
      number: this.state.number + 1
    });
  }
  
  render() {
    return (
      <div>
        <p>
          {this.state.number}
        </p>
        <button onClick={this.increment}>+</button>
      </div>
    );
  }
}

ReactDOM.render(<Counter />, document.getElementById('root'));

実行すると…

Onsen UIの実例

import React from 'react';
import ReactDOM from 'react-dom';
import 'onsenui';
import {Switch} from 'react-onsenui';

class SwitchExample extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {switch: true};
    this.handleChange = this.handleChange.bind(this);
  } 
  
  handleChange(e) {
    this.setState({switch: e.target.checked});
  }
  
  render() {
    return (
      <div>
        <p>Switch is {this.state.switch ? 'on' : 'off'}</p>
        <Switch 
          checked={this.state.switch} 
          onChange={this.handleChange} 
        />
      </div>
    );
  }
}

ReactDOM.render(<SwitchExample />, document.getElementById('root'));

Hot Reloadingを試してみよう

https://github.com/gaearon/react-hot-loader

React hot loaderでリアルタイムにコンポーネントを修正できます

ご協力したい方へ

• バグを発見した際、GitHubでissueを作ると嬉しい。
• PRでバグを直してくれるとさらに嬉しい。
• 最近、PRの数が増えてとても助かっています。

ご清聴ありがとうございます！