Slide 1
Slide 1 text
Inside Bdash
Slide 2
Slide 2 text
@hokaccha
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
Flux Architecture
of Bdash
Slide 11
Slide 11 text
Flux Frameworks
Slide 12
Slide 12 text
Topics
• Domain Logicͷݺͼग़͠
• Storeͷׂ
• ImmutableʹStateΛߋ৽͢Δ࣮
Slide 13
Slide 13 text
Domain Logicͷݺͼग़͠
Slide 14
Slide 14 text
Domain Logic
• ඳըʹؔ͢Δ͜ͱҎ֎ͷશͯͷॲཧ
• DatabaseͱͷΓऔΓͱ͔
• APIݺͼग़͠ͱ͔
• ઃఆͷཧͱ͔
Slide 15
Slide 15 text
Ͳ͜ʹ͋Δ͖͔
• Store?
• Actino Creator?
• Middleware?
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
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
Slide 18
Slide 18 text
• Domain LogicΛFluxͷϑϩʔ͔Β͢Δ
• Action Creator͔Βݺͼग़͚ͩ͢
• StoreStateͷߋ৽͚ͩʹྗ͢Δ
Slide 19
Slide 19 text
• StoreͱDomain Logicςετ͘͢͠ͳΔ
• Action Creator͕ςετͮ͠Β͍
• શ͕ͯPure functionͱ͍͏ͷݬͳͷͰఘΊΔ
Slide 20
Slide 20 text
Storeͷׂ
Slide 21
Slide 21 text
ͭ·ΓStateΛͲ͏ׂ͢Δ͔
Slide 22
Slide 22 text
facebook/flux
• Ϧιʔεʁ͝ͱʹStoreΛׂ͢Δ
• DispatcherʹΑΔަ௨ཧɺwaitForΛͬͨ
ґଘͷղܾ͕ඞཁ
Slide 23
Slide 23 text
Redux
• StoreΛׂ͠ͳ͍ʢSingle Stateʣ
• StateΛߋ৽͢ΔॲཧʢreducerʣΛׂ͢Δ
• waitForDispatcher͕ෆཁ
• State͕ڊେʹͳΔ
Slide 24
Slide 24 text
Bdash
• Page୯ҐͰ͚ͯΈͨ
• Page͝ͱʹಠཱͨ͠StoreΛ࣋ͭ
• Page == Container Component
Slide 25
Slide 25 text
Query Page
Slide 26
Slide 26 text
DataSource Page
Slide 27
Slide 27 text
Setting Page
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
• Storeಉ࢜ͷґଘ͕ͳ͍
• waitForDispatcherෆཁ
• StateΛΘ͔Γཻ͍͢ͰׂͰ͖Δ
• શͯPage୯ҐͳͷͰΘ͔Γ͍͢
Good
Slide 30
Slide 30 text
• PageΛ·͍ͨͩσʔλͷڞ༗͕໘
• ෳͷPageͰಉ͡σʔλΛ࣋ͭ͜ͱ͋Δͷ
Ͱແବ͕͋Δ
Bad
Slide 31
Slide 31 text
PageؒͰͷσʔλڞ༗
• PageؒͰڞ༗͢ΔσʔλDomain LogicʹετΞ͢Δ
• PageΓସ͑࣌ʹຖճDomain Logic͔ΒऔΓ͢
Slide 32
Slide 32 text
// 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 });
}
}
}
}
Slide 33
Slide 33 text
αʔόʔαΠυͷߟ͑ํ
ͱಉͩ͡ɾɾʂ
Slide 34
Slide 34 text
൚༻తͳઃܭͰͳ͍
⚠
Slide 35
Slide 35 text
ΞϓϦέʔγϣϯʹ
దͨ͠ઃܭΛɻ
Slide 36
Slide 36 text
ImmutableͳStateͷߋ৽
Slide 37
Slide 37 text
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;
}
}),
});
}
Slide 38
Slide 38 text
• Immutable.jsΈ͍ͨͳ๛ͳػೳ͍Βͳ͍
• ωετͨ͠Stateͷߋ৽Λ؆୯ʹ͍͚ͨͩ͠
• ͍͔ͭ͘ϥΠϒϥϦ͋Δ͚ͲΈʹ߹Θͳ͍
Slide 39
Slide 39 text
࡞ͬͨ
Slide 40
Slide 40 text
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);
}
Slide 41
Slide 41 text
StoreʹΈࠐΉ
reduce(action, payload) {
switch (action) {
case 'addNewQuery': {
return this
.set('selectedQueryId', payload.query.id)
.set('editor.line', null)
.prepend('queries', payload.query);
}
//...
}
}
Slide 42
Slide 42 text
·ͱΊ
• Domain LogicAction Creator͔ΒݺͿΑ͏
ʹͯ͠Έͨ
• StoreΛPage୯ҐͰׂͯ͠Έͨ
• Stateߋ৽ͷͨΊͷศརϞδϡʔϧ࡞ͬͨ
Slide 43
Slide 43 text
No content