2014-10-29

話題のFluxアーキテクチャをES5のAngularJSで書いてみた

先日、HTML5jエンタープライズ部のメンバーと最近気になっていたFluxアーキテクチャについて味見してみました。
巷のAngularJSのサンプルはES6で書かれたもの多いので、実務でも使えるES5で書きなおしてみました。

Fluxの概要については@albatrosaryさんのブログを参照してください。

What’s Flux? - albatrosary’s blog

雑感

フレームワークの書き方が一通りわかると、次はもっと効率的に書くにはどうするかとか考え出します。
Backboneの時もそうだったのですが、SPAでフロント側を作った場合、modelの変更を複数あるview側にどう伝えるのがいいか、悩んで手が止まります。
(Backboneの時はグローバルのMediatorを通してmodelの変更を通知してました。当時の残骸はこちらmitsuruog/SPA-with-Backbone)

AngularJSの場合はshared servicesを使うか、$rootScope.$broadcastを使うことが王道かなと思います。
個人的にはshared servicesの方が小さくて好みです。

AngularJS - Angular JS で複数のコントローラ間でモデル(状態や値)を共有する方法 3 種類 - Qiita

Fluxアーキテクチャを使った場合は、Angular wayにならないので、これはこれでありかなと思いました。
ただ、Observerの制御を間違えるとメッセージパッシングが無限ループしだして死にます。(参加メンバーはもれなく無限ループを体験していましたw)

まとめ

Angularの場合は、無理してFlux使うよりshared servicesの方がコードは読みやすくなると思います。
そろそろSPAのアーキテクチャについても、かなり出尽くした感がしますね。