BdashにおけるFlux設計

Transcript

1. Bdashʹ͓͚ΔFluxઃܭ
2. @hokaccha
5. Bdash • Electron੡ͷσεΫτοϓΞϓϦέʔγϣϯ • BIπʔϧͬΆ͍΋ͷ • View͸શͯReact
6. BdashͷFluxઃܭʹ͍ͭͯ
7. • FluxϑϨʔϜϫʔΫະ࢖༻ • ࠷దͳઃܭΛࣗ෼Ͱߟ͑ͳ͕Β࣮૷͍ͯͬͨ͠
8. Domain Logicͷݺͼग़͠
9. Domain Logic • ඳըʹؔ͢Δ͜ͱҎ֎ͷશͯͷॲཧ • Databaseͱͷ΍ΓऔΓͱ͔ • APIݺͼग़͠ͱ͔ • ઃఆͷ؅ཧͱ͔
10. Ͳ͜ʹ͋Δ΂͖͔ • Store? • Actino Creator? • Middleware?
12. 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
13. • Domain LogicΛFluxͷϑϩʔ͔Β෼཭͢Δ • Action Creator͔Β͸ݺͼग़͚ͩ͢ • Store͸Stateͷߋ৽͚ͩʹ஫ྗ͢Δ
14. • StoreͱDomain Logic͸ςετ͠΍͘͢ͳΔ • Action Creator͕ςετͮ͠Β͍ • શ͕ͯPure functionͱ͍͏ͷ͸ݬ૝ͳͷͰఘΊΔ
15. Storeͷ෼ׂ
16. ͭ·ΓStateΛͲ͏෼ׂ͢Δ͔
17. facebook/flux • Ϧιʔεʁ͝ͱʹStoreΛ෼ׂ͢Δ • DispatcherʹΑΔަ௨੔ཧɺwaitForΛ࢖ͬͨ ґଘͷղܾ͕ඞཁ
18. Redux • StoreΛ෼ׂ͠ͳ͍ʢSingle Stateʣ • StateΛߋ৽͢ΔॲཧʢreducerʣΛ෼ׂ͢Δ • waitFor΍Dispatcher͕ෆཁ • State͕ڊେʹͳΔ
19. Bdash • Page୯ҐͰ෼͚ͯΈͨ • Page͝ͱʹಠཱͨ͠StoreΛ࣋ͭ • Page == Container Component
21. • Storeಉ࢜ͷґଘ͕ͳ͍ • waitFor΋Dispatcher΋ෆཁ • StateΛΘ͔Γ΍ཻ͍͢౓Ͱ෼ׂͰ͖Δ Good
22. • PageΛ·͍ͨͩσʔλͷڞ༗͕໘౗ • ෳ਺ͷPageͰಉ͡σʔλΛ࣋ͭ͜ͱ΋͋Δͷ Ͱແବ͕͋Δ Bad
23. PageؒͰͷσʔλڞ༗ • PageؒͰڞ༗͢Δσʔλ͸Domain Logic૚ʹετΞ͢Δ • Page੾Γସ͑࣌ʹຖճDomain Logic૚͔ΒऔΓ௚͢ • αʔόʔαΠυͷ։ൃͱ͍ۙײ֮
24. ൚༻తͳઃܭͰ͸ͳ͍ ⚠
25. ΞϓϦέʔγϣϯʹ
 దͨ͠ઃܭΛɻ
26. ൓ল఺
27. • ଞʹ΋ಠࣗͷઃܭɾ࣮૷͕͍͔ͭ͋͘Δ • ίϯτϦϏϡʔγϣϯͷෑډ͕ߴ͘ͳΔ • Ϩʔϧʹ৐ͬͨ΄͏͕ઃܭࢥ૝Λڞ༗͢Δ
 ίετ͕ݮΔ
28. Α͔ͬͨ
29. • ݸਓతʹ͸͖Ε͍ʹઃܭͰ͖ͯຬ଍ • ઃܭΛߟ͑Δͷ͸ษڧʹͳΔ
30. Thanks.