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

The State Transparented Web Application

Kohei Asai
January 13, 2017

The State Transparented Web Application

2017/01に社内勉強会で話した何かです

Kohei Asai

January 13, 2017
Tweet

More Decks by Kohei Asai

Other Decks in Programming

Transcript

  1. Virtual DOM » ViewʹྲྀΕͯ͘Δ஋͸ɺৗʹߋ৽ޙঢ়ଶͷ׬શ஋ʹͳΔ (ࠩ෼Ͱ͸ͳ ͍) » ͕ɺDOM͸ࠩ෼ͷखଓ͖తͳߋ৽Λ޷Ή » Virtual

    DOMͱ͍͏ঢ়ଶ஋ͱDOMͱͷதؒදݱ͕͋Ε͹ɺதؒදݱ ಉ࢜Ͱࠩ෼Λܭࢉͯ͠ɺDOMΛͲ͏มߋ͢Ε͹͍͍͔ͱ͍͏खଓ͖ ॲཧΛܾఆͰ͖Δ » ͍ͬͯ͏ͷΛ୲͏ͷ͕React
  2. FluxͷStore ͔ͨ͠ʹ // TodoStore#reduce() ... switch (action.type) { // ...

    // ೖྗͷఆٛ case TodoActionTypes.TOGGLE_TODO: // ঢ়ଶભҠઌͷఆٛ (state.update()ͷฦ஋͕ભҠޙͷঢ়ଶ) return state.update( action.id, todo => todo.set('complete', !todo.complete), ); // ... } // ... via. flux/TodoStore.js at master · facebook/flux · GitHub
  3. CQRS » ίϚϯυΫΤϦ੹຿෼཭ (Command and Query Responsibility Segregation) » ಡΈࠐΈͱॻ͖ࠐΈΛΠϯλʔϑΣʔεͱͯ͠໌֬ʹ෼͚Δݪଇ

    » Command (ॻ͖ࠐΈ) ͸ඞͣ෭࡞༻Λ࣋ͪɺQuery (ಡΈࠐΈ) ͸෭ ࡞༻Λ࣋ͨͳ͍ » ͜ΕΒΛ໌֬ʹ෼͚Δ͜ͱͰɺϓϩάϥϜͷৼΔ෣͍ͷཧղͷ೉͠͞ ͕ܰݮ͞ΕΔ via. ϝΠϠʔઌੜͷҒେ͞ͱCommand-Query෼཭
  4. Fluxͷ্ʹԿ͔Λෑ͘ʁ » ʮϢʔεέʔε૚ʯ : Ϣʔβʔೖྗ͔ΒɺAction CreatorΛฒྻɾ௚ ྻʹ૊Έ߹Θͤͯίʔϧ͢Δखଓ͖తͳ૚͕ඞཁ » redux-sagaɺredux-thunkɺredux-observable »

    Reduxͷϛυϧ΢ΣΞͱͯ͠ɺಠࣗDSLͳͲͰϢʔεέʔε૚Λ࡞ Δ » ΫϦʔϯΞʔΩςΫνϟͳͲ » தن໛Ҏ্Ͱ͋Ε͹ɺ͖ͪΜͱͨ͠ΞʔΩςΫνϟʹ৐ͤΔͷ΋ ख
  5. ͦͷଞ » iOS΍AndroidͰ΋Fluxͷ׆༻ྫ͕૿͖͑ͯͨ » ͱ͸͍͑ɺiOS΍AndroidʹVirtual DOM͸ͳ͍ͷͰɺԿΒ͔ͷ ࢓૊Έ͸ඞཁ » facebook/componentkit »

    zserge/anvil » ͱ͍͏͔ήʔϜͱ͔ͩͱɺ͜͏͍͏΍ΓํΛ͍ͯ͠Δ΋ͷ͕ଟ͍ » WebϑϩϯτΤϯυ΋ੜ࢈ੑΛམͱ͞ͳ͍ઃܭͰ։ൃ͍͖ͯ͠·͠ΐ ͏