Riot.js試してみた #riot.js

Reactで消耗しているmizchiです。

とりあえず一通り動かしてみた。webpack上でtag-loader使ってtagを動的にコンパイルすると便利だった。 https://github.com/mizchi-sandbox/webpack-riot-skeleton

Overview

軽量仮想DOM実装
Vue風の独自文法

riotが軽量なのは独自の文法に対してプリコンパイラを持っててパーサがランタイムから切り離されてることと、仮想DOM実装が本当に最低限で結構サボってるようにみえる。

仮想DOMの実装部分はここ https://github.com/muut/riotjs/blob/master/riot.js#L348-L413

一通り書いてみた結果、独自シンタックスが最大の特長で、イベントハンドラ周りで基本的にDOMべったりのコードを要求されるといった印象。

JSとHTMLを並列して書くのをあえて推奨している。作者はたぶんそれがいいと思ったんだろう。(個人的に全く趣味があわない)

個人の感想

以下ボロクソいうんで好きな人は注意。

写経して理解するにつれ深まったのが、いまさら独自シンタックスのテンプレートとかどうでもいいしなんでそこで頑張っちゃってんの、っていう気持ち。

独自文法のパーサがあまり信頼出来ない。それはまあ開発がすすめばいいとして、意外と覚えることが多い。アンドキュメントな暗黙の約束事(引数がoptsに入ってるとか)が多くてなんかめんどい。Vueとなんとなく記法が似てるんだけど、そんなんだったらvue.js使うわってなる。

公式サンプルを引用。

<timer>
  <p>Seconds Elapsed: { time }</p>

  this.time = opts.start || 0

  tick() {
    this.update({ time: ++this.time })
  }

  var timer = setInterval(this.tick, 1000)

  this.on('unmount', function() {
    clearInterval(timer)
  })

</timer>

このテンプレートではある程度カプセルしたHTMLとJSが混在できて便利、みたいな作者の気持ちを感じるけど、知ってる言語のコンビネーションではなく、新しいテンプレートエンジン一つ覚えてパーサの気持ちを察しろみたいなコンテキストの分離しづらさを感じてしまっている。パーサの気持ちにならないと書けない。怖い。(同様の理由でReactのJSXを使わずreact-jadeを使っている)

プリコンパイラに依存しているのでビルドパスが複雑になって、簡単に実行できて便利、という風にもならないと思う。

とまあ、自分はあまり好きになれなかった。

個人の感想です。