Facebookが開発したReactはとてもユニークなライブラリです。カスタムエレメントやVirtual DOMなど便利な機能が備わっています。慣れると手放せないという方も多いのではないでしょうか。 そんなReact風の軽量UIライブラリがRiotです。他の同様なライブラリに比べて格段に小さく、それでいて十分な機能を備えています。

Riotの使い方

例えば以下のようなコードがサンプルになっています。

<todo>
  <h3>{ opts.title }</h3>
  <ul>
    <li each={ items }>
      <label class={ completed: done }>
        <input type="checkbox" checked={ done } onclick={ parent.toggle }/> { title }
      </label>
    </li>
  </ul>
  <form onsubmit={ add }>
    <input name="input" onkeyup={ edit }/>
    <button disabled={ !text }>Add #{ items.length + 1 }</button>
  </form>
  this.disabled = true
  this.items = opts.items
  edit(e) {
    this.text = e.target.value
  }

  add(e) {
    if (this.text) {
      this.items.push({ title: this.text })
      this.text = this.input.value = ''
    }
  }

  toggle(e) {
    var item = e.item
    item.done = !item.done
    return true
  }
</todo>

上記のコードが動くデモアプリ。

Riotの特徴としてはカスタムエレメント、Virtual DOM、フルスタック、IE8以上のサポートとなっています。ファイルは.tagという拡張子のファイルで、JavaScriptにコンパイルして使う方式になるようです。

Reactが127KB、Polymerが120KBなのに対してRiotは5.7KBと軽量です。IE8からサポートとなれば現実的な選択肢ではないでしょうか。

Riotはnode/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

Riot 2.0 | A React- like UI library muut/riotjs