Downloaded 14 times
Uploaded byTsutomu Kawamura
Riot + generator で始める新しいデータバインディング
主に Riot.js の紹介で、時間があったら最近作ってるライブラリの話も、という感じで話してきました。Data Binding JS Night にて。 http://vuejs-meetup.connpass.com/event/14017/
Riot + generator で始める新しいデータバインディング
- 1. Riot.js 河村 奨 @cognitom Librize合同会社 / 下北沢オープンソースCafe + generator で始める 新しいデータバインディング
- 2.
- 3.
- 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.
- 14.
- 15. 良いところ • HTMLっぽい :デザイナと一緒に使える • コード短い = 覚えることが少ない • Browserify/WebPack/gulp 好きなツールで • ただのUI: フレームワークは好きに選んで! • ScopedCSS ← プルリクエスト送りました ;)
- 16. びみょー • テストが甘い • パーサが正規表現ってどうよ>< ※ただし、サーバサイド用のコンパイラは今後どうにかできるかも
- 17.
- 18.
- 19. 最近、試していること Riot.js + generatorでデータバインディング
- 20.
- 21. < component opts=“ナニカ”> {object } オブジェクトを渡してもいいよね。
- 22. < component opts=“ナニカ”> newPromise(…) 非同期のデータも渡したくない?
- 23. < component opts=“ナニカ”> function*(){…} どうせなら、連続的に。
- 24. < component opts=“ナニカ”> function*(){…} new Promise(…) { object }いろいろ。
- 25.
- 27.
- 28.
- 29. component + generator •コンポーネントは、今まで通り作ればOK ※ object/promise/generatorを気にする必要なし • コンポーネント / コントローラは互いを参照せず → 疎結合
- 30.
- 31.
- 32.