A React-like user interface micro-library
カスタムタグ • 楽しい文法 • 仮想DOM • コンパクトな実装
なぜ新しいUIライブラリが必要なのか
フロントエンドの世界には、ライブラリが溢れてはいるものの、正直なところソリューションはまだ「そこにない」と感じています。私たちは、この大きなパズルを解くために、Riotという最良のバランスを見つけました。Reactが果たしかけたかに見えたものの、重大な弱点を残している点、それをRiotは解決します。
だから——私たちには新しいライブラリが必要なのです。
1. カスタムタグ
Riotは全てのブラウザで、カスタムタグを実現します。
<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に、”楽しい”文法と小さな学習曲線が一緒になった、とイメージしてください。
ヒューマンリーダブル
カスタムタグはHTMLで複雑なビューの構築を可能にします。あなたのアプリケーションはこんな感じになるでしょう:
<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の デファクト 言語であり、ユーザインターフェースを構築するためにデザインされています。文法はシンプルで明確、入れ子構造が備わっていて、属性はカスタムタグにオプションを提供するための簡潔な方法です。
メモ Riotタグは、ブラウザで実行する前に、純粋なJavaScriptに 変換されます。
仮想DOM
- 最小のDOMの更新とリフロー
- データは一方通行: 更新とアンマウントは親から子へ伝播します
- テンプレートは高いパフォーマンスを得るため、プリコンパイルされキャッシュされます
- 細かい制御のためのライフサイクルイベント
- ユニバーサル(アイソモーフィック)アプリケーションを実現する、カスタムタグのサーバサイドレンダリング
標準に近い
- 独自形式のイベントシステムはなし
- レンダリングされたDOMは、自由に他のツールから操作可能
- 余計なHTMLのルート要素や
data-属性を使う必要なし - jQueryとの親和性が高い
他のツールと相性がいい
- タグファイルは、ES6、Typescript、CoffeeScript、Jade、LiveScriptや、その他の好きなプリプロセッサでOK
- NPMやCommonJS、AMD、Bower、Componentが使えます
- GulpやGrunt、Browserifyのプラグインでコンパイル
2. シンプルでミニマリスト
ミニマリズムが、Riotを他のライブラリと一線を画すものにしています。
1. 楽しい文法
デザインのゴールの一つは、できる限り最小の”boilerplate”で使える、強力な文法を導入することです。
- 強力なショートカット:
class={ enabled: is_enabled, hidden: hasErrors() } - 余計なことを考えなくてOK:
renderとかstate、constructor、shouldComponentUpdateなどなど - インターポレーション:
Add #{ items.length + 1 }あるいはclass="item { selected: flag }" - ロジック部分を
<script>タグで囲むのはオプション - コンパクトなES6のメソッドの書き方
2. 小さな学習曲線
Riotは他のUIライブラリと比較して、APIの数が10分の1か、100分の1。
- 覚えることが少ない / 見なきゃいけない本もチュートリアルも少ない
- 独自形式なものが少なく、標準的なものが多い
3. サイズが小さい
polymer.min.js – 49.38KB
react.min.js – 33.27KB
riot.min.js – 10.85KB
- 少ないバグ
- パースが早く、ダウンロードも容易
- エンベッダブル(組込可能): ライブラリはアプリケーション本体より小さくあるべき
- メンテナンスの手間が少ない: Riotのメンテナンスのために大きなチームを必要としない
4. 小さくて、必要十分
Riotはモダンなクライアントサイドのアプリケーションを作るための、基本的な構成単位をすべて備えています。
- ユーザインターフェースを構築するための”Reactive”なビュー
- 分離されたモジュールのAPIを作るためのイベントライブラリ
- URLと「戻る」ボタンを処理するルータ
Riotは「オープンスタック」です。つまり、フレームワーク特有のイディオムを避けたい開発者向けです。一般的であることで、好きなデザインパターンを適用したり、混ぜたりすることができます。Facebook Fluxのようなシステムをつくることも可能です。
I looked at the riot.js example, and it feels so clean, it’s scary. @paulbjensen
Just messed around with #RiotJS for an hour. Got it setup with Gulp, Browsesify, and Babel in no time. I like it a lot so far! @AndrewDelPrete
Today I have used #riotjs 2.0 for the first time and I could admit that It will be a long term relationship #js highly recommended. @gianlucaguarini
I liked the idea of #reactjs with #flux but I like #riotjs with #riotcontrol even better! @tscok
looking at RiotJS https://muut.com/riotjs/ — blown away by its simplicity. @defeated
Played with riot.js and like it so much more than React. Minimalistic, fast and a comprehensible API. @juriansluiman
まとめ
Riotは誰でも使えるWeb Componentsです。React + Polymerから無駄を省いたものを想像してください。ごく自然に使用でき、すごく軽い。それを今日から使えます。車輪の再発明をするのではなく、これらのツールの良いとこ取りで、可能な限りシンプルにしました。
私たちは、テンプレートではなく、再利用可能なコンポーネントにフォーカスするべきです。Reactの開発者曰く:
「テンプレートは、問題ではなく、技術を分けるだけだ」
同じコンポーネントの中で、レイアウトとロジックを一緒に持てば、全体のシステムはより簡潔になります。この重要な洞察について、Reactに敬意を示したいと思います。