JavaScriptフレームワークがMVCであろうがMVVMであろうがMVPであろうがこういったことを議論するよりもまずは手を動かそうというのはとても理解できる話だと思います。作っているときに各モジュールをどう構造化するかが悩むことがありますが、その時に「こうやれば効率がいい」というものを見極めることも重要と思います。
MVC vs MVVM vs MVP. What a controversial topic that many developers can spend…
特にエンタープライズでは小川充(HTML5Experts.jp コントリビュータ)氏や酒巻瑞穂(HTML5Experts.jp コントリビュータ)氏が考えている通り、各モジュールをどのように構造化し開発ライフサイクルを運用するかが必要となります。こうした意味合いにおいて「Flux」という考え方が参考になるのではと思い資料をまとめます（まだ勘違いしている部分が多いですがひとまずまとめです）。
開発ライフサイクルから見たAngularJS from 酒巻瑞穂
今後のWeb開発の未来を考えてangularJSにしました from 小川充
Fluxって何？
Fluxは、facebookで利用されているクライアントのWebアプリケーションアーキテクチャです。これは、単方向のデータフローを利用して構成可能なビュー·コンポーネントをReact.js(A JavaScript library for building user interfaces | React)で行っています。Fluxは、デザインパターンというよりもより良い枠組み(考え方)を提示しています。
Views ---> (actions) ----> Dispatcher ---> (registered callback) ---> Stores -------+ Ʌ | | V +-- (Controller-Views "change" event handlers) ---- (Stores emit "change" events) --+
Flux | Application Architecture for Building User Interfaces
余談ですが、「Flux」という単語は「流れ」「絶え間ない変化」という意味合いがあります。googleで画像検索すると近代的な（？）流れのある構造物が多く見受けられます。
image: FLUX OPENING NIGHT — LIFT architects
React.jsとFluxアーキテクチャ
React.jsはユーザー·インタフェースを構築するためのJavaScriptライブラリでありfacebookのInstagramで利用されています。MVCアプリケーションでの「V」に着目しています。facebookではこのReact.jsを使ってFluxアーキテクチャを実装しています。
React: Flux Architecture - Video Tutorial Series @eggheadio
Fluxアーキテクチャを使ったAngularJS開発
Fluxアーキテクチャを適用する試みとして、AngularJSで実装する方法を紹介しています。ただ、このサイトに記載されているサンプルコードはECMAScript6で記述されています。 他のJavaScriptフレームワークでの試みもありbackbone.jsやKnockoutJSでもコメントが見られます。
Building Angular Apps Using Flux Architecture | Victor Savkin
大まかには下記の様な実装をしているようです。さっと見た雰囲気で書いてますので後程修正します。
- View: template/Controller ← Actionをインジェクション
- Action: factory ← Dispatcherをインジェクション
- Dispatcher: service
- Store: factory ← Dispatcherをインジェクション / Actionを登録
この資料で使っているサンプルプログラムの概要図がありますので添付します。
まとめ
昨晩(10/21/2014)、私の尊敬する技術者数名とFluxの話をしていて少し深堀してみたいということになり、まずはブログで資料をまとめました。大規模プロジェクトではある程度コーティング規約、特にどこに何を書くかなどポリシーを決める必要があります。のでメモとして残します。
まとめている最中にGunosyにFluxアーキテクチャに関する覚書が掲載されていましたのでリンクを追加します。
Fluxアーキテクチャの覚え書きを書いた - snyk_s log
