Flux アーキテクチャの話

W8LT #4の資料

Transcript

1. Flux ΞʔΩςΫνϟͷ࿩ W8LT#04 @popkirby
2. ࣗݾ঺հ @popkirby
 ౦޻େB4ɾJK → ͔͚ͣ͢ͷຽ TwitterͰ͸ήʔϜͱΞΠυϧϚελʔ γϯσϨ ϥΨʔϧζͷ࿩͔ͯ͠͠·ͤΜ
3. Flux ͬͯԿʁ
4. Flux • Application Architecture for Building User Interfaces • https://github.com/facebook/flux • MV* ͱ͔Έ͍ͨͳGUI ϓϩάϥϛϯάͷ
 ύλʔϯ • Web ΞϓϦέʔγϣϯ ޲͚
5. MVC • Model: σʔλ/ϏδωεϩδοΫ • View: UI • Controller: ೖྗ͔ΒؤுΔϚϯ
6. ……M, V, C ؒ͸
 Ͳ͏ͳͬͯΔͷʁ
7. MVC ͷҋ • M, V, Cͷఆ͚͕ٛͩҰਓา͖ͯͦ͠ΕͧΕͷؒ ͷ௨৴ํ๏͕޿·͍ͬͯͳ͍ • View ͸ Model ΛݟΔ͜ͱ͕Ͱ͖Δͷ͔ʁ • View ͸ Model Λߋ৽Ͱ͖Δͷ͔ʁ • → ܾ·ͬͨఆ͕ٛཉ͍͠
8. MVC ͷҋ • MVC ͷ೿ੜܥ͕ଟ͗ͯࠞ͢ཚ͢Δ(Ҽԑ) • MVP: Presenterͱ͍͏ϒϥοΫࣾһΛಋೖ • MVVM: ViewModel(MVͷؒΛ͍͍ײ͡ʹͱΓ΋ͬ ͨΓɺViewͷঢ়ଶΛ΋ͬͨΓ)Λ௥Ճ • MVW: WhateverͰ͍͍͡ΌΜɺMVCʹ͍ͭͯߟ͑ ΔͷΛ΍ΊΖɺͦΜͳՋ͕͋Ε͹ίʔυΛॻ͚
9. FluxΛ͔ͭ͏
10. Flux ͱ͸ • Action -> Dispatcher -> Store -> View -> Action -> … ͷྲྀΕΛఆٛ
11. Action • Ϣʔβͷೖྗ΍ ֎෦ͱ ͷ௨৴͔Β࡞ΒΕΔ • ʮͲͷΑ͏ͳछྨͷૢ ࡞/௨৴͕ߦΘΕ͔ͨʯ ͱ͍͏৘ใͱσʔλΛ ࣋ͭΦϒδΣΫτ • Dispatcherʹ౉͞ΕΔ // ActionCreator function increment(count) { AppDispatcher.dispatch({ type: INCREMENT_COUNTER, count }); }
12. Dispatcher • ड͚औͬͨ Action ͷछྨʹରԠ͢Δ Store ͷίʔϧόο ΫΛݺͼग़͢ // Πϝʔδ class Dispatch { register(cb) { this.callbacks.push(cb); } dispatch(action) { for (let cb in this.callbacks) { cb(action); } } }
13. Store • σʔλɾϏδωεϩδοΫΛ ࣋ͭ • Dispatcher ͔Βड͚औͬͨ௨ ஌Λར༻ͯ͠σʔλΛߋ৽ • ͜ΕҎ֎ʹσʔλΛߋ৽͢ Δํ๏͸ͳ͍ • σʔλ͕ߋ৽͞ΕͨΒ View ʹ௨஌ // Πϝʔδ let counter = 0; const CounterStore = { getCounter() { return counter; } emitChange() { … } addChangeListener(cb) { … } }; AppDispatcher.register((action) => { switch(action.type) { case INCREMENT_COUNTER: counter += action.count; CounterStore.emitChange(); break; } });
14. View • Store Λݟͯ UI Λͭ͘ Δ • Ϣʔβ͔ΒͷೖྗΛड ͚औͬͨΒ Action Λ ࡞ͬͯ Dispatcher ʹ ౤͛Δ class CounterApp extends Component { constructor() { CounterStore.addChangeListener(this.onChange); } onChange = () => { this.setState({ counter: CounterStore.getCounter() }); } handleIncrement(counter) { CounterActions.increment(counter); } render() { return ( <Counter counter={counter} increment={::this.handleIncrement} /> } }
15. Flux ͷ͏Ε͍͠ͱ͜Ζ • ྲྀΕ͕Ұํ޲ • ૒ํ޲σʔλόΠϯσΟϯά͸ਓྨʹ͸ૣ͔ͬ ͨ(anguͳΜͱ͔lar) • ୯७ • ڈ೥7݄ʹൃද͞Ε͔ͯΒ݄20ݸϖʔεͰΦϨΦ Ϩ࣮૷͕༙͍͖͍ͯͯΔ
16. demo https://github.com/popkirby/flux-sushi-counter/
17. ͍ͭͰʹ • ࣮͸ Flux ͸࣮࣭తʹ͸ MVC ͱ·ͬͨ͘ಉ͡ • ͍ΘΏΔSmallTalk MVC • JavaScript ͕ Web ΞϓϦͷϩδοΫΛ୲౰Ͱ͖ΔΑ͏ʹ ͳͬͯ෮׆ • ͦΕͧΕͷཁૉؒͷؔ܎Λڧௐ͍ͯ͠Δ • ΦϒδΣΫτࢦ޲͸ΦϒδΣΫτ͚ͩ͡Όͳ͍࿦ͱࣅ͍ͯΔ
18. ͍ͭͰʹ • ࠷ۙ͸Reduxͱ͍͏࣮૷͕ؾʹͳͬͯ·͢ • ؔ਺ܕͷߟ͑ΛऔΓೖΕͯΔΒ͍͠ • Store: (beforeState, action) -> afterState • View ͸ Store ͷࣸ૾