2014年10月29日水曜日

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

(※)後日書きなおす予定。

先日、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の方が小さくて好みです。

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

まとめ


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