Riot – Reactライクな軽量UIライブラリ
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のオープンソース・ソフトウェアです。