$30 off During Our Annual Pro Sale. View Details »

フロントエンドMVCとFlux

 フロントエンドMVCとFlux

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

Shotaro Watanabe

August 14, 2015
Tweet

Other Decks in Programming

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