bouzuya/vdom-rxjs-ssr の client-side をつくった。これは 2016-02-18 の続きだ。

さらりと「 client-side をつくった」と書いているが、これはいろいろな要素を含んでいる。手順を軽く振り返る。

まず Virtual DOM で描画できるようにした。server-side が client-side に返した HTML から DOM および initial state をつくっている。しかし、このままだと Virtual DOM での描画に困るので、DOM および initial state から Virtual DOM と state を復元する。あとは Virtual DOM library 、今回で言えば Matt-Esch/virtual-dom を使うだけだ。diff / patch で差分更新する。

次に event listener を設定できるようにした。たとえば button を click したときの event listener を設定する。今回も bouzuya/virtual-dom-ssr にならって Cycle.js のような query で設定にしている。意図したのではなく作りなおすのが面倒なのでそうした。

あとは router を設定できるようにした。a 要素の click event を History API の pushState に置き換えて、onpopstate を受け取るようにした。今回は bouzuya/virtual-dom-ssr にならって独自の Router を組み込んでいる。2016-02-18 にも書いた client-side / server-side に両対応するものだ。これで browser の back button も動くし、server-side への request が減る。

ひとまず bouzuya/virtual-dom-ssr と bouzuya/vdom-rxjs-ssr でほとんど同じ動きにした。

component や framework の抽出、testing などを課題として残している。想像でつくるよりも、この形で小さい application を書いていくのが良さそうだ。