Tweet
Tweet

Slide 1

Slide 1 text

BFFʹ͔͚Δظ଴ ~ࠓ·Ͱॻ͍ͨPromiseͷ਺Λ͍֮͑ͯΔͷ͔?~ Gotanda.js #6 2016/12/02 Akatsuki Inc.ɹߴদ ਅฏ

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

໨࣍ 1. WowfulͷΞʔΩςΫνϟ 3. BFFʹ͔͚Δظ଴ 2. Կ͕ਏ͔͔ͬͨ? Կ͕ਏ͘ͳ͔͔ͬͨ?

Slide 4

Slide 4 text

1. WowfulͷΞʔΩςΫνϟ

Slide 5

Slide 5 text

■ wowful.com (β൛) ɹɾβ൛ͱͯ͠εςϧεͰݕূத (ͳͷͰͻͬͦΓͱ…) 8PXGVMͷΞʔΩςΫνϟ

Slide 6

Slide 6 text

■ Presentation Server(BFF)ɺ API Serverͷ2୆ମ੍ ɾॳճΞΫηε͸HTTPϦΫΤετ ɾNode.jsͰड͚ͯReactͰSSR ɾAPIαʔό͔Βσʔλऔಘ ɾSSR݁ՌͷHTMLΛฦ͢ 8PXGVMͷΞʔΩςΫνϟ

Slide 7

Slide 7 text

8PXGVMͷΞʔΩςΫνϟ ■ Presentation Server(BFF)ɺ API Serverͷ2୆ମ੍ ɾҎ߱͸Single Page Application ɾΫϥΠΞϯταΠυͷReactͰඳը ɾ௨৴͕ඞཁͳλΠϛϯάͰXHR

Slide 8

Slide 8 text

■αʔόαΠυϨϯμϦϯά ɹɾSEOͱϢʔβϏϦςΟͷͨΊʹSSR͔ͨͬͨ͠ ɹɾ͕ɺGoogleʹؔͯ͠͸SEO্ͷϝϦοτ͸ແͦ͞͏! ■Presentation Server(Node.js + Express)͕ଘࡏ ɹɾSSR͢ΔͨΊͷαʔόͱͯ͠஀ੜ ɹɾ࠷ۙʮ͜ͷϨΠϠ͕ΞʔΩςΫνϟͷ伴ͳͷͰ͸?ʯͱࢥ͍࢝Ίͨ ■Isomorphic JavaScript ɹɾSSR࣌΋ΫϥΠΞϯταΠυͰ΋ಉ͡JavaScriptͰಈ࡞͢Δ 8PXGVMͷΞʔΩςΫνϟ

Slide 9

Slide 9 text

" " " " " OSSͱࢿྉʹѹ౗తײँ " " " " " ઌਓͷ஌ܙ recruit-tech/redux-async-loader SSR࣌ͷඇಉظσʔλಡΈࠐΈʹར༻ React with ReduxʹΑΔ େن໛঎༻αʔϏεͷ։ൃ https://speakerdeck.com/yoshidan/nodefest2016

Slide 10

Slide 10 text

2. Կ͕ਏ͔͔ͬͨ? Կ͕ਏ͘ͳ͔͔ͬͨ?

Slide 11

Slide 11 text

■# # # ਏ͔ͬͨͱ͜Ζ# # # ɹɾσʔλͷऔಘ ※ ಛʹ͜͜ͷ࿩Λ͍ͨ͠ͷͰ͜ͷޙ!!! ɹɾViewͱͷϚοϐϯά ɾσʔλͷಛੑ্ϓϨθϯςʔγϣϯϩδοΫ͕๲ΒΈ͕ͪ ɾXXXUtilɺXXXHelperɺXXXViewModel͕ཚཱͨ͠… ɹɾReact in productionϞʔυ ɹ ɹɾdevelopͩͱwarningʹͳΔΑ͏ͳ΋ͷ͕productionͰக໋ইʹͳΔ ɹ ɹɾe.g. λάͷωετ(pλάͷதʹdivͱ͔)ɺdefaultValueʹundefined ■$ $ $ ਏ͘ͳ͔ͬͨͱ͜Ζ$ $ $ ɹɾSSR͢Δ͜ͱࣗମ ɹ ɹɾϥΠϒϥϦ΋ἧ͖ͬͯͯɺͦΜͳʹෑډ͕ߴ͘ͳ͍ ɹɾϢʔβΠϕϯτىҼͷΞΫγϣϯͷෳࡶ͞ ɹ ɹɾ͜Ε͸ReactͷԸܙͰͦΜͳʹ೉͘͠ͳ͍ɺstateʹूத͢Ε͹͍͍ Կ͕ਏ͔͔ͬͨ Կ͕ਏ͘ͳ͔͔ͬͨ

