フロントエンドMVCとFlux

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

Transcript

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

   View Slide

2. View Slide

3. About Me
   • @sangotaro
   • Frontend Engineer
   • SIROK: 2ϲ݄໨
   

   View Slide

4. Flux΍Γ͍ͨͷͰɺFlux
   ෍ڭ͢Δ!
   

   View Slide

5. ·ͣ͸MVCͷ෮श
   

   View Slide

6. MVC
   

   View Slide

7. MVC
   • GUIΞϓϦΛ࣮૷͢ΔͨΊͷσβΠϯύλʔϯ
   • αʔόʔαΠυMVC͸೿ੜܥ
   • ͍ΖΜͳྲྀ೿͕͋ΔͷͰݴٴ͸͠ͳ͍
   

   View Slide

8. Model
   σʔλͱϏδωεϩδοΫΛ୲౰ɻσʔ
   λͷมߋΛViewʹ௨஌͢Δɻ
   View
   σʔλΛදࣔ͢Δɻ௨ৗ͸֊૚ߏ଄Λʹ
   ͳΔɻ
   Controller
   Ϣʔβ͔ΒͷೖྗΛϞσϧʹ఻͑Δɻ
   Ҿ༻ݩ: https://ja.wikipedia.org/wiki/
   Model_View_Controller
   

   View Slide

9. JSϥΠϒϥϦͷ༗໊Ͳ͜Ζ
   • Backbone.js
   • AngularJS
   • Knockout.js
   • Ember.js
   ͦΕͧΕݫີʹ͸MVCͰ͸ͳ͍ͷͰɺ૯শͱͯ͠MVW or MV*
   ͱݺ͹ΕΔɻ
   

   View Slide

10. Backbone.jsͰ͸
    • Backbone.View: ControllerɺView
    • Backbone.Model: Model
    

    View Slide

11. GUIΞϓϦͷઃܭ
    

    View Slide

12. GUIΞϓϦઃܭͷϙΠϯτ
    ෳࡶͳ"ঢ়ଶ"ʹͲ͏ཱͪ޲͔͏͔
    

    View Slide

13. ঢ়ଶ(State)???
    • ঢ়ଶ = UIͷঢ়ଶ
    • σʔλͦͷ΋ͷͰ͸ͳ͍❌
    • ͲͪΒ΋JSONͷΑ͏ͳσʔλߏ଄ͰදݱͰ͖Δ
    

    View Slide

14. σʔλͱঢ়ଶ
    ex. ࡏݿ਺͕0ͷͱ͖ɺߪೖϘλϯ͕ԡͤͳ͍
    σʔλ => ࡏݿ਺0ɹঢ়ଶ => Ϙλϯ͕ແޮ
    let data = {
    inventory: 0
    }
    let state = {
    buyButton: 'disable'
    }
    

    View Slide

15. ೉͠͞
    • ؅ཧ͢Δঢ়ଶ͕ଟ͗͢Δ!
    • Ͳ͜Ͱঢ়ଶΛ؅ཧ͢Δ͔"
    • ͩΕ͕ঢ়ଶΛมߋ͢Δ͔#
    

    View Slide

16. Backbone.jsͰ΍ͬͯΈΔͱ
    

    View Slide

17. ެࣜͷਤ
    Ҿ༻ݩ: http://backbonejs.org/
    

    View Slide

18. γϯϓϧͰΑͦ͞͏?
    

    View Slide

19. ࣮ࡍ͸ෳࡶͩ͠ɺܾΊΔ͜ͱଟ͍!
    

    View Slide

20. େྔͷViewɺେྔͷModel͕૬ޓʹؔ࿈͢Δ
    • Model-VIewؒͷ૒ํ޲σʔλϑϩʔ
    • ਌ViewɺࢠView
    • ෳࡶ౓͕രൃ
    

    View Slide

21. UIͷঢ়ଶ͸Ͳ͜ʹ͋Δͷ͔
    • Model or View(਌View or ࢠView)
    • ͦ΋ͦ΋ҙࣝͯ͠ঢ়ଶΛ؅ཧ͍ͯ͠Δ͔?
    • Model͕ͨͩͷσʔλModelʹͳͬͯͳ͍͔?
    • ViewͰෳࡶͳσʔλॲཧΛ͍ͯ͠ͳ͍͔ʁ
    

    View Slide

22. ͱ͸ֶ͍͑ͼ͸͋Δ
    

    View Slide

23. Backbone.js͕ڭ͑ͯ͘Εͨ͜ͱ
    

    View Slide

24. Viewͷ෦඼Խ
    • ࠶ར༻ՄೳͳView
    • ࠷ۙྲྀߦΓͷίϯϙʔωϯτࢦ޲΁
    • React
    • Angular
    • Web Components
    

    View Slide

25. Φϒβʔόʔύλʔϯ
    • Model͕มߋ͞ΕͨΒΠϕϯτൃՐ
    • View͸ModelͷΠϕϯτ؂ࢹ
    Ҿ༻ݩ: http://backbonejs.org/
    

    View Slide

26. Flux
    

    View Slide

27. Fluxͱ͸
    • Facebook͕ఏএͨ͠GUIΞϓϦͷΞʔΩςΫνϟ
    • ϥΠϒϥϦͰ͸ͳ͍
    • ࣮૷͕ཚཱ
    • Unidirectional data flow (୯ํ޲σʔλϑϩʔ)
    • ΦϒβʔόʔύλʔϯͰ࣮ݱ
    

    View Slide

