Upgrade to Pro — share decks privately, control downloads, hide ads and more …

BdashにおけるFlux設計

 BdashにおけるFlux設計

Kazuhito Hokamura

May 10, 2017
Tweet

More Decks by Kazuhito Hokamura

Other Decks in Technology

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