Inside Bdash

Transcript

1. Inside Bdash
   

   View Slide

2. @hokaccha
   

   View Slide

3. View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. Flux Architecture
    of Bdash
    

    View Slide

11. Flux Frameworks
    
    

    View Slide

12. Topics
    • Domain Logicͷݺͼग़͠
    • Storeͷ෼ׂ
    • ImmutableʹStateΛߋ৽͢Δ࣮૷
    

    View Slide

13. Domain Logicͷݺͼग़͠
    

    View Slide

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

    View Slide

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

    View Slide

16. View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

20. Storeͷ෼ׂ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

25. Query Page
    

    View Slide

26. DataSource Page
    

    View Slide

27. Setting Page
    

    View Slide

28. View Slide

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

    View Slide

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

    View Slide

31. PageؒͰͷσʔλڞ༗
    • PageؒͰڞ༗͢Δσʔλ͸Domain Logic૚ʹετΞ͢Δ
    • Page੾Γସ͑࣌ʹຖճDomain Logic૚͔ΒऔΓ௚͢
    

    View Slide

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 });
    }
    }
    }
    }
    

    View Slide

33. αʔόʔαΠυͷߟ͑ํ
    ͱಉͩ͡ɾɾʂ
    

    View Slide

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

    View Slide

35. ΞϓϦέʔγϣϯʹ

    దͨ͠ઃܭΛɻ
    

    View Slide

36. ImmutableͳStateͷߋ৽
    

    View Slide

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;
    }
    }),
    });
    }
    

    View Slide

38. • Immutable.jsΈ͍ͨͳ๛෋ͳػೳ͸͍Βͳ͍
    • ωετͨ͠Stateͷߋ৽Λ؆୯ʹ͍͚ͨͩ͠
    • ͍͔ͭ͘ϥΠϒϥϦ͋Δ͚Ͳ޷Έʹ߹Θͳ͍
    

    View Slide

39. ࡞ͬͨ
    

    View Slide

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);
    }
    

    View Slide

41. Storeʹ૊ΈࠐΉ
    reduce(action, payload) {
    switch (action) {
    case 'addNewQuery': {
    return this
    .set('selectedQueryId', payload.query.id)
    .set('editor.line', null)
    .prepend('queries', payload.query);
    }
    //...
    }
    }
    

    View Slide

42. ·ͱΊ
    • Domain Logic͸Action Creator͔ΒݺͿΑ͏
    ʹͯ͠Έͨ
    • StoreΛPage୯ҐͰ෼ׂͯ͠Έͨ
    • Stateߋ৽ͷͨΊͷศརϞδϡʔϧ࡞ͬͨ
    

    View Slide

43. View Slide