欲しいものリスト

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

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

Riot vs React & Polymer

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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>

http://riotjs.com/ja/guide/

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

1
2
3
4
5
6
$ git clone https://github.com/riot/examples riot-examples
$ cd riot-examples/webpack
$ npm i
$ ./dev.sh

$ chromium http://localhost:3000/

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

riotのビルドはファイル.tagを指定するだけです。webpack.config.jsを見てください。

1
2
$ npm i riot -g
$ riot app/logs.tag

ここではapp/{logs.tag,random.tag}がそれに相当します。webpackでビルド、プレビューされていたため意識する必要はありません。

次に、superstaticを使ってみます。

こちらのほうがシンプル、ミニマムかもしれません。

1
2
3
$ npm i superstatic -g
$ ../router-complex/
$ superstatic

これを通常の手順でビルド、プレビューする場合は以下の通りです。

1
2
3
$ riot app-help.tag
$ riot app-main.tag
$ riot app-navi.tag
index.html
1
2
3
4
5
6
-    <script type="riot/tag" src="app-main.tag"></script>
-    <script type="riot/tag" src="app-navi.tag"></script>
-    <script type="riot/tag" src="app-help.tag"></script>
+    <script type="riot/tag" src="app-main.js"></script>
+    <script type="riot/tag" src="app-navi.js"></script>
+    <script type="riot/tag" src="app-help.js"></script>
1
$ jekyll server