Inside Bdash

Transcript

1. Inside Bdash

2. @hokaccha

3. None
4. None
5. None
6. None
7. None
8. None
9. None

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?

16. None

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

28. None

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ߋ৽ͷͨΊͷศརϞδϡʔϧ࡞ͬͨ

43. None