もくもく会でFluxを学んだ with Babel + webpack

仲間内でGWもくもく会やるか！という話になったので、僕のテーマはFluxの考え方を学んで実装できるようにしようということで久しぶりにJS書きました。

やったこと

資料は Flux でぐぐると一番上に出てくる @azu_re さんのこちらのスライドを理解しながら写経 + @ するという感じ。

10分で実装するFlux

Fluxの雑な理解

• データの流れを一方通行にして表現するアーキテクチャ
• 登場する要素はComponent、Action、Store、EventEmitter
  • ComponentはActionをCallする + Storeを監視していてStoreの状態が変わったイベントを受け取って自分 = Viewに反映させる
  • ActionはComponentからCallされたActionをEventとして発行する
  • StoreはStateを持つ。Actionを監視していてActionのEventを受け取って自分のStateを更新して状態が変わったEventを発行する
  • EventEmitterはBus的な役割を持っていてObserverパターンの中核を担い、データの流れを繋げる。
• よく聞くReduxはこの辺をライブラリ化したもの。

書いてみる

• いきなりRedux触っても理解しづらいかなと思ったので、スライドの通りにスクラッチでピュアなJSで実装してみました。Reactなし版とReactあり版で書いてます。babel で書いていて、ビルドにはwebpackを使いました。

• Reactなし版 flux_training/babel_webpack at master · rei-m/flux_training · GitHub

• Reactあり版 flux_training/babel_webpack_react at master · rei-m/flux_training · GitHub

書いてみて思ったこと

• データの流れに制約を持たせることで煩雑になりがちな状態の管理をしやすくできるのかなという印象を持ちました。
• 仕組み的には新しい物はなく考え方が大事。

次の展開

• アーキテクチャはざっくり理解したので本業のアプリ開発に展開できるようなAndroidのサンプルを書いてみる予定。クライアントサイドの開発は状態の管理をいかに制御するかがキモですね。