Riot.js に 触れてみる #0
フロントエンド系のライブラリ/フレームワークはいくつもありますね。
- AngularJS
- React.js
- Riot.js
- vue.js
- Backbone.js
- Ember.js
- Knockout.js
用途によって必要なライブラリは変えていくべきですが、今回は Riot.js について触れてみようと思います。
Riot.js は...
HTML・JS・CSSを、普通に理解していて
「説明書を読まない人」向け
と、以下の利用に書かれているだけのこともあり、非常に直感的に分かりやすい書き方をします。
Riot.js in WPD-Week // Speaker Deck
Riot.js の特徴
カスタムタグ
いわゆるコンポーネント指向と言われているもので、独自のタグを作ることができます。
以下はtodoタグを作っている例です。
<todo> <!-- layout --> <h3>{ opts.title }</h3> <ul> <li each={ item, i in items }>{ item }</li> </ul> <form onsubmit={ add }> <input ref="input"> <button>Add #{ items.length + 1 }</button> </form> <!-- style --> <style> h3 { font-size: 14px; } </style> <!-- logic --> <script> this.items = [] add(e) { e.preventDefault() var input = this.refs.input this.items.push(input.value) input.value = '' } </script> </todo>
カスタムタグは、関連するHTML/CSS/JavaScriptを統合して、再利用可能なコンポーネントを形成します。
人間に読みやすい
カスタムタグにしていくと、HTMLのみで複雑なビューを作成できます。大元のHTMLは以下のようになります。
<body> <h1>Acme community</h1> <forum-header/> <div class="content"> <forum-threads/> <forum-sidebar/> </div> <forum-footer/> <script>riot.mount('*', { api: forum_api })</script> </body>
このようにカスタムタグを入れ子で配置したりすることもできます。
小さなサイズ
- polymer.html - 45.69KB (gzip)
- react.min.js - 45.05KB (gzip)
- riot.min.js - 9.81KB(gzip)
小さいので、ソースコード自体を読むのもそんなに苦ではないですし、余計な機能が一切省かれているのも個人的には好き。
etc
ここに書いてあることは全て、riot.js のサイトに書かれていることですので、もっと詳しく知りたい方は見てみてください。