Tweet
Tweet

Slide 1

Slide 1 text

αʔόαΠυϨϯμϦϯάɺͯ͠·͔͢? ~ ಌΕͷIsomorphic JavaScript ~ Meguro.es #6 2016/10/13 Akatsuki Inc.ɹߴদ ਅฏ

Slide 2

Slide 2 text

■ ߴদ ਅฏ (@shimpeiws) ■ WebΤϯδχΞ @ ΞΧπΩ LXࣄۀ෦ ɹɾRailsͱJavaScriptΛ൒ʑ͘Β͍ॻ͍͍ͯΔ ■ LX(ϥΠϒΤΫεϖϦΤϯε)ࣄۀ෦ ɹɾཱྀφΧɾΞΫςΟϏςΟɺཱྀߦɺΠϯό΢ϯυͳͲ ɹɾϦΞϧͳମݧͷػձΛఏڙ͢ΔαʔϏε౳Λ޿ؚ͘Ή ࢲ͸୭

Slide 3

Slide 3 text

■ 9/12͔ΒΦϑΟε͕໨ࠇʹҠస!!! 8FKPJOFE.FPVSP FT

Slide 4

Slide 4 text

໨࣍ 1. ͳͥαʔόαΠυϨϯμϦϯά͍ͨ͠ͷ͔? 3. Isomorphic JavaScript 2. ࣮ݱ͢ΔͨΊͷΞʔΩςΫνϟ

Slide 5

Slide 5 text

■ ৽ن։ൃ͍ͯ͠ΔϓϩμΫτͷٕज़తͳཁ݅ ɹɾ·ͣ͸Webओಋ ɹɾBtoCͳαʔϏε (SSR͍ͨ͠ͷ͸toCͷ෦෼) ɹɾར༻Ϣʔβ͸εϚʔτϑΥϯଟ਺Λ૝ఆ ɹɾݕࡧ΍SNSͷγΣΞ͔ΒͷྲྀೖΛओʹ૝ఆ ɹɾҰ൪τϥϑΟοΫ͕ू·Δͱ૝ఆ͞ΕΔϖʔδͷϢʔβΠϯλϥΫγϣϯ͕ ෳࡶ ɹɾSEOॏཁ (※1) ■ ※1 ɹɾGoogle BOT͸window.onload·ͰಡΉɺͱ͍͏આ͸͋Δ ͳͥαʔόαΠυϨϯμϦϯά͍ͨ͠ͷ͔

Slide 6

Slide 6 text

■ લఏͱͳΔٕज़ελοΫͷબఆ ɹɾαʔόαΠυ: Rails ɹɾView: React ɹɾFlux: Redux ɹɾSPAͳͱ͜Ζͱͦ͏Ͱͳ͍ͱ͜Ζ͕͋Δ ͷߏ੒ͰαʔόαΠυϨϯμϦϯά΋͍ͨ͠! ͳͥαʔόαΠυϨϯμϦϯά͍ͨ͠ͷ͔

Slide 7

Slide 7 text

■ Presentation Serverɺ API Serverͷ2୆ମ੍ ɾॳճΞΫηε͸HTTPϦΫΤετ ɾNode.jsͰड͚ͯSSR ΞʔΩςΫνϟ

Slide 8

Slide 8 text

■ Presentation Serverɺ API Serverͷ2୆ମ੍ ɾͦΕҎ߱͸SPA ΞʔΩςΫνϟ

Slide 9

Slide 9 text

■ Presentation Server ɹɾNode.js (Express) Ͱಈ͍͍ͯΔ ɹɾΫϥΠΞϯτ͸·ͣͪ͜ΒʹΞΫηεͯ͘͠Δ ɹɾαʔόαΠυϨϯμϦϯάͨ͠HTMLΛฦ͢ ɹɾDBΞΫηε͸ͤͣ σʔλऔಘ͸API Server΁ͷϦΫΤετ ɹɾιʔείʔυ͸ΫϥΠΞϯταΠυͰಈ͘JSͱڞ௨ ■ API Server ɹɾRailsͰಈ͍͍ͯΔ ɹɾRestͳAPIΛఏڙɺJSONͰϨεϙϯε ɹɾView͸ఏڙ͠ͳ͍ ΞʔΩςΫνϟ

Slide 10

Slide 10 text

■ ͪͳΈʹ͜ͷΞʔΩςΫνϟʹࢸΔલ͸… ɹɾreact-railsΛࢼ͍ͯͨ͠ ɹɹɾRailsଆͰऔಘͨ͠σʔλΛઐ༻ͷϔϧύϝιουܦ༝Ͱpropsͱͯ͠View ʹ౉͢࢓૊Έ ɹɾ͋Εɺ͜ΕΫϥΠΞϯταΠυͰ΋͏Ұ౓ಉ͜͡ͱॻ͘ͷ͔ ɹɹɾϥϯσΟϯά͸SSR͕ͩɺSPA಺ͷભҠ͸JSͰinitial stateΛ࡞Δ ɹɹɾҧ͏ݴޠɺϑϨʔϜϫʔΫͰೋ౓ಉ͡ॲཧΛॻ͘ͷ͕ਏ͍… ݁ہSSRͷ೉͠͞͸”͍͔ʹinitial stateΛ༻ҙ͢Δͷ͔?” ʹ ू໿͢ΔͷͰ͸? ΞʔΩςΫνϟ