28. Fluxͷొ৔ਓ෺
    • Action
    • Dispatcher
    • Store
    • View
    

    View Slide

29. ༗໊ͳਤ
    Ҿ༻ݩ: https://facebook.github.io/flux/docs/overview.html#content
    

    View Slide

30. ༗໊ͳਤ2
    Ҿ༻ݩ: https://github.com/facebook/flux/tree/master/examples/flux-todomvc/
    

    View Slide

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
    

    View Slide

32. Action & Action Creator
    Fluxͷσʔλϑϩʔͷ։࢝఺!
    Action
    λΠϓͱσʔλΛ΋ͭΦϒδΣΫτ(like Πϕϯτ)
    Action Creator
    ActionΛੜ੒͢Δϔϧύʔؔ਺(or ϝιου)
    

    View Slide

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;
    

    View Slide

34. Dispatcher
    • άϩʔόϧͳEventEmitterΈ͍ͨͳ΋ͷ
    • ActionΛStoreʹಧ͚Δ(Φϒβʔόʔύλʔϯ)
    // ActionΛىಈ(Pub) like EventEmitter#emit
    AppDispatcher.dispatch(action);
    // ίʔϧόοΫͷొ࿥(Sub) like EventEmitter#on
    AppDispatcher.registor(callback);
    

    View Slide

35. Store
    • σʔλͱঢ়ଶΛ؅ཧ(ঢ়ଶ؅ཧϩδοΫ΋͋Δ)
    • ActionͰ͔͠มߋͰ͖ͳ͍(No Setters, only gettes)
    • DispatcherʹίʔϧόοΫΛొ࿥͢Δ
    

    View Slide

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;
    

    View Slide

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
    }
    });
    

    View Slide

38. View
    • ex. React componets
    • Storeͷ"ঢ়ଶ"มԽͷΈΛ؂ࢹ
    • Action CreatorΛίʔϧ
    • େ͖͘෼͚ͯ2छ
    • Controller View
    • View
    

    View Slide

39. Controller View & View
    Controller View
    • ϧʔτ(ʹ͍ۙ)View
    • StoreͷมԽΛ؂ࢹ
    • ࣗ਎ͱࢠViewΛϨϯμϦϯά
    View
    • ྲྀΕ͖ͯͨσʔλΛݩʹϨϯμϦϯ
    ά
    

    View Slide

40. ͬ͘͟Γ·ͱΊΔͱ
    

    View Slide

41. ActionΛى఺ʹσʔλ͕Ұप͢Δ
    Ҏ্
    

    View Slide

42. MVCͱͲ͕͜ҧ͏?
    

    View Slide

43. MVCͱͷҧ͍
    • ొ৔ਓ෺ͦΕͧΕͷ໾ׂ͕໌֬
    • Unidirectional data flow
    

    View Slide

44. View಺ͷσʔλϑϩʔ
    • ਌View͔ΒࢠView΁ͷҰํ௨ߦ
    • ٯ͸Ͱ͖Ε͹ආ͚Δ
    • ࢠ͔Β਌΁ͷόέπϦϨʔ͸͠ͳ͍
    • ActionΛੜ੒͢Δ΂͖
    

    View Slide

45. ঢ়ଶ͸Store͕΋ͭ
    • Viewࣗ਎͸ঢ়ଶΛ௚઀มߋ͠ͳ͍
    • Storeʹ͋Δঢ়ଶ͸read-only
    • View͸Actionੜ੒͢Δ͚ͩ
    

    View Slide

46. StoreͱModelͷҧ͍
    • Store͸ModelΑΓ໾ׂ͕໌֬
    • (σʔλ͚ͩͰͳ͘)ঢ়ଶ΋΋ͭ
    • ActionͰ͔͠มߋͰ͖ͳ͍
    

    View Slide

47. ࣮૷͕γϯϓϧ
    • Pub/Sub͕໌֬ʹ෼཭͍ͯ͠Δ
    

    View Slide

48. ͿͬͪΌ͚ΦϨΦϨMVCͰ͸?
    

    View Slide

49. FacebookͷΦϨΦϨMVCઆ
    • ͨͿΜͦ͏
    • ৽͍͠ొ৔ਓ෺Λఆٛͯ͠໌֬ͳ໾ׂΛ༩͑ͨ
    • Fluxͱ͍͏MV*ܥͱࢥΘΕͳ͍ωʔϛϯά
    

    View Slide

50. ࠷ۙͷFlux
    

    View Slide

51. facebook/fluxͷෆຬ
    • ͱ͖ͬͭʹ͍͘
    • Dispacher͸ͨͩͷEventEmitterͰ͸?
    • Action (Creator)͸ͨͩͷؔ਺Ͱ͸?
    • γϯάϧτϯ
    • αʔόʔαΠυͰࠔΔ
    • ςετ͠ʹ͍͘
    

    View Slide

52. ͦΕͰ΋Unidirectional data flow͸
    ͍͍ΑͶ
    

    View Slide

53. Flux࣮૷
    • Flux Comparison
    • URL: https://github.com/voronianski/flux-comparison
    • ελʔ਺্Ґ⭐
    • Redux
    • Reflux
    • Alt
    

    View Slide

54. ·ͱΊ
    

    View Slide

55. Flux࠷ߴ͔ͩΒ΍Ζ͏
    React͡Όͳͯ͘΋Ͱ͖ΔΑ
    

    View Slide

56. ࣍ճ
    

    View Slide

57. View Slide