https://muut.com/riotjs/
軽量JavaScript UIライブラリらしいRiotのバージョン２を試していきます。3.5KBでReactのようなユーザインターフェースが提供できるらしいです。まずはRiotのホームページを読んで、どのようなものか理解していきましょう。
Why Riot?
そしてなぜ新しいUIライブラリが必要なのか
##1. Custom tags
RiotはIE８は始めとする全てのブラウザにカスタムタグを提供します。
<todo>
<!-- layout -->
<h3>{ opts.title }</h3>
<ul>
<li each={ item, i in items }>{ item }</li>
</ul>
<form onsubmit={ add }>
<input>
<button>Add #{ items.length + 1 }</button>
</form>
<!-- logic -->
<script>
this.items = []
add(e) {
var input = e.target[0]
this.items.push(input.value)
input.value = ''
}
</script>
</todo>
カスタムタグはHTMLとJavaScriptを関連付け、再利用可能なコンポーネントを提供します。React + Polymer よりもより楽しくより学びやすくなっています。
###Human-readable
カスタムタグは高度なビューを提供します。実際のコードは次のようになるでしょう。
<body>
<h1>Acme community</h1>
<forum-header/>
<forum-content>
<forum-threads/>
<forum-sidebar/>
</forum-content>
<forum-footer/>
<script>riot.mount('*', { api: forum_api })</script>
</body>
HTMLは、事実上、Webの共通言語であり、UIを構築するためにデザインされています。そのシンタックスは皆が熟知しており、また言語レベルでネストを許容し、さらにオプションをタグの属性として、カスタムタグにわかりやすい形で提供できます。
Note：カスタムタグは表示される前にJavaScriptに変換されます。
###Virtual DOM
- 更新するDOMの量を可能な限り少なくします
- 単方向フロー：親から子への単方向で更新は伝播されます
- ハイパフォーマンスのために、カスタムタグは事前にコンパイルされ、キャッシュされます。
- よりコントロールするためにライフサイクルイベントが提供されます
- カスタムタグはサーバサイドでレンダリングされます
###Close to standards
- 固有のイベントシステムはありません
- IE8用にイベントは標準化されます
- レンダー後のDOMはその他のライブラリで操作可能です
- レンダー後のDOMはオリジナルなタグやdata-属性などは使いません
- jQueryと共存できます
##Use your favorite tools
- CoffeeScript, Jade, Typescript, LiveScript, ES6 そのほか好きな言語でカスタムタグを記述できます
- NPM, CommonJS, AMD, Bower そのほか好きなツールでインテグレートできます
- Gulp, Grunt, Browserify pluginでビルドできます
#2. Simple and minimalistic
他とかけ離れてRiotは小さい
##1. Enjoyable syntax
可能な限り小さなタグでパワフルな機能を提供するのがゴールの１つです
- ショートカット：
class={ enabled: is_enabled, hidden: hasErrors() } - renderなど余計なことに気を使わない
- 内記法: Add #{ items.length + 1 } or class="item { selected: flag }"
- scriptタグは必要ないなら使わない
- コンパクトなES6のメソッドシンタックス
##2. Small learning curve
RiotはAPIが他より１０から１００程度少ない
- 学ぶことが少ない
- Riot固有のことが少ない
##3. Tiny size
react.min.js – 127KB
polymer.min.js – 120KB
riot.min.js – 6.7KB
- バグが少なくなる
- パースが早くダウンロードも安価
- 埋め込み可能。ライブラリはアプリケーションより小さいべきである。
- メンテナンスが容易。実際、我々は小チームだ。
#4. Small, but complete
近代的なクライアントサイトアプリケーションのための機能を全て備えている
- UIを構築するための”反応的”なビュー
- モジュール化のためのイベントライブラリ
- URLとバックボタンをケアできるルータ
Riotはオープンスタックであり、特定のフレームワークのイディオムを回避したいユーザのためにあることを意味します。一般的なツールを使い、デザインパターンを適応できます。Facebook Fluxのようなシステムを自分で作れるのです。
#Conclusion
Riotは軽量なReact + Polymer + models + routingです。現状ではIE8ですら動きます。死ぬほど簡単で重さもほとんどありません。車輪の再発明ではなく、いいとこどりのよりシンプルなツールです。
“Templates separate technologies, not concerns.”
関連するロジックとレイアウトを同じコンポーネントで定義することでシステム全体がわかりやすくなります。我々はReactのこの考えを尊重します。
以上になります。次回は実際にRiotを使いたいと思います。
次回：Compiler編
自作のGetting Started