Riot.jsを触ってみた

日本語公式
github

動機

Riot.jsでフロントエンドの複雑さに反乱するときがやってきたというタイトルに強く惹かれたから
riot=暴動、という意味

Riot.jsとは

仮想DOMを利用したjavascriptのUIライブラリで、標準に近い文法で書かれており必要最小限の機能しか持たないため軽く、web componensライクなもの

v2.4:2016/05 now !
v2.0:2015/01
v1.0:2014/04
v0.9:2013/11

ソース比較

公式より

react

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

class Todo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {items: [], text: ''};
    }

    render() {
        const {items, text} = this.state;
        return (
            <div>
                <h3>TODO</h3>
                <ul>
                    <li>{items.map((item, i)=> <li key={i}>{item}</li>)}</li>
                </ul>
                <form onSubmit={this._onSubmit}>
                    <input onChange={this._onChange} value={text}/>
                    <button>Add #{items.length + 1}</button>
                </form>
            </div>
        );
    }

    _onChange(e) {
        this.setState({text: e.target.value});
    }

    _onSubmit(e) {
        e.preventDefault();
        const {items, text} = this.state;
        this.setState({
            items: items.concat(text),
            text: ''
        });
    }
}

ReactDOM.render(<Todo/>, mountNode);

riot

<script type="riot/tag">
<todo>
  <h3>TODO</h3>

  <ul>
    <li each={ item, i in items }>{ item }</li>
  </ul>

  <form onsubmit={ handleSubmit }>
    <input>
    <button>Add #{ items.length + 1 }</button>
  </form>

  this.items = []

  handleSubmit(e) {
    var input = e.target[0]
    this.items.push(input.value)
    input.value = ''
  }
</todo>
</script>


<todo></todo>
<script>riot.mount('todo')</script>

直感的にわかりやすい！
公式では
<script type="riot/tag"></script>の部分は別にしていますが、見やすさのために一緒にしてみました

メリット

• HTMLに近いので非エンジニアにも馴染みやすい
• サイズが小さく(reactの1/5でriot.min.js:9.18KB)モバイルに強い
• 学習コスト低そう

コンパイル

riotタグはブラウザ側で自動でjavascriptに変換される(compile用のjsを要指定)
事前にコンパイルすることも可能

コンパイルあり：https://cdnjs.cloudflare.com/ajax/libs/riot/2.4.0/riot+compiler.min.js
コンパイルなし：https://cdnjs.cloudflare.com/ajax/libs/riot/2.4.0/riot.min.js

感想

コンポーネント化するとcssでclassを用意しなくて済むとか面白い！
Web Componentsを少し体感できる！