先日、HTML5j エンタープライズ部のメンバーと最近気になっていた Flux アーキテクチャについて味見してみました。 巷の AngularJS のサンプルは ES6 で書かれたもの多いので、実務でも使える ES5 で書きなおしてみました。
- デモはこちら Angular Flux ES5
- コードはこちら mitsuruog/angular-flux-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 のアーキテクチャについても、かなり出尽くした感がしますね。