Pro Yearly is on sale from $80 to $50! »

フロントエンドMVCとFlux

 フロントエンドMVCとFlux

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

50568ede171f336129308612b5ad1105?s=128

Shotaro Watanabe

August 14, 2015
Tweet

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