BFFにかける期待

Gotanda.js #6 in Oisix
https://gotandajs.connpass.com/event/42328/

Transcript

1. BFFʹ͔͚Δظ଴ ~ࠓ·Ͱॻ͍ͨPromiseͷ਺Λ͍֮͑ͯΔͷ͔?~ Gotanda.js #6 2016/12/02 Akatsuki Inc.ɹߴদ ਅฏ
2.  ▪ ߴদ ਅฏ (@shimpeiws) ▪ WebΤϯδχΞ @ ΞΧπΩ LXࣄۀ෦ ɹɾRailsͱJavaScriptΛ൒ʑ͘Β͍ॻ͍͍ͯΔ ▪ LX(ϥΠϒΤΫεϖϦΤϯε)ࣄۀ෦ ɹɾཱྀφΧɾΞΫςΟϏςΟɺཱྀߦɺΠϯό΢ϯυͳͲ ɹɾϦΞϧͳମݧͷػձΛఏڙ͢ΔαʔϏε౳Λ޿ؚ͘Ή ࢲ͸୭
3.  ໨࣍ 1. WowfulͷΞʔΩςΫνϟ 3. BFFʹ͔͚Δظ଴ 2. Կ͕ਏ͔͔ͬͨ? Կ͕ਏ͘ͳ͔͔ͬͨ?
4. 1. WowfulͷΞʔΩςΫνϟ 
5.  ▪ wowful.com (β൛) ɹɾβ൛ͱͯ͠εςϧεͰݕূத (ͳͷͰͻͬͦΓͱ…) 
   8PXGVMͷΞʔΩςΫνϟ
6. ▪ Presentation Server(BFF)ɺ API Serverͷ2୆ମ੍ ɾॳճΞΫηε͸HTTPϦΫΤετ ɾNode.jsͰड͚ͯReactͰSSR ɾAPIαʔό͔Βσʔλऔಘ ɾSSR݁ՌͷHTMLΛฦ͢  
   8PXGVMͷΞʔΩςΫνϟ
7.  
   8PXGVMͷΞʔΩςΫνϟ ▪ Presentation Server(BFF)ɺ API Serverͷ2୆ମ੍ ɾҎ߱͸Single Page Application ɾΫϥΠΞϯταΠυͷReactͰඳը ɾ௨৴͕ඞཁͳλΠϛϯάͰXHR
8.  ▪αʔόαΠυϨϯμϦϯά ɹɾSEOͱϢʔβϏϦςΟͷͨΊʹSSR͔ͨͬͨ͠ ɹɾ͕ɺGoogleʹؔͯ͠͸SEO্ͷϝϦοτ͸ແͦ͞͏! ▪Presentation Server(Node.js + Express)͕ଘࡏ ɹɾSSR͢ΔͨΊͷαʔόͱͯ͠஀ੜ ɹɾ࠷ۙʮ͜ͷϨΠϠ͕ΞʔΩςΫνϟͷ伴ͳͷͰ͸?ʯͱࢥ͍࢝Ίͨ ▪Isomorphic JavaScript ɹɾSSR࣌΋ΫϥΠΞϯταΠυͰ΋ಉ͡JavaScriptͰಈ࡞͢Δ 
   8PXGVMͷΞʔΩςΫνϟ
9. " " " " " OSSͱࢿྉʹѹ౗తײँ " " " " " ઌਓͷ஌ܙ  recruit-tech/redux-async-loader SSR࣌ͷඇಉظσʔλಡΈࠐΈʹར༻ React with ReduxʹΑΔ େن໛঎༻αʔϏεͷ։ൃ https://speakerdeck.com/yoshidan/nodefest2016
10. 2. Կ͕ਏ͔͔ͬͨ? Կ͕ਏ͘ͳ͔͔ͬͨ? 
11.  ▪# # # ਏ͔ͬͨͱ͜Ζ# # # ɹɾσʔλͷऔಘ ※ ಛʹ͜͜ͷ࿩Λ͍ͨ͠ͷͰ͜ͷޙ!!! ɹɾViewͱͷϚοϐϯά ɾσʔλͷಛੑ্ϓϨθϯςʔγϣϯϩδοΫ͕๲ΒΈ͕ͪ ɾXXXUtilɺXXXHelperɺXXXViewModel͕ཚཱͨ͠… ɹɾReact in productionϞʔυ ɹ ɹɾdevelopͩͱwarningʹͳΔΑ͏ͳ΋ͷ͕productionͰக໋ইʹͳΔ ɹ ɹɾe.g. λάͷωετ(pλάͷதʹdivͱ͔)ɺdefaultValueʹundefined ▪$ $ $ ਏ͘ͳ͔ͬͨͱ͜Ζ$ $ $ ɹɾSSR͢Δ͜ͱࣗମ ɹ ɹɾϥΠϒϥϦ΋ἧ͖ͬͯͯɺͦΜͳʹෑډ͕ߴ͘ͳ͍ ɹɾϢʔβΠϕϯτىҼͷΞΫγϣϯͷෳࡶ͞ ɹ ɹɾ͜Ε͸ReactͷԸܙͰͦΜͳʹ೉͘͠ͳ͍ɺstateʹूத͢Ε͹͍͍ 
    Կ͕ਏ͔͔ͬͨ
    Կ͕ਏ͘ͳ͔͔ͬͨ
12.  ▪ྫ͑͹͋Δৄࡉը໘ͷinitial stateΛ࡞Δͱ͜Ζ(※ίʔυ͸ΠϝʔδͰ͢) 
    Կ͕ਏ͔͔ͬͨ
    Կ͕ਏ͘ͳ͔͔ͬͨ 6ฒྻ ௚ྻ ௚ྻ
13.  ▪ͳΜͰ͜͏ͳͬͨ… ɹɾ% % % ͢Έ·ͤΜ…% % % ▪API͸RESTʹอ͔ͪͨͬͨ ɹɾը໘ʹ΂ͬͨΓدΓఴͬͨAPI͸࠶ར༻Ͱ͖ͳͯ͘ɺվमͭΒ͍ ɹɾnestedͳJSON͸ۃྗ΍ΊͯɺϦιʔεຖʹϦΫΤετ͠ͳ͓ͦ͏ ɹɾ·͋ɺΫϥΠΞϯτͰؤுΕ͹͍͍ͬ͠ΐ… ▪͜ΕDBपΓͰߟ͑ͯͨ͜ͱ͕Ұ૚खલʹདྷͯͳ͍͔? ɹɾϧʔϓͰΞΫηε͢ΔͱAPI૚ͰN+1͢Δ ɹɾAPIϨεϙϯεͷΩʔ࡟আͱ໋͔औΓ (DBͷSchemaมߋͱಉҙ) ɹɾ݁ՌRESTकΓ͖Εͣɺnestedͳ΍ͭฦ͢… ɹɾϑϩϯτΤϯυʹෳࡶ͞Λԡ͠෇͚͗ͨ͢Μͩͳ͊… 
    Կ͕ਏ͔͔ͬͨ
    Կ͕ਏ͘ͳ͔͔ͬͨ
14. &&&& Ͳ͏͠Α… &&&& 
    Կ͕ਏ͔͔ͬͨ
    Կ͕ਏ͘ͳ͔͔ͬͨ 
15. 3. BFFʹ͔͚Δظ଴ 
16.  ▪σʔλͷऔಘ͕ਏ͍ɺʹରͯ͠ߟ͑ΒΕΔιϦϡʔγϣϯ ɹɾRESTΛఘΊͯը໘ʹԊͬͨAPIΛ࡞Δ ɹɾΫϥΠΞϯτࢹ఺Ͱݴ͑͹͜Ε͕ຊདྷୡ੒͔ͨͬͨ͜͠ͱ… ɹɾGraphQL / Falcor ɹɾ͏Μɺ΍Γ͍ͨɺ΍Γ͍͚ͨͲɺطʹREST API͕͋ͬͯશϦϓϨΠε͸… ɹɾΦʔέετϨʔγϣϯ૚ ɹɾଟ෼ࠓͷঢ়گͩͱҰ൪ݱ࣮త ɹɾhttp://thenextweb.com/dd/2013/12/17/future-api-design-orchestration-layer/ #''ʹ͔͚Δظ଴
17.  ▪BFF(Backend For Frontend) ɹɾݩSound CloudͷPhil Calçado͕ఏএ ɹɾΫϥΠΞϯτͷछผຖʹதؒϨΠϠΛ࡞Δ #''ʹ͔͚Δظ଴ “Pattern: Backends For Frontends” Sam Newman http://samnewman.io/patterns/architectural/bff/
18.  ▪ࠓͷΞΠσΞ ɹɾࠓSSR͍ͯ͠Δ͚ͩͷPresentationServerʹϑϩϯτΤϯυͷෳࡶ͞ͷݞ୅ ΘΓΛ͍͖͍ͤͯͨ͞ ɹɾBFFͷ໾ׂ΋͜͜ʹ ɹɾ͜ͷ૚Ͱ͖Δ͜ͱͬͯ΋ͬͱ͋ΔͷͰ͸? ɹ ɾViewͷ෦෼Ωϟογϡ??? (ͦ͜͸CDN͔…) #''ʹ͔͚Δظ଴ ͍ͭ͜ʹ΋ͬͱؤுͬͯ΋Β͏
19. '''' https://aktsk.jp/recruit/lx/ '''' 8F
    BSF
    IJSJOH