Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
フロントエンドMVCとFlux
Search
Shotaro Watanabe
August 14, 2015
Programming
8
2.1k
フロントエンドMVCとFlux
SED 〜SIROK技術勉強会 #3「フロントエンドMVCとFlux(仮)」〜
https://atnd.org/events/68943
Shotaro Watanabe
August 14, 2015
Tweet
Share
Other Decks in Programming
See All in Programming
Datadog DBMでなにができる? JDDUG Meetup#7
nealle
0
140
Domain-Driven Transformation
hschwentner
2
1.9k
PHPのバージョンアップ時にも役立ったAST
matsuo_atsushi
0
230
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
14
4.6k
Datadog Workflow Automation で圧倒的価値提供
showwin
1
160
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
890
kintone開発を効率化するためにチームで試した施策とその結果を大放出!
oguemon
0
150
もう僕は OpenAPI を書きたくない
sgash708
5
1.9k
From the Wild into the Clouds - Laravel Meetup Talk
neverything
0
140
生成AIで加速するテスト実装 - ロリポップ for Gamersの事例と 生成AIエディタの活用
kinosuke01
0
120
未経験でSRE、はじめました! 組織を支える役割と軌跡
curekoshimizu
1
150
Rails 1.0 のコードで学ぶ find_by* と method_missing の仕組み / Learn how find_by_* and method_missing work in Rails 1.0 code
maimux2x
1
200
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
640
Bash Introduction
62gerente
611
210k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Typedesign – Prime Four
hannesfritz
40
2.5k
Practical Orchestrator
shlominoach
186
10k
Designing for humans not robots
tammielis
250
25k
Building Your Own Lightsaber
phodgson
104
6.2k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Transcript
ϑϩϯτΤϯυMVCͱFlux SED | SIROKٕज़ษڧձ 2015/08/13
None
About Me • @sangotaro • Frontend Engineer • SIROK: 2ϲ݄
FluxΓ͍ͨͷͰɺFlux ڭ͢Δ!
·ͣMVCͷ෮श
MVC
MVC • GUIΞϓϦΛ࣮͢ΔͨΊͷσβΠϯύλʔϯ • αʔόʔαΠυMVCੜܥ • ͍ΖΜͳྲྀ͕͋ΔͷͰݴٴ͠ͳ͍
Model σʔλͱϏδωεϩδοΫΛ୲ɻσʔ λͷมߋΛViewʹ௨͢Δɻ View σʔλΛදࣔ͢Δɻ௨ৗ֊ߏΛʹ ͳΔɻ Controller Ϣʔβ͔ΒͷೖྗΛϞσϧʹ͑Δɻ Ҿ༻ݩ: https://ja.wikipedia.org/wiki/
Model_View_Controller
JSϥΠϒϥϦͷ༗໊Ͳ͜Ζ • Backbone.js • AngularJS • Knockout.js • Ember.js ͦΕͧΕݫີʹMVCͰͳ͍ͷͰɺ૯শͱͯ͠MVW
or MV* ͱݺΕΔɻ
Backbone.jsͰ • Backbone.View: ControllerɺView • Backbone.Model: Model
GUIΞϓϦͷઃܭ
GUIΞϓϦઃܭͷϙΠϯτ ෳࡶͳ"ঢ়ଶ"ʹͲ͏ཱ͔ͪ͏͔
ঢ়ଶ(State)??? • ঢ়ଶ = UIͷঢ়ଶ • σʔλͦͷͷͰͳ͍❌ • ͲͪΒJSONͷΑ͏ͳσʔλߏͰදݱͰ͖Δ
σʔλͱঢ়ଶ ex. ࡏݿ͕0ͷͱ͖ɺߪೖϘλϯ͕ԡͤͳ͍ σʔλ => ࡏݿ0ɹঢ়ଶ => Ϙλϯ͕ແޮ let data
= { inventory: 0 } let state = { buyButton: 'disable' }
͠͞ • ཧ͢Δঢ়ଶ͕ଟ͗͢Δ! • Ͳ͜Ͱঢ়ଶΛཧ͢Δ͔" • ͩΕ͕ঢ়ଶΛมߋ͢Δ͔#
Backbone.jsͰͬͯΈΔͱ
ެࣜͷਤ Ҿ༻ݩ: http://backbonejs.org/
γϯϓϧͰΑͦ͞͏?
࣮ࡍෳࡶͩ͠ɺܾΊΔ͜ͱଟ͍!
େྔͷViewɺେྔͷModel͕૬ޓʹؔ࿈͢Δ • Model-VIewؒͷํσʔλϑϩʔ • ViewɺࢠView • ෳࡶ͕രൃ
UIͷঢ়ଶͲ͜ʹ͋Δͷ͔ • Model or View(View or ࢠView) • ͦͦҙࣝͯ͠ঢ়ଶΛཧ͍ͯ͠Δ͔? •
Model͕ͨͩͷσʔλModelʹͳͬͯͳ͍͔? • ViewͰෳࡶͳσʔλॲཧΛ͍ͯ͠ͳ͍͔ʁ
ͱֶ͍͑ͼ͋Δ
Backbone.js͕ڭ͑ͯ͘Εͨ͜ͱ
Viewͷ෦Խ • ࠶ར༻ՄೳͳView • ࠷ۙྲྀߦΓͷίϯϙʔωϯτࢦ • React • Angular •
Web Components
Φϒβʔόʔύλʔϯ • Model͕มߋ͞ΕͨΒΠϕϯτൃՐ • ViewModelͷΠϕϯτࢹ Ҿ༻ݩ: http://backbonejs.org/
Flux
Fluxͱ • Facebook͕ఏএͨ͠GUIΞϓϦͷΞʔΩςΫνϟ • ϥΠϒϥϦͰͳ͍ • ࣮͕ཚཱ • Unidirectional data
flow (୯ํσʔλϑϩʔ) • ΦϒβʔόʔύλʔϯͰ࣮ݱ
Fluxͷొਓ • Action • Dispatcher • Store • View
༗໊ͳਤ Ҿ༻ݩ: https://facebook.github.io/flux/docs/overview.html#content
༗໊ͳਤ2 Ҿ༻ݩ: https://github.com/facebook/flux/tree/master/examples/flux-todomvc/
ߏྫ(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
Action & Action Creator Fluxͷσʔλϑϩʔͷ։࢝! Action λΠϓͱσʔλΛͭΦϒδΣΫτ(like Πϕϯτ) Action Creator
ActionΛੜ͢Δϔϧύʔؔ(or ϝιου)
// 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;
Dispatcher • άϩʔόϧͳEventEmitterΈ͍ͨͳͷ • ActionΛStoreʹಧ͚Δ(Φϒβʔόʔύλʔϯ) // ActionΛىಈ(Pub) like EventEmitter#emit AppDispatcher.dispatch(action);
// ίʔϧόοΫͷొ(Sub) like EventEmitter#on AppDispatcher.registor(callback);
Store • σʔλͱঢ়ଶΛཧ(ঢ়ଶཧϩδοΫ͋Δ) • ActionͰ͔͠มߋͰ͖ͳ͍(No Setters, only gettes) • DispatcherʹίʔϧόοΫΛొ͢Δ
// 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;
// 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 • ex. React componets • Storeͷ"ঢ়ଶ"มԽͷΈΛࢹ • Action CreatorΛίʔϧ
• େ͖͚ͯ͘2छ • Controller View • View
Controller View & View Controller View • ϧʔτ(ʹ͍ۙ)View • StoreͷมԽΛࢹ
• ࣗͱࢠViewΛϨϯμϦϯά View • ྲྀΕ͖ͯͨσʔλΛݩʹϨϯμϦϯ ά
ͬ͘͟Γ·ͱΊΔͱ
ActionΛىʹσʔλ͕Ұप͢Δ Ҏ্
MVCͱͲ͕͜ҧ͏?
MVCͱͷҧ͍ • ొਓͦΕͧΕͷׂ͕໌֬ • Unidirectional data flow
Viewͷσʔλϑϩʔ • View͔ΒࢠViewͷҰํ௨ߦ • ٯͰ͖Εආ͚Δ • ࢠ͔ΒͷόέπϦϨʔ͠ͳ͍ • ActionΛੜ͢Δ͖
ঢ়ଶStore͕ͭ • Viewࣗঢ়ଶΛมߋ͠ͳ͍ • Storeʹ͋Δঢ়ଶread-only • ViewActionੜ͢Δ͚ͩ
StoreͱModelͷҧ͍ • StoreModelΑΓׂ͕໌֬ • (σʔλ͚ͩͰͳ͘)ঢ়ଶͭ • ActionͰ͔͠มߋͰ͖ͳ͍
࣮͕γϯϓϧ • Pub/Sub͕໌֬ʹ͍ͯ͠Δ
ͿͬͪΌ͚ΦϨΦϨMVCͰ?
FacebookͷΦϨΦϨMVCઆ • ͨͿΜͦ͏ • ৽͍͠ొਓΛఆٛͯ͠໌֬ͳׂΛ༩͑ͨ • Fluxͱ͍͏MV*ܥͱࢥΘΕͳ͍ωʔϛϯά
࠷ۙͷFlux
facebook/fluxͷෆຬ • ͱ͖ͬͭʹ͍͘ • DispacherͨͩͷEventEmitterͰ? • Action (Creator)ͨͩͷؔͰ? • γϯάϧτϯ
• αʔόʔαΠυͰࠔΔ • ςετ͠ʹ͍͘
ͦΕͰUnidirectional data flow ͍͍ΑͶ
Flux࣮ • Flux Comparison • URL: https://github.com/voronianski/flux-comparison • ελʔ্Ґ⭐ •
Redux • Reflux • Alt
·ͱΊ
Flux࠷ߴ͔ͩΒΖ͏ React͡Όͳͯ͘Ͱ͖ΔΑ
࣍ճ
None