Riot.js を試食する

いろいろ雑いコードで動きます。jQuery 以上 Vue.js 未満くらいで考えるといいです。 Rails + HTML テンプレートで大部分が動いてて、ちょっとだけ JS を入れちゃうときに使うカンジです。 SPA には向きません。

eval とかも使われていなく、<script> に書いたものがそのまま function として使われているので、デバッグもそこそこ考慮されてると思います。

肝心の試食コードはこんな感じ

<book>
    <ul>
        <li each={books}>{title}</li>
    </ul>

    <form onsubmit={add}>
        <input type="text" name="name"/>
        <button>Add</button>
    </form>

    <script>
        this.books = [];

        add(e) {
            var input = this.name;
            this.books.push({"title": input.value});
            input.value = "";
        }
    </script>
</book>

これで <book></book> と HTML に書いてやると動きます。

riot.js 本体が 3.5KB (minify + gzip) と軽く、フレームワーク自体が重量級な Angular とかを入れたくないときとかに良いと思います。

依存関係とかどうするんだろう？と思ったけど、多分依存も無いような小さいことをするためのフレームワークなんでしょう。 やるならば、browserify で require したり、普通に出力された js と依存ライブラリと一緒に concat してやるとか。