主に Riot.js の紹介で、時間があったら最近作ってるライブラリの話も、という感じで話してきました。Data Binding JS Night にて。 http://vuejs-meetup.connpass.com/event/14017/

1. Riot.js
河村 奨 @cognitom
Librize 合同会社 / 下北沢オープンソースCafe
+ generator で始める
新しいデータバインディング

2. あ、いる w

3. Riot.js?

4. 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のサポートほか

6. どんなん?

8. 短い

9. TAG file JS
compile
<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) {…}
)

10. もう少し詳しく

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

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

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

14. Riot React
HTMLの中に、JavaScript JavaScriptの中に、HTML

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

16. びみょー
• テストが甘い
• パーサが正規表現ってどうよ ><
※ただし、サーバサイド用のコンパイラは今後どうにかできるかも

17. プルリクエスト
お待ちしています
muut/riot

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

19. 最近、試していること
Riot.js + generator でデータバインディング

20. < component opts=“ナニカ”>
“strings”
ふつうはこう。

21. < component opts=“ナニカ”>
{ object }
オブジェクトを渡してもいいよね。

22. < component opts=“ナニカ”>
new Promise(…)
非同期のデータも渡したくない?

23. < component opts=“ナニカ”>
function*() {…}
どうせなら、連続的に。

24. < component opts=“ナニカ”>
function*() {…}
new Promise(…)
{ object }いろいろ。

25. ライブラリにしてみた

27. 「一揆」
ikki

28. 画面デモ…

29. component + generator
• コンポーネントは、今まで通り作ればOK
※ object/promise/generatorを気にする必要なし
• コンポーネント / コントローラは互いを参照せず → 疎結合

30. < component opts=“ナニカ”>
stream
.pipe(…)
.pipe(…)
ゆくゆくは
こうしたい。

31. プルリクエスト
お待ちしています
cognitom/ikki

32. Thank you!