Slide 11

Slide 11 text

■ ղܾͷํ޲ੑͱͯ͠͸… ɹɾJavaScriptʹدͤΔ (ࣗ෼ͨͪͷνʔϜͷΞϓϩʔν) ɹɹɾSSR΋JavaScriptͰॻ͚ΔΑ͏ʹ͢ΔͨΊʹNode.jsΛ࢖͏ ɹɹɾAPIαʔό͸ผ్༻ҙ͢Δ (API΋Node.jsͰOKͳΒ͹ෆཁ) ɹɾRailsʹدͤΔ ɹɹɾ@r7kamura͞Μͷ ”Ruby on Rails on React on SSR on SPA” ͕ۃ·͍ͬͯ Δ (http://r7kamura.hatenablog.com/entry/2016/10/10/173610) ɹɹɾಉ͡ΤϯυϙΠϯτ͕ॳճϦΫΤετͰ͸HTMLΛฦͯ͠ɺϖʔδભҠͷͱ͖ ʹ͸JSONΛฦ͢ ɹɹ ɹɹɾϨεϙϯεܗ͕ࣜมΘΔ͚ͩͰσʔλऔಘϩδοΫ͸ڞ௨ԽͰ͖Δ ɹɹɾRails͔Β౉͢props಺ͷύϥϝʔλͰReactίϯϙʔωϯτΛࢦఆ -> Viewς ϯϓϨʔτͷΑ͏ʹѻ͑Δ ΞʔΩςΫνϟ

Slide 12

Slide 12 text

■ ࣮ࡍతʹJavaScriptʹدͤΔઃܭͬͯͲ͏ͳΔ? ɹɾref: erikras/react-redux-universal-hot-example ɹɹɾA starter boilerplate for a universal webapp using express, react, redux, webpack, and react-transform ɹɹɾඞཁͦ͏ͳ΋ͷ͕Ұ௨ΓೖͬͯΔ! (όʔδϣϯݹ͍͚Ͳ…) ɹɹɾαʔόαΠυͱΫϥΠΞϯταΠυͷڞ༗ͳͷͰͲͪΒ͔ͱ͍͏ͱ Isomorphic *TPNPSQIJD+BWB4DSJQU

Slide 13

Slide 13 text

■ React + ReduxΛ׆͔͠ͳ͕ΒSSR͍ͯ͠Δ෦෼ ɹɾsrc/server.js Express͔Β200ͰϨεϙϯεฦͦ͏ͱ͍ͯ͠Δͱ͜Ζ *TPNPSQIJD+BWB4DSJQU

Slide 14

Slide 14 text

■ React + ReduxΛ׆͔͠ͳ͕ΒSSR͍ͯ͠Δ෦෼ ɹɾsrc/helpers/Html.js ग़ྗͨ͠΋ͷΛϨεϙϯε༻HTMLͷ֎࿮ʹ͸ΊࠐΉ *TPNPSQIJD+BWB4DSJQU

Slide 15

Slide 15 text

■ React + ReduxΛ׆͔͠ͳ͕ΒSSR͍ͯ͠Δ෦෼ ɹɾsrc/client.js ΫϥΠΞϯταΠυ͸CreateStore͢Δ࣌ʹwindow͔ΒॳظԽ *TPNPSQIJD+BWB4DSJQU

Slide 16

Slide 16 text

■ Ұ൪ͷ伴͸ redux-async-connect ( -> redux-connect ) ɹɾIs redux-async-connect dead? #81 https://github.com/Rezonans/redux-async-connect/issues/81 ɹ ɹɾϝϯς͞Εͳ͘ͳͬͯredux-connectʹͳͬͨ ɹɾdecoratorͱͯ͠ఏڙ͞Ε͍ͯΔ ɹɾ͋ΔඇಉظAction͕׬ྃ͢Δ·ͰɺContainerͷඳըΛ஗Ԇͤͯ͘͞ΕΔ *TPNPSQIJD+BWB4DSJQU

Slide 17

Slide 17 text

■ src/containers/App/App.js *TPNPSQIJD+BWB4DSJQU

Slide 18

Slide 18 text

■ ͜ΕͰશͯղܾ!!! ͱ͸͍͔ͳ͍ ɹɾ࣮ࡍతʹ࣮૷ʹೖΖ͏ͱͨ͠λΠϛϯάͰߦ͖٧·ͬͨ ɹɾϚϧνContainerͷઃܭʹͨ͠৔߹ɺશͯͷContainerͷasyncConnectͷ׬ ྃΛ଴͔ͬͯΒSSR͢Δඞཁ͕͋Δ… ɹ ɹɾe.g. هࣄϖʔδͷதʹίϝϯτཝ͕͋Δ͕ɺίϝϯτཝ͸ଞͷϖʔδͰ΋ ઃஔ͢Ε͹ಈ͘Α͏ʹComponentͰ͸ͳ͘Containerʹ͍ͨ͠! ·ͩ·ͩIsomorphic΁ͷಓͷΓ͸௕͍ *TPNPSQIJD+BWB4DSJQU

Slide 19

Slide 19 text

ҰॹʹIsomorphicͳੈք΁ཱཱྀͪ·͠ΐ͏ 8FBSFIJSJOH