Transcript

• 1. What is Flux? いまさら始める、クライアントサイドの設計とFlux @axross at April 3, 2015
• 2. 話す人 • Kohei Asai • @axross • TriFort, Inc. UI / UX div. • JavaScript
• 3. Fluxとは
• 4. Fluxとは • クライアントサイドの設計パターン • 「MVC + Observerパターン」 の亜種 • と思っておけばだいたい合ってる
• 5. Observerパターンとは 一応…
• 6. Observerパターン • イベントの監視と発火の要領で、オブジェクト同士を 結合させるやり方 • EventEmitterでの例 • オブジェクトAでevent.on() → 監視 • オブジェクトBでevent.emit() → 発火 • オブジェクトAはevent.on() 時のコールバックが 呼ばれ、値をを受け取る
• 7. クライアントサイドには Observerパターンが必須
• 8. Observerパターンのない設計 • Reactでの例 • 親は状態と状態を変更する関数を持つ • 親が子に状態の一部と、状態を変更する関数を渡す • 子はその関数を使って、親の状態を変更 • それによって自分自身が変更される • 「まあ、行けんじゃね…？」とか思う
• 9. つらい • じゃあ、親子関係が深くなったら？ • 親が子に状態の一部と状態を変更する関数を渡す • 子が孫に状態の一部と状態を変更する関数を渡す • 孫が曾孫に… • 曾孫が玄孫に… • 家系図かよ(怒) → 設計の死
• 10. マジつらい • 兄弟同士はどうする？ • 兄弟を囲う親を作ればいいのでは？ • 状態は誰が持つ？ • 状態を持つ/渡すために無駄な親を生む • 兄弟じゃなくなったらどうする？ • 仕様変更こわい → 設計の死
• 11. Observerパターンのある設計 • 親が状態を持つ • 親はあるイベントを監視する • 子は、親の状態を変更したい時に「状態変更」イ ベントを発火する • 親はそのイベントを検知する • この関係は兄弟でも、親子が入れ替わっても可能 • 心の安息
• 12. で、Fluxとは
• 13. Flux • View • Action Creators • Store • (+ Dispatcher) • この3つの要素からなる
• 14. Flux 相関図 View Action Creators Store Dispatcher User Input Emit Action
• 15. FluxにおけるView • MVCの「View」と同じ • UIの描画、ユーザー入力がある • 入力があった時、Action Creatorsを叩く • Storeを監視し、変更を検知する • ReactのComponentなど
• 16. FluxにおけるAction Creator • MVCの「Controller」に近い • ViewとStoreの仲介役 • Viewから呼び出され、Storeに通知する
• 17. FluxにおけるStore • ビジネスロジックと「状態」 • シングルトン • つまり、Action Creatorsと同数存在する (はず) • 「Model」とは違う • Schemeは扱わず、状態を持つ
• 18. もう一度、一連の流れ • ViewがStoreを監視する • ViewのonClick() とかでAction Creatorsを叩く • Action CreatorsがStoreを叩く • Storeの状態が変更される、Viewに通知する • Viewの状態が変更され、表示が変わる
• 19. Flux 相関図 View Action Creators Store Dispatcher User Input Emit Action
• 20. わかった？
• 21. デモ
• 22. Fluxのいいところ • 結合度を下げられる (疎結合) • 変更に強い • テスタブル • テストでも監視・発火するだけ • データの流れが追いやすい • Viewから順番に見ていけばわかる
• 23. MVC + Observerとの違い • MVC + Observer自体は従来からあった • Modelに状態を持たせ、Dispatcherと結合 させたものにStoreという名前をつけた • その設計に「Flux」という名前をつけた
• 24. よく言われていること Facebookの功績は、 それをアーキテクチャとして規定し、 共通認識となるよう名前をつけたことである
• 25. FAQ
• 26. 具体的にどう取り入れる？ • MVC捨てろ • ライブラリやその亜種がいくつかある • facebook/flux • BinaryMuse/fluxxor • spoike/refluxjs • シンプルなので、自分で実装してもいい • 個人的にはrefluxjs方式が好き
• 27. 俺が知ってるFluxと違うけど？ • 「おれのかんがえるさいきょお@@のFlux」が 出回りまくっている • refluxとかはまさにそのタイプ • 同じものを別名で呼んでることもある • Action Creators → Dispatcherとか
• 28. Action Creatorsって要るの？ • 基本的には要る • 本質はAction CreatorsこそがDispatcher • DispatcherをStoreに埋めない方が綺麗になる • テストの時とか • 非同期処理とか
• 29. Ajaxはどこでするの？ • Action Creators派とStore派がある • 状態を持つStoreが自身を変更する手段を 内包しているべきかどうかが論点 • ベストプラクティスは勝手に決めろ
• 30. まだわからん • 僕のとこ来い！！！11 • 以上
• 31. ご清聴 ありがとうございました