Inside Bdash

Transcript

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