フロントエンドMVCとFlux

Transcript

1. ϑϩϯτΤϯυMVCͱFlux SED | SIROKٕज़ษڧձ 2015/08/13

2. None

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. ࣍ճ

57. None