読者です 読者をやめる 読者になる 読者になる

もやもやエンジニア

IT系のネタで思ったことや技術系のネタを備忘録的に綴っていきます。フロント率高め。

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

JavaScript Babel webpack Flux

仲間内で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はこの辺をライブラリ化したもの。

書いてみる

書いてみて思ったこと

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

次の展開

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