BdashにおけるFlux設計

Transcript

1. Bdashʹ͓͚ΔFluxઃܭ

2. @hokaccha

3. None
4. None

5. Bdash • Electron੡ͷσεΫτοϓΞϓϦέʔγϣϯ • BIπʔϧͬΆ͍΋ͷ • View͸શͯReact

6. BdashͷFluxઃܭʹ͍ͭͯ

7. • FluxϑϨʔϜϫʔΫະ࢖༻ • ࠷దͳઃܭΛࣗ෼Ͱߟ͑ͳ͕Β࣮૷͍ͯͬͨ͠

8. Domain Logicͷݺͼग़͠

9. Domain Logic • ඳըʹؔ͢Δ͜ͱҎ֎ͷશͯͷॲཧ • Databaseͱͷ΍ΓऔΓͱ͔ • APIݺͼग़͠ͱ͔ • ઃఆͷ؅ཧͱ͔

10. Ͳ͜ʹ͋Δ΂͖͔ • Store? • Actino Creator? • Middleware?

11. None

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

20. None

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.