BdashにおけるFlux設計

Transcript

1. Bdashʹ͓͚ΔFluxઃܭ
   

   View Slide

2. @hokaccha
   

   View Slide

3. View Slide

4. View Slide

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

   View Slide

6. BdashͷFluxઃܭʹ͍ͭͯ
   

   View Slide

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

   View Slide

8. Domain Logicͷݺͼग़͠
   

   View Slide

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

   View Slide

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

    View Slide

11. View Slide

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
    

    View Slide

13. • Domain LogicΛFluxͷϑϩʔ͔Β෼཭͢Δ
    • Action Creator͔Β͸ݺͼग़͚ͩ͢
    • Store͸Stateͷߋ৽͚ͩʹ஫ྗ͢Δ
    

    View Slide

14. • StoreͱDomain Logic͸ςετ͠΍͘͢ͳΔ
    • Action Creator͕ςετͮ͠Β͍
    • શ͕ͯPure functionͱ͍͏ͷ͸ݬ૝ͳͷͰఘΊΔ
    

    View Slide

15. Storeͷ෼ׂ
    

    View Slide

16. ͭ·ΓStateΛͲ͏෼ׂ͢Δ͔
    

    View Slide

17. facebook/flux
    • Ϧιʔεʁ͝ͱʹStoreΛ෼ׂ͢Δ
    • DispatcherʹΑΔަ௨੔ཧɺwaitForΛ࢖ͬͨ
    ґଘͷղܾ͕ඞཁ
    

    View Slide

18. Redux
    • StoreΛ෼ׂ͠ͳ͍ʢSingle Stateʣ
    • StateΛߋ৽͢ΔॲཧʢreducerʣΛ෼ׂ͢Δ
    • waitFor΍Dispatcher͕ෆཁ
    • State͕ڊେʹͳΔ
    

    View Slide

19. Bdash
    • Page୯ҐͰ෼͚ͯΈͨ
    • Page͝ͱʹಠཱͨ͠StoreΛ࣋ͭ
    • Page == Container Component
    

    View Slide

20. View Slide

21. • Storeಉ࢜ͷґଘ͕ͳ͍
    • waitFor΋Dispatcher΋ෆཁ
    • StateΛΘ͔Γ΍ཻ͍͢౓Ͱ෼ׂͰ͖Δ
    Good
    

    View Slide

22. • PageΛ·͍ͨͩσʔλͷڞ༗͕໘౗
    • ෳ਺ͷPageͰಉ͡σʔλΛ࣋ͭ͜ͱ΋͋Δͷ
    Ͱແବ͕͋Δ
    Bad
    
    

    View Slide

23. PageؒͰͷσʔλڞ༗
    • PageؒͰڞ༗͢Δσʔλ͸Domain Logic૚ʹετΞ͢Δ
    • Page੾Γସ͑࣌ʹຖճDomain Logic૚͔ΒऔΓ௚͢
    • αʔόʔαΠυͷ։ൃͱ͍ۙײ֮
    

    View Slide

24. ൚༻తͳઃܭͰ͸ͳ͍
    ⚠
    

    View Slide

25. ΞϓϦέʔγϣϯʹ

    దͨ͠ઃܭΛɻ
    

    View Slide

26. ൓ল఺
    

    View Slide

27. • ଞʹ΋ಠࣗͷઃܭɾ࣮૷͕͍͔ͭ͋͘Δ
    • ίϯτϦϏϡʔγϣϯͷෑډ͕ߴ͘ͳΔ
    • Ϩʔϧʹ৐ͬͨ΄͏͕ઃܭࢥ૝Λڞ༗͢Δ

    ίετ͕ݮΔ
    

    View Slide

28. Α͔ͬͨ
    

    View Slide

29. • ݸਓతʹ͸͖Ε͍ʹઃܭͰ͖ͯຬ଍
    • ઃܭΛߟ͑Δͷ͸ษڧʹͳΔ
    

    View Slide

30. Thanks.
    

    View Slide