15 min/d

ぼうずやのにっき

bouzuya/virtual-dom-ssr で promise chain を維持する state container をつくった

bouzuya/virtual-dom-ssr で模索していることと、その過程でつくった promise chain を維持する state container の例を書く。まとまっていない。

現状は client / server で処理を共通化できていない。その共通化の方法について検討している。たとえば、昨日 (2016-02-05) は routing をつくっていたが、 routing 後の処理やその結果をやりとりする方法に迷っている。どうやりとりすれば client / server でうまく処理を共通化できるのかで迷っている。

いまの案はすべてを event 化することだ。一例は次の通りだ。

  1. request を event に変換する
  2. event を「 state を更新する関数」に変換する
  3. 変換された「 state を更新する関数」で state を更新する
  4. 更新された state を Virtual DOM に変換する
  5. 変換された Virtual DOM を HTML / DOM として描画する

この案の問題は request を対応する response に変換しないといけないということだ。この問題は Cycle.js をやめたいと言い出した 2016-02-03 に近い。 request から event に変換するのは良いが、それに対する結果がほしい。

ひとまず、この「 state を更新する関数」で state を更新して結果を取る構造をつくることにした。 Promise chain を維持する state container だ。

bouzuya/virtual-dom-ssrproperty.ts がそうだ。利用例は次のとおりだ。

const property = new Property({ name: 'bouzuya' });
property.update((state) => {
  return { name: state.name + '!' };
});
property.update((state) => {
  return { name: state.name + '?' };
});
property.value().then((state) => {
  console.log(state.name); // 'bouzuya!?'
});

良い構造になったら単体で切り出してもいいかもしれない。ただ、これは RxJS で簡単に代替できるし、どうなんだという気持ちはある。

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