15 min/d

ぼうずやのにっき

vdom-rxjs-ssr の server-side をつくった

2016-02-15 につくった bouzuya/vdom-rxjs-ssr の server-side のことを書く。

bouzuya/vdom-rxjs-ssrvirtual-dom および rxjs での server-side rendering を検証するための project 。そして bouzuya/virtual-dom-ssr の後継である。

まずは virtual-dom-ssr → vdom-rxjs-ssr への経緯について書いておく。

virtual-dom-ssr は virtual-dom で server-side rendering を検証するための project だ。virtual-dom-ssr については過去に何度か書いている。

はじめは Cycle.js の利用を検討していたが 2016-02-03 で不適切だと判断した。代わりに virtual-dom + EventEmitter で書きはじめたのがこれだ。

他の部分の検証も兼ねている。たとえば path-to-regexp を使って server-side / client-side で routing を共有している。ほかにも bouzuya/promised-state という state contianer を用意している。

そして 2016-02-06 時点で触れているのだけど、EventEmitter で書くと RxJS ならすっきり書けそうな場面が多いと感じた。そこで出てきたのが以下の一文だ。

一日 EventEmitter でゴリゴリ書いてみた結果、 DOM driver 以外の使用を避けて、副作用も気にしなければ Cycle.js でいいんじゃないかという気がしてきた。これについてはまたそのうちに書くと思う。

Cycle.js 。ここでは cycle-core / cycle-dom のことだ。あれは virtual-dom + RxJS による実装で、作ろうとしているものの到達点のひとつだ。同じものをつくっても仕方ないので EventEmitter にしてみたのだけど、実際には RxJS のほうがきれいに書けそうな場面が多かった。そういう意味で「 Cycle.js でいい」と書いた。

ちなみにここで Cycle.js の利用について制限をつけているのは、Cycle.js は side-effect を driver に逃がすことを推奨しているのだけど、これをやめたほうがいいと考えているからだ。真面目に HTTP fetch などに適用すると、すっきりと書けるものも書けなくなるし Component を利用すると、さらにひどくなるとぼくは考えている。これはもうすこし検討が必要なのだけど……。

話を戻す。2016-02-17 の記事にある virtual-dom-ssr の client-side routing 対応が終わり、ひとつ区切りがついたと感じた。そこで virtual-dom + EventEmitter よりも virtual-dom + rxjs のほうが良い、なおかつ Cycle.js を使わない、このあたりの検証をしたくなった。

これが virtual-dom + EventEmitter から virtual-dom + rxjs への移行だ。そして bouzuya/virtual-dom-ssr から bouzuya/vdom-rxjs-ssr への移行の経緯だ。

次に今回の server-side について書いていく。

まず残念ながら server-side で RxJS に利点はほとんどないと思う。その理由は Cycle.js を不適切だと説明している 2016-02-03 を参照すると良い。要約すると 2 点だ。 server-side では event stream が 1 本で済むこと。ある request に対応する response を 1:1 で返すべきところに 1:N で応答を返せる Observable の構造が邪魔になること。

そこで今回は vdom-rxjs-ssr という名前に反して RxJS を使っていない。

  • Promise を返す initializer
  • initializer を選択するための path-to-regexp でつくられた router
  • State から virtual-dom の VTree を返す view
  • view を HTML として描画する renderToHTML

それくらいだ。あとは source code を参照してほしい。commit はこのあたりがそうだ。app/framework/ 以外は virtual-dom-ssr の残骸なので注意してほしい。app/ から見ると分かりやすいかもしれない。