Riotを使ってランダムの数値を作成する

React, Polymerなどと比較されるRiotを使ってみた。

公式で発表されている数値などによると、Riotはミニマムで、かつ早いらしいです。

Riot vs React & Polymer

そして、コードの構造が言語ごとに分けて書き出せるため、非常に分かりやすい書き方ができます。

<example-tag>
  <p id="findMe">Do I even Exist?</p>
  <p>Is this real life?</p>
  <p>Or just fantasy?</p>

  <script>
  this.on('mount', function(){
    // Contexted jQuery
    $('p', this.root)

    // Contexted Query Selector
    this.root.querySelectorAll('p')
  })
  </script>
</example-tag>

次に、exampleを元に実際使ってみます。webpackでビルド, プレビューします。

$ git clone https://github.com/riot/examples riot-examples
$ cd riot-examples/webpack
$ npm i
$ ./dev.sh

$ chromium http://localhost:3000/

内容はRandom number generatorです。ボタンクリックで作成します。

$ npm i riot -g
$ cd app
$ riot logs.tag
$ riot random.tag