riot + generator で始める新しいデータバインディング
TRANSCRIPT
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!