Matt-Esch/virtual-dom (以下、virtual-dom) で server-side rendering をためしたことを書く。
virtual-dom は Virtual DOM 実装のひとつ。server-side rendering は single page application などを server-side で rendering して配信するもの。
目的としては、昨日 (2016-02-03) で Cycle.js の server-side rendering に失敗したので、代わりに Cycle.js の一部である virtual-dom だけで server-side rendering を行ってみるため。
実装は Node.js && TypeScript 。詳細は package.json を参照。依存関係部分は次のとおりだ。
"dependencies": { "express": "^4.13.4", "htmlescape": "^1.1.0", "vdom-parser": "^1.2.1", "vdom-to-html": "^2.2.0", "virtual-dom": "^2.1.1" }, "devDependencies": { "babel-cli": "^6.3.17", "babel-preset-es2015": "^6.3.13", "browserify": "^13.0.0", "intelli-espower-loader": "^1.0.1", "mocha": "^2.3.4", "power-assert": "^1.2.0", "typescript": "^1.7.5", "typings": "^0.6.3" },
部分抜粋して紹介すると次のとおり。
- Web server として express
- client-side で復元すべき state を script 要素に埋め込むための htmlescape
- client-side で render する際の DOM to VDOM のための vdom-parser
- server-side で render する際の VDOM to HTML のための vdom-to-html
- diff/patch のための Virtual DOM として virtual-dom
- 2016-01-30 にも書いた型情報を取得するための typings
virtual-dom 関連の package は 2016-02-02 にまとめたものの一部を使っている。
ここまでは期待通りに動いている。まだ実用的な構成にまではなっていないので、もうすこしつくってみる。