bouzuya/rally-client-example-vuejs 0.2.0 をつくり、その logo をかいた。

先週からの bouzuya/rally-client-example-vuejs を 0.2.0 にした。

rally-client-example-vuejs は Vue.js 2.0 による bouzuya/rally-client-js の例であり、RALLY の非公式な client だ。rally-client-js は library のみで UI がないので、実際に UI をつくり、検証しようというわけだ。dogfooding 。

Vue.js 2.0 を使っている。厳密には 2.0 RC だ。 2.0 の正式版は今日公開されたばかりでまだ追っていない。おそらく変更なく動く。vue-cli や vue-loader などを使っておらず、Vue.js 2.0 の推奨する書きかたはできていないと思う。2016-09-23 のような落とし穴 (vue-loader を使っていれば落ちない穴だけど……) を知ることができた。

rally-client-example-vuejs の 0.1.0 と 0.2.0 の違いは Model を切り出した点だ。 Command / Event の Message を interface として view と model を切り離した。この構造は bouzuya/bbn-drawing-vuejs と同様だ。EventEmitter で簡易の message bus をつくり、 deep-diff を使って Vue.js の proxy object に反映している。

今回は connect を View 向けの utility として切り出した。react-redux にすこし近づけた形。あとは bus や unsubscribe を隠せば react-redux と同等になる。

今回はほかにも Message で一工夫した。構造的部分型による互換性を使って type Message = XXXCommand | YYYEvent | ...; と interface Message { type: string; } をうまく組み合わせて使っている。

学んだ点としては removeListener な動きで引数に listener をとることの利点だ。rally-client-example-vuejs や bbn-drawing-vuejs では subscribe(listener) が unsubscribe() を返す。こちらのほうが楽だと思っていたからだ。しかし、const unsubscribe = subscribe(() => unsubscribe()); のように EventEmitter.prototype.once 的な動きを実装しようとしたときに unsubscribe(listener) のほうが良いと分かった。once 相当のものを用意するほうがいいかもしれない。

bouzuya/rally-client-example-vuejs の logo を描いた。

bouzuya/rally-client-js の logo (2016-09-26) を基に Vue.js の v を入れるようにした。手抜き。

ひとまず bouzuya/rally-client-example-vuejs はこれで終わり。成果は bouzuya/rally-client-js や Vue.js を利用する別 project に反映したい。