フロントエンドMVCとFlux

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

·ͣ͸MVCͷ෮श

Slide 6

Slide 6 text

MVC

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

GUIΞϓϦͷઃܭ

Slide 12

Slide 12 text

GUIΞϓϦઃܭͷϙΠϯτ ෳࡶͳ"ঢ়ଶ"ʹͲ͏ཱͪ޲͔͏͔

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Backbone.jsͰ΍ͬͯΈΔͱ

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

γϯϓϧͰΑͦ͞͏?

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

ͱ͸ֶ͍͑ͼ͸͋Δ

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Flux

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

ߏ੒ྫ(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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

// 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;

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

// 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;

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

ͬ͘͟Γ·ͱΊΔͱ

Slide 41

Slide 41 text

ActionΛى఺ʹσʔλ͕Ұप͢Δ Ҏ্

Slide 42

Slide 42 text

MVCͱͲ͕͜ҧ͏?

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

࠷ۙͷFlux

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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