Riot.js河村 奨 @cognitom

Librize 合同会社 / 下北沢オープンソースCafe

+ generator で始める新しいデータバインディング

あ、いる w

Riot.js?

Riot.js• カスタムタグを実現する、コンパクト(3.5K)なライブラリ

• 2015年1月 v2.0.0 v1とは完全に別物なので、実質4ヶ月と若い

• 現在 GitHubでスターが6K比較 Angular 39K, React 22K, Polymer 10K, Vue 4K

• 2015年5月 v2.1.0リリース - mixinのサポートほか

どんなん?

短い

TAG file JScompile

<my-tag> <p>{ message }</p> <style>p { color:white }</style> <script>…</script> </my-tag>

riot.tag(‘my-tag’, ‘<p>{ message }</p>’, ‘p { color:white }’, function(opts) {…} )

もう少し詳しく

{ } に変数、配列は each で回せる

属性に関数を渡すと、イベントハンドラに

コンパイルしてHTMLに読み込む / riot.mount()でDOMに展開

Riot React

HTMLの中に、JavaScript JavaScriptの中に、HTML

良いところ• HTMLっぽい : デザイナと一緒に使える • コード短い = 覚えることが少ない • Browserify/WebPack/gulp 好きなツールで • ただのUI: フレームワークは好きに選んで! • ScopedCSS ← プルリクエスト送りました ;)

びみょー

• テストが甘い

• パーサが正規表現ってどうよ ><※ただし、サーバサイド用のコンパイラは今後どうにかできるかも

プルリクエスト お待ちしています

muut/riot

ここまでは、Riot.js自体の話

最近、試していること

Riot.js + generator でデータバインディング

< component opts=“ナニカ”>

“strings”

ふつうはこう。

< component opts=“ナニカ”>

{ object }

オブジェクトを渡してもいいよね。

< component opts=“ナニカ”>

new Promise(…)

非同期のデータも渡したくない?

< component opts=“ナニカ”>

function*() {…}

どうせなら、連続的に。

< component opts=“ナニカ”>

function*() {…}

new Promise(…)

{ object }いろいろ。

ライブラリにしてみた

「一揆」ikki

画面デモ…

component + generator

• コンポーネントは、今まで通り作ればOK ※ object/promise/generatorを気にする必要なし

• コンポーネント / コントローラは互いを参照せず → 疎結合

< component opts=“ナニカ”>

stream

.pipe(…)

.pipe(…)ゆくゆくは こうしたい。

プルリクエスト お待ちしています

cognitom/ikki

Thank you!