Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Inside Bdash
Kazuhito Hokamura
March 16, 2017
Technology
0
370
Inside Bdash
Kazuhito Hokamura
March 16, 2017
Tweet
Share
More Decks by Kazuhito Hokamura
See All by Kazuhito Hokamura
hokaccha
3
2.7k
hokaccha
0
480
hokaccha
1
450
hokaccha
1
8.9k
hokaccha
0
8.8k
hokaccha
0
1.1k
hokaccha
2
6.2k
hokaccha
4
4.7k
hokaccha
2
4.2k
Other Decks in Technology
See All in Technology
ganariya
0
150
toshinoritakai
1
210
hsano
0
130
hololab
0
300
y0hgi
1
390
kraj
0
5.2k
hecateball
1
12k
kawaguti
0
120
iqbocchi
0
540
natsusan
0
190
kanaugust
PRO
0
180
opelab
2
290
Featured
See All Featured
chriscoyier
499
130k
cassininazir
347
20k
edds
56
9.3k
jponch
103
5k
afnizarnur
176
14k
frogandcode
127
20k
jmmastey
9
540
addyosmani
310
21k
jnunemaker
PRO
40
4.6k
hursman
106
9.2k
yeseniaperezcruz
302
31k
jacobian
255
20k
Transcript
Inside Bdash
@hokaccha
None
None
None
None
None
None
None
Flux Architecture of Bdash
Flux Frameworks
Topics • Domain Logicͷݺͼग़͠ • Storeͷׂ • ImmutableʹStateΛߋ৽͢Δ࣮
Domain Logicͷݺͼग़͠
Domain Logic • ඳըʹؔ͢Δ͜ͱҎ֎ͷશͯͷॲཧ • DatabaseͱͷΓऔΓͱ͔ • APIݺͼग़͠ͱ͔ • ઃఆͷཧͱ͔
Ͳ͜ʹ͋Δ͖͔ • Store? • Actino Creator? • Middleware?
None
import { dispatch } from './QueryStore'; import Database from '../lib/Database';
const QueryAction = {}; QueryAction.addNewQuery = params => { Database.Query.create(params).then(query => { dispatch('addNewQuery', { query }); }); }; Action Creator 㲗 Domain Logic
• Domain LogicΛFluxͷϑϩʔ͔Β͢Δ • Action Creator͔Βݺͼग़͚ͩ͢ • StoreStateͷߋ৽͚ͩʹྗ͢Δ
• StoreͱDomain Logicςετ͘͢͠ͳΔ • Action Creator͕ςετͮ͠Β͍ • શ͕ͯPure functionͱ͍͏ͷݬͳͷͰఘΊΔ
Storeͷׂ
ͭ·ΓStateΛͲ͏ׂ͢Δ͔
facebook/flux • Ϧιʔεʁ͝ͱʹStoreΛׂ͢Δ • DispatcherʹΑΔަ௨ཧɺwaitForΛͬͨ ґଘͷղܾ͕ඞཁ
Redux • StoreΛׂ͠ͳ͍ʢSingle Stateʣ • StateΛߋ৽͢ΔॲཧʢreducerʣΛׂ͢Δ • waitForDispatcher͕ෆཁ • State͕ڊେʹͳΔ
Bdash • Page୯ҐͰ͚ͯΈͨ • Page͝ͱʹಠཱͨ͠StoreΛ࣋ͭ • Page == Container Component
Query Page
DataSource Page
Setting Page
None
• Storeಉ࢜ͷґଘ͕ͳ͍ • waitForDispatcherෆཁ • StateΛΘ͔Γཻ͍͢ͰׂͰ͖Δ • શͯPage୯ҐͳͷͰΘ͔Γ͍͢ Good
• PageΛ·͍ͨͩσʔλͷڞ༗͕໘ • ෳͷPageͰಉ͡σʔλΛ࣋ͭ͜ͱ͋Δͷ Ͱແବ͕͋Δ Bad
PageؒͰͷσʔλڞ༗ • PageؒͰڞ༗͢ΔσʔλDomain LogicʹετΞ͢Δ • PageΓସ͑࣌ʹຖճDomain Logic͔ΒऔΓ͢
// Pageͷସ࣌ʹຖճݺΕΔAction Creator QueryAction.initialize = () => { Promise.all([ Database.fetchQueries(),
Database.fetchDataSources() ]).then(([queries, dataSources]) => { dispatch('initialize', { queries, dataSources }); }); }; // Store class QueryStore { reduce(type, { queries, dataSources }) { switch (type) { case 'initialize': { // ߋ৽͚ͩϚʔδ͢ΔͷͰସલͷঢ়ଶอ࣋Ͱ͖Δ return merge(this.state, { queries, dataSources }); } } } }
αʔόʔαΠυͷߟ͑ํ ͱಉͩ͡ɾɾʂ
൚༻తͳઃܭͰͳ͍ ⚠
ΞϓϦέʔγϣϯʹ దͨ͠ઃܭΛɻ
ImmutableͳStateͷߋ৽
let state = { todos: [ { id: 1, text:
'foo' }, { id: 2, text: 'foo' }, ], //... } function updateTodo(state, { id, text }) { return Object.assign({}, state, { todos: state.todos.map(todo => { if (todo.id === id) { return Object.assign({}, todo, { text }); } else { return todo; } }), }); }
• Immutable.jsΈ͍ͨͳ๛ͳػೳ͍Βͳ͍ • ωετͨ͠Stateͷߋ৽Λ؆୯ʹ͍͚ͨͩ͠ • ͍͔ͭ͘ϥΠϒϥϦ͋Δ͚ͲΈʹ߹Θͳ͍
࡞ͬͨ
import immup from 'immup'; let state = { todos: [
{ id: 1, text: 'foo' }, { id: 2, text: 'foo' }, ], //... } function updateTodo(state, { id, text }) { let index = state.todos.findIndex(todo => todo.id === id ); return immup.set(`todos.${index}.text`, text); }
StoreʹΈࠐΉ reduce(action, payload) { switch (action) { case 'addNewQuery': {
return this .set('selectedQueryId', payload.query.id) .set('editor.line', null) .prepend('queries', payload.query); } //... } }
·ͱΊ • Domain LogicAction Creator͔ΒݺͿΑ͏ ʹͯ͠Έͨ • StoreΛPage୯ҐͰׂͯ͠Έͨ • Stateߋ৽ͷͨΊͷศརϞδϡʔϧ࡞ͬͨ
None