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が他より１０から１００程度少ない
1. 学ぶことが少ない
2. Riot固有のことが少ない

3. Tiny size

react.min.js – 127KB
polymer.min.js – 120KB
riot.min.js – 6.7KB
1. バグが少なくなる
2. パースが早くダウンロードも安価
3. 埋め込み可能。ライブラリはアプリケーションより小さいべきである。
4. メンテナンスが容易。実際、我々は小チームだ。

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

Riot 2.0 のホームページを読んでみる