フロントエンドMVCとFlux

SED 〜SIROK技術勉強会 #3「フロントエンドMVCとFlux（仮）」〜
https://atnd.org/events/68943

Transcript

1. ϑϩϯτΤϯυMVCͱFlux SED | SIROKٕज़ษڧձ 2015/08/13
3. About Me • @sangotaro • Frontend Engineer • SIROK: 2ϲ݄໨
4. Flux΍Γ͍ͨͷͰɺFlux ෍ڭ͢Δ!
5. ·ͣ͸MVCͷ෮श
6. MVC
7. MVC • GUIΞϓϦΛ࣮૷͢ΔͨΊͷσβΠϯύλʔϯ • αʔόʔαΠυMVC͸೿ੜܥ • ͍ΖΜͳྲྀ೿͕͋ΔͷͰݴٴ͸͠ͳ͍
8. Model σʔλͱϏδωεϩδοΫΛ୲౰ɻσʔ λͷมߋΛViewʹ௨஌͢Δɻ View σʔλΛදࣔ͢Δɻ௨ৗ͸֊૚ߏ଄Λʹ ͳΔɻ Controller Ϣʔβ͔ΒͷೖྗΛϞσϧʹ఻͑Δɻ Ҿ༻ݩ: https://ja.wikipedia.org/wiki/ Model_View_Controller
9. JSϥΠϒϥϦͷ༗໊Ͳ͜Ζ • Backbone.js • AngularJS • Knockout.js • Ember.js ͦΕͧΕݫີʹ͸MVCͰ͸ͳ͍ͷͰɺ૯শͱͯ͠MVW or MV* ͱݺ͹ΕΔɻ
10. Backbone.jsͰ͸ • Backbone.View: ControllerɺView • Backbone.Model: Model
11. GUIΞϓϦͷઃܭ
12. GUIΞϓϦઃܭͷϙΠϯτ ෳࡶͳ"ঢ়ଶ"ʹͲ͏ཱͪ޲͔͏͔
13. ঢ়ଶ(State)??? • ঢ়ଶ = UIͷঢ়ଶ • σʔλͦͷ΋ͷͰ͸ͳ͍❌ • ͲͪΒ΋JSONͷΑ͏ͳσʔλߏ଄ͰදݱͰ͖Δ
14. σʔλͱঢ়ଶ ex. ࡏݿ਺͕0ͷͱ͖ɺߪೖϘλϯ͕ԡͤͳ͍ σʔλ => ࡏݿ਺0ɹঢ়ଶ => Ϙλϯ͕ແޮ let data = { inventory: 0 } let state = { buyButton: 'disable' }
15. ೉͠͞ • ؅ཧ͢Δঢ়ଶ͕ଟ͗͢Δ! • Ͳ͜Ͱঢ়ଶΛ؅ཧ͢Δ͔" • ͩΕ͕ঢ়ଶΛมߋ͢Δ͔#
16. Backbone.jsͰ΍ͬͯΈΔͱ
17. ެࣜͷਤ Ҿ༻ݩ: http://backbonejs.org/
18. γϯϓϧͰΑͦ͞͏?
19. ࣮ࡍ͸ෳࡶͩ͠ɺܾΊΔ͜ͱଟ͍!
20. େྔͷViewɺେྔͷModel͕૬ޓʹؔ࿈͢Δ • Model-VIewؒͷ૒ํ޲σʔλϑϩʔ • ਌ViewɺࢠView • ෳࡶ౓͕രൃ
21. UIͷঢ়ଶ͸Ͳ͜ʹ͋Δͷ͔ • Model or View(਌View or ࢠView) • ͦ΋ͦ΋ҙࣝͯ͠ঢ়ଶΛ؅ཧ͍ͯ͠Δ͔? • Model͕ͨͩͷσʔλModelʹͳͬͯͳ͍͔? • ViewͰෳࡶͳσʔλॲཧΛ͍ͯ͠ͳ͍͔ʁ
22. ͱ͸ֶ͍͑ͼ͸͋Δ
23. Backbone.js͕ڭ͑ͯ͘Εͨ͜ͱ
24. Viewͷ෦඼Խ • ࠶ར༻ՄೳͳView • ࠷ۙྲྀߦΓͷίϯϙʔωϯτࢦ޲΁ • React • Angular • Web Components
25. Φϒβʔόʔύλʔϯ • Model͕มߋ͞ΕͨΒΠϕϯτൃՐ • View͸ModelͷΠϕϯτ؂ࢹ Ҿ༻ݩ: http://backbonejs.org/
26. Flux
27. Fluxͱ͸ • Facebook͕ఏএͨ͠GUIΞϓϦͷΞʔΩςΫνϟ • ϥΠϒϥϦͰ͸ͳ͍ • ࣮૷͕ཚཱ • Unidirectional data flow (୯ํ޲σʔλϑϩʔ) • ΦϒβʔόʔύλʔϯͰ࣮ݱ
28. Fluxͷొ৔ਓ෺ • Action • Dispatcher • Store • View
29. ༗໊ͳਤ Ҿ༻ݩ: https://facebook.github.io/flux/docs/overview.html#content
30. ༗໊ͳਤ2 Ҿ༻ݩ: https://github.com/facebook/flux/tree/master/examples/flux-todomvc/
31. ߏ੒ྫ(TODOΛ࡞Δ͚ͩͷΞϓϦ) src ├── actions │ └── todo-action-creators.js ├── app-constants.js ├── app-dispatcher.js ├── app.js ├── stores | └── todo-store.js └── views ├── todo-controller-view.react.js └── todo-item.react.js
32. Action & Action Creator Fluxͷσʔλϑϩʔͷ։࢝఺! Action λΠϓͱσʔλΛ΋ͭΦϒδΣΫτ(like Πϕϯτ) Action Creator ActionΛੜ੒͢Δϔϧύʔؔ਺(or ϝιου)
33. // todo-action-creators.js import AppDispatcher from '../app-dispatcher'; import AppConstants = from '../app-constants'; var TodoActionCreators = { create: function(text) { AppDispatcher.dispatch({ actionType: AppConstants.TODO_CREATE, // type text: text // data }); } } export default TodoActionCreators;
34. Dispatcher • άϩʔόϧͳEventEmitterΈ͍ͨͳ΋ͷ • ActionΛStoreʹಧ͚Δ(Φϒβʔόʔύλʔϯ) // ActionΛىಈ(Pub) like EventEmitter#emit AppDispatcher.dispatch(action); // ίʔϧόοΫͷొ࿥(Sub) like EventEmitter#on AppDispatcher.registor(callback);
35. Store • σʔλͱঢ়ଶΛ؅ཧ(ঢ়ଶ؅ཧϩδοΫ΋͋Δ) • ActionͰ͔͠มߋͰ͖ͳ͍(No Setters, only gettes) • DispatcherʹίʔϧόοΫΛొ࿥͢Δ
36. // todo-store.js let _todos = {}; // private data // setter function create(text) { let id = (+new Date()).toString(); _todos[id] = { id: id, text: text }; } class TodoStore extend EventEmitter { constructor() { // TODO: Register dispatcher callback } // getter getAll() { return _todos; } emitChange() { this.emit('change'); } } export default new TodoStore;
37. // Register dispatcher callback AppDispatcher.register(action => { switch(action.actionType) { case AppConstants.TODO_CREATE: let text = action.text.trim(); if (text !== '') { create(text); this.emitChange(); // Emit change event } break; default: // no op } });
38. View • ex. React componets • Storeͷ"ঢ়ଶ"มԽͷΈΛ؂ࢹ • Action CreatorΛίʔϧ • େ͖͘෼͚ͯ2छ • Controller View • View
39. Controller View & View Controller View • ϧʔτ(ʹ͍ۙ)View • StoreͷมԽΛ؂ࢹ • ࣗ਎ͱࢠViewΛϨϯμϦϯά View • ྲྀΕ͖ͯͨσʔλΛݩʹϨϯμϦϯ ά
40. ͬ͘͟Γ·ͱΊΔͱ
41. ActionΛى఺ʹσʔλ͕Ұप͢Δ Ҏ্
42. MVCͱͲ͕͜ҧ͏?
43. MVCͱͷҧ͍ • ొ৔ਓ෺ͦΕͧΕͷ໾ׂ͕໌֬ • Unidirectional data flow
44. View಺ͷσʔλϑϩʔ • ਌View͔ΒࢠView΁ͷҰํ௨ߦ • ٯ͸Ͱ͖Ε͹ආ͚Δ • ࢠ͔Β਌΁ͷόέπϦϨʔ͸͠ͳ͍ • ActionΛੜ੒͢Δ΂͖
45. ঢ়ଶ͸Store͕΋ͭ • Viewࣗ਎͸ঢ়ଶΛ௚઀มߋ͠ͳ͍ • Storeʹ͋Δঢ়ଶ͸read-only • View͸Actionੜ੒͢Δ͚ͩ
46. StoreͱModelͷҧ͍ • Store͸ModelΑΓ໾ׂ͕໌֬ • (σʔλ͚ͩͰͳ͘)ঢ়ଶ΋΋ͭ • ActionͰ͔͠มߋͰ͖ͳ͍
47. ࣮૷͕γϯϓϧ • Pub/Sub͕໌֬ʹ෼཭͍ͯ͠Δ
48. ͿͬͪΌ͚ΦϨΦϨMVCͰ͸?
49. FacebookͷΦϨΦϨMVCઆ • ͨͿΜͦ͏ • ৽͍͠ొ৔ਓ෺Λఆٛͯ͠໌֬ͳ໾ׂΛ༩͑ͨ • Fluxͱ͍͏MV*ܥͱࢥΘΕͳ͍ωʔϛϯά
50. ࠷ۙͷFlux
51. facebook/fluxͷෆຬ • ͱ͖ͬͭʹ͍͘ • Dispacher͸ͨͩͷEventEmitterͰ͸? • Action (Creator)͸ͨͩͷؔ਺Ͱ͸? • γϯάϧτϯ • αʔόʔαΠυͰࠔΔ • ςετ͠ʹ͍͘
52. ͦΕͰ΋Unidirectional data flow͸ ͍͍ΑͶ
53. Flux࣮૷ • Flux Comparison • URL: https://github.com/voronianski/flux-comparison • ελʔ਺্Ґ⭐ • Redux • Reflux • Alt
54. ·ͱΊ
55. Flux࠷ߴ͔ͩΒ΍Ζ͏ React͡Όͳͯ͘΋Ͱ͖ΔΑ
56. ࣍ճ