Slide 12

Slide 12 text

■ྫ͑͹͋Δৄࡉը໘ͷinitial stateΛ࡞Δͱ͜Ζ(※ίʔυ͸ΠϝʔδͰ͢) Կ͕ਏ͔͔ͬͨ Կ͕ਏ͘ͳ͔͔ͬͨ 6ฒྻ ௚ྻ ௚ྻ

Slide 13

Slide 13 text

■ͳΜͰ͜͏ͳͬͨ… ɹɾ% % % ͢Έ·ͤΜ…% % % ■API͸RESTʹอ͔ͪͨͬͨ ɹɾը໘ʹ΂ͬͨΓدΓఴͬͨAPI͸࠶ར༻Ͱ͖ͳͯ͘ɺվमͭΒ͍ ɹɾnestedͳJSON͸ۃྗ΍ΊͯɺϦιʔεຖʹϦΫΤετ͠ͳ͓ͦ͏ ɹɾ·͋ɺΫϥΠΞϯτͰؤுΕ͹͍͍ͬ͠ΐ… ■͜ΕDBपΓͰߟ͑ͯͨ͜ͱ͕Ұ૚खલʹདྷͯͳ͍͔? ɹɾϧʔϓͰΞΫηε͢ΔͱAPI૚ͰN+1͢Δ ɹɾAPIϨεϙϯεͷΩʔ࡟আͱ໋͔औΓ (DBͷSchemaมߋͱಉҙ) ɹɾ݁ՌRESTकΓ͖Εͣɺnestedͳ΍ͭฦ͢… ɹɾϑϩϯτΤϯυʹෳࡶ͞Λԡ͠෇͚͗ͨ͢Μͩͳ͊… Կ͕ਏ͔͔ͬͨ Կ͕ਏ͘ͳ͔͔ͬͨ

Slide 14

Slide 14 text

&&&& Ͳ͏͠Α… &&&& Կ͕ਏ͔͔ͬͨ Կ͕ਏ͘ͳ͔͔ͬͨ

Slide 15

Slide 15 text

3. BFFʹ͔͚Δظ଴

Slide 16

Slide 16 text

■σʔλͷऔಘ͕ਏ͍ɺʹରͯ͠ߟ͑ΒΕΔιϦϡʔγϣϯ ɹɾRESTΛఘΊͯը໘ʹԊͬͨAPIΛ࡞Δ ɹɾΫϥΠΞϯτࢹ఺Ͱݴ͑͹͜Ε͕ຊདྷୡ੒͔ͨͬͨ͜͠ͱ… ɹɾGraphQL / Falcor ɹɾ͏Μɺ΍Γ͍ͨɺ΍Γ͍͚ͨͲɺطʹREST API͕͋ͬͯશϦϓϨΠε͸… ɹɾΦʔέετϨʔγϣϯ૚ ɹɾଟ෼ࠓͷঢ়گͩͱҰ൪ݱ࣮త ɹɾhttp://thenextweb.com/dd/2013/12/17/future-api-design-orchestration-layer/ #''ʹ͔͚Δظ଴

Slide 17

Slide 17 text

■BFF(Backend For Frontend) ɹɾݩSound CloudͷPhil Calçado͕ఏএ ɹɾΫϥΠΞϯτͷछผຖʹதؒϨΠϠΛ࡞Δ #''ʹ͔͚Δظ଴ “Pattern: Backends For Frontends” Sam Newman http://samnewman.io/patterns/architectural/bff/

Slide 18

Slide 18 text

■ࠓͷΞΠσΞ ɹɾࠓSSR͍ͯ͠Δ͚ͩͷPresentationServerʹϑϩϯτΤϯυͷෳࡶ͞ͷݞ୅ ΘΓΛ͍͖͍ͤͯͨ͞ ɹɾBFFͷ໾ׂ΋͜͜ʹ ɹɾ͜ͷ૚Ͱ͖Δ͜ͱͬͯ΋ͬͱ͋ΔͷͰ͸? ɹ ɾViewͷ෦෼Ωϟογϡ??? (ͦ͜͸CDN͔…) #''ʹ͔͚Δظ଴ ͍ͭ͜ʹ΋ͬͱؤுͬͯ΋Β͏

Slide 19

Slide 19 text

'''' https://aktsk.jp/recruit/lx/ '''' 8FBSFIJSJOH