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

The State Transparented Web Application

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers.
Avatar for Kohei Asai Kohei Asai
January 13, 2017

The State Transparented Web Application

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

Avatar for Kohei Asai

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ϑϩϯτΤϯυ΋ੜ࢈ੑΛམͱ͞ͳ͍ઃܭͰ։ൃ͍͖ͯ͠·͠ΐ ͏