Inside Bdash

Inside Bdash

18b12f8f7910445b2637f0f21f59d467?s=128

Kazuhito Hokamura

March 16, 2017
Tweet

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