Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
BFFを導入しなかった理由
Search
Kento Moriwaki
June 07, 2018
Programming
4
13k
BFFを導入しなかった理由
UIT#3 The “Backends for Frontends” sharing
Kento Moriwaki
June 07, 2018
Tweet
Share
More Decks by Kento Moriwaki
See All by Kento Moriwaki
わかった気になれる CRDT を使った共同編集
kentomoriwaki
8
4.4k
デザインシステムを導入してUIに秩序を取り戻す - React (Native)編 #rejectron2018
kentomoriwaki
16
3.7k
ReactでWebとNativeの共通UIライブラリを作ろう
kentomoriwaki
0
1.2k
TypeScript in Wantedly
kentomoriwaki
2
730
5分でわかる React "Suspense"
kentomoriwaki
3
1.5k
導入して1年経ったReact周辺の 技術スタックを反省します | React反省会@Wantedly
kentomoriwaki
10
8.6k
Immutable.jsとReact @Wantedly ~入門編~
kentomoriwaki
8
75k
React速習会@Wantedly
kentomoriwaki
1
430
Other Decks in Programming
See All in Programming
カクヨムAndroidアプリのリブート
numeroanddev
0
430
ktr0731/go-mcpでMCPサーバー作ってみた
takak2166
0
170
GoのWebAssembly活用パターン紹介
syumai
3
10k
XSLTで作るBrainfuck処理系
makki_d
0
210
CursorはMCPを使った方が良いぞ
taigakono
0
140
ASP.NETアプリケーションのモダナイズ インフラ編
tomokusaba
1
390
Beyond Portability: Live Migration for Evolving WebAssembly Workloads
chikuwait
0
380
WindowInsetsだってテストしたい
ryunen344
1
190
事業戦略を理解してソフトウェアを設計する
masuda220
PRO
22
6.2k
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
160
Haskell でアルゴリズムを抽象化する / 関数型言語で競技プログラミング
naoya
17
4.8k
GraphRAGの仕組みまるわかり
tosuri13
7
450
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
24
1.7k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
137
34k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
790
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
16
940
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Practical Orchestrator
shlominoach
188
11k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Unsuck your backbone
ammeep
671
58k
Transcript
©2018 Wantedly, Inc. BFFΛಋೖ͠ͳ͔ͬͨཧ༝ Βʹ·ͩૣ͔ͬͨ UIT#3 The “Backends for Frontends”
sharing 2018/06/07 - Kento Moriwaki
©2018 Wantedly, Inc. ࣗݾհ Kento Moriwaki twitter: @kento_trans_lu WantedlyͷϑϩϯτΤϯυΛϦʔυ͍ͯ͠·͢ 2લʹReactΛಋೖ͠ɺݱࡏࣾһ5ਓͷϑϩϯτΤϯυνʔϜ͕Ͱ͖͍ͯ·͢
όοΫΤϯυͦΕͳΓʹॻ͖·͢ ࠷ۙReact Nativeͷಋೖ͠·ͨ͠ https://www.wantedly.com/users/1468880
©2018 Wantedly, Inc. ϓϩδΣΫτ֓ཁ ձࣾϖʔδϦχϡʔΞϧ • ͍ΘΏΔWYSIWYGͰΠϯλϥΫςΟϒੑߴ͍ • ͍ͭ௨ΓReact͍͍ͨ •
SEOͷཁɻॳظମݧͱͯ͠εϐʔυେࣄ • SSRඞਢ͔ͳ • 2ਓͰ2ϲ݄ • TypeScriptಋೖͳͲɺελοΫΛಉ࣌ʹݟ͢͜ ͱܾ·͍ͬͯΔ • ༨༟ͳ͍ʂ
©2018 Wantedly, Inc. ҰຕؠͷRailsͰɺMicroserviceԽΛਐΊ͍ͯΔ • ·ͩ·ͩMicroserviceͱݺͳ͍ • όοΫΤϯυͱϑϩϯτΤϯυͷ͚͍͖͍ͯͨ RESTful API͕͋Δ
• ΞϓϦͰΘΕ͍ͯΔͷͰɺࠓճͷϓϩδΣΫτͰ͜ΕΛ͍͍ͨɻ • Rails ΞϓϦʹ RESTful API ͷϨʔϧΛෑ͍ͯੜ࢈ੑ͕େ্͖͕ͬͨ͘ WantedlyͷΞʔΩςΫνϟ(Wantedly Visitͷ߹)
©2018 Wantedly, Inc. #''ͷग़൪ʂ
©2018 Wantedly, Inc. 3BJMT #SPXTFS %# 3FWFSTF 1SPYZ #'' 443
3FBDUϖʔδ "1* 3BJMTϖʔδ ߏॳظҊ
©2018 Wantedly, Inc. άϩʔόϧϔομʔϑολʔશϖʔδڞ௨ • ࠓճSSRԽ͍ͨ͠ͷɺશମͷ͏ͪͷձࣾϖʔδ͚ͩ • ϖʔδΊͪΌͪ͘Ό͋Δ • ৮Βͳ͍ϖʔδͦͷ··ʹ͍ͨ͠
• ϔομʔ͕Ҋ֎ߴػೳ ՝1: ڞ௨ύʔπ
©2018 Wantedly, Inc. શϖʔδڞ௨ͷύʔπ: Rails + jQuery ϖʔδίϯςϯπ: React (SSR)
as-you-typeͳݕࡧ ௨(όοδະಡཧ) ϝοηʔδཧ ͭͳ͕Γཧ ΞΧϯτΓସ͑ ݸਓϞʔυͱձࣾϞʔυͰσβΠϯػೳ͕ҧ͏
©2018 Wantedly, Inc. 1. ReactόʔδϣϯΛ࡞Δʁ • Rails + jQuery൛ͱ2ॏͰཧ͢Δ͜ͱʹͳΔ 2.
શ෦React࣮ʹ౷Ұ͢Εʁ • ୯७ͳ΄΅੩తϖʔδʹReactೖΕͪΌ͏ʁ -> ແବʹେ͖ͳJSಡΈࠐΈΑ͘ͳ͍ • ·ͩAngular͕ͬͯΔϖʔδͱ͔͋Δɻ -> Reactͱڞଘͱ͔ຊʹΑ͘ͳ͍ ՝1: ڞ௨ύʔπ
©2018 Wantedly, Inc. Ͳ͏ͬͯdeploy͢Δʁ • ݱঢ়ɺwebpackͰbuildͯ͠ɺdeployRailsʹࡌ͍ͤͯΔ • طଘͷCSR onlyͷReactͱશʹ͚ΔʁBFFͷߋ৽ͱRailsଆͷmanifestߋ৽ΛҰॹʹߦ ͏ʁͲͪΒʹͤΑdeployϑϩʔΛݟ͢ඞཁ͕͋Γͦ͏
ஈ֊తʹಋೖ͍ͨ͠ • Ұ෦اۀ͔Βͱ͔ɺւ֎ޙͰͱ͔ɺ༷ʑͳ݅Ͱ৽چͷϏϡʔΛΓସ͍͑ͨ • BFFͰΔͳΒɺALB(Reverse Proxy)ͰΔʁͦΕͱBFFͰProxyతʹΔʁ ՝2: Πϯϑϥઃܭ
©2018 Wantedly, Inc. ࠳ંɻ ࠓ·ͩͦͷ࣌Ͱͳ͔ͬͨ
©2018 Wantedly, Inc. 1. Server side rendering • Ϣʔβʔମݧͷ্ͱ҆ఆͨ͠SEOͷͨΊʹඞཁͩͬͨ •
BFF͡Όͳͯ͘ɺςϯϓϨʔτͷڞ௨Խ͕Ͱ͖Ε͍͍ 2. Aggregate data • SSRʹඞཁͳσʔλΛޮతΛूΊ͍ͨ • طଘͷRESTful API͕͍͔ͨͬͨͷɺίʔυͷॏෳΛආ͚͔͔ͨͬͨΒ • ࠓAPIαʔόʔҰͭͳͷͰɺSSR͡Όͳ͍߹RESTful APIୟ͍ͯͳ͍ ͱͱBFFͰΓ͔ͨͬͨ͜ͱ2ͭ
©2018 Wantedly, Inc. ͜ΕΒͷཁ݅Λຬͨͭͭ͠ ࠷খݶͷͰ • BFFత͡Όͳͯ͘खஈ • తձࣾϖʔδͷϦχϡʔΞϧͰϢʔβʔʹՁΛಧ͚Δ͜ͱ কདྷతʹҰਓલͷBFFʹͳΕΔΑ͏ʹ
• ຊؾͰΔͱ͖ͷίετΛখ͍ͨ͘͞͠ • ͦͷ͠ͷ͗ͷରԠͰෛ࠴ʹ͠ͳ͍ ࣮ࡍʹಋೖͨ͠ΞʔΩςΫνϟ
©2018 Wantedly, Inc. )ZQFSOPWB #SPXTFS %# 3BJMT 3FBDUϖʔδ "1* 3BJMTϖʔδ
࣮ࡍʹಋೖͨ͠ΞʔΩςΫνϟ ૿͑ͨͷ͍͚ͭͩ͜
©2018 Wantedly, Inc. SSR͢Δ͚ͩͷϚΠΫϩαʔϏε • Airbnb͕։ൃ͍ͯ͠Δ SSRʹඞཁͳσʔλΛड͚ɺSSRͨ݁͠ՌΛฦ͢ • த͘͢͝୯७ͳnodeαʔόʔ What
is Hypernova?
©2018 Wantedly, Inc. 1. controllerͰSSRʹඞཁͳσʔλΛ༻ҙ͢Δ 2. Hypernovaʹ͛ͯHTMLจࣈྻΛड͚औΔ 3. LayoutʹΊࠐΜͰϒϥβʹฦ͢ Steps
to server side rendering
©2018 Wantedly, Inc. SSRʹඞཁͳσʔλΛޮΑ͘ूΊ͍ͨ • RESTful APIΛୟ͍ͯɺෳͷσʔλΛूΊ͍ͨ • Railsͷத͔ΒɺࣗͷRESTful APIʹϦΫΤετ͛Δʁ
• γϯάϧεϨου/γϯάϧϓϩηεͰͰ͖ͳ͍ɻ։ൃ͕͘͠ͳΔ • RESTful APIͱୟ͘ͷͱಉ͡Α͏ͳॲཧ͕෦ͰͰ͖Ε͍͍ • Ͱ͖Δ͚ͩॏෳͨ͠ίʔυΛॻ͔ͣʹ Aggregate data
©2018 Wantedly, Inc. • ؔ৺ͷ͋ΔϦιʔεͷModelΛಡΈࠐΉ • ϦΫΤετύϥϝʔλ͔ΒN+1Λղܾ͢Δ ← ෦ϥΠϒϥϦԽ͞Ε͍ͯΔ •
ModelΛJSONʹม͢Δ ← SerializerʹΓग़͞Ε͍ͯΔ • ͨ·ʹෳࡶͳॲཧ ← ServiceʹΓग़͞Ε͍ͯΔ ControllerΛബ͓͍͓͔ͯͨ͛͘͠Ͱɺ΄ͱΜͲͷ ॲཧΛڞ௨ԽͰ͖Δ RESTful API͕͍ͬͯͨ͜ͱ
©2018 Wantedly, Inc. • ؔ৺ͷ͋ΔϦιʔεΛಡΈࠐΉ͚ͩ • render_reactͰɺHypernovaʹϦΫΤ ετ͛ͯɺ݁ՌΛLayoutʹΊࠐΉ͜ ͱΛ͍ͯ͠Δ •
ͲͷϑΟʔϧυ͕ඞཁ͔ͳͲɺ show.ymlͱ͍͏ϑΝΠϧʹผͰॻ͘ • RESTful APIͱಉ͡ΈͰࣗಈతʹN+1 Λղܾͯ͘͠ΕΔ ControllerͰ࣮ࡍʹͬͨ͜ͱ
©2018 Wantedly, Inc. • ͦΕͧΕରԠ͢ΔAPIΛୟ͘Α͏ʹ ॻ͖͑Δ͚ͩ • Renderͷ෦Hypernovaʹࡌ ͤͨ··Մೳ •
ͪΖΜBFFͰrender͢Δ ͜ͱՄೳ BFFʹͨ͘͠ͳͬͨΒ(ࠓޙ)
©2018 Wantedly, Inc. RailsͷίϯςφͱHypernovaΛಉډͤͨ͞ • HypernovaͰNetwork I/Oͳ͍ͷͰɺHTMLΈཱͯͷCPUॲཧ͕Ruby͔Βnode ʹҠಈ͚ͨͩ͠ • ͪΖΜผίϯςφʹ͚ΕΔͳΒ͚ͨ΄͏͕͍͍
DockerfileʹߦՃ͚ͨͩ͠ • HypernovaΛlocalhostͰىಈ͢ΔίϚϯυΛՃͨ͠ ΠϯϑϥपΓͷมߋ΄ͱΜͲͳ͔ͬͨ
©2018 Wantedly, Inc. • ControllerͷதͰifจͰ؆୯ʹΓ ସ͑ΒΕΔ ஈ֊తͳΓସ͑
©2018 Wantedly, Inc. 1. ϨΠΞτΛRails͔ΒҾ͖ണ͕͢ • ϔομʔϑολʔΛReact࣮ʹஔ͖͑Δ • શϖʔδΛReactड͚ೖΕՄೳʹ͢ΔɻAngular͝ΊΜͳ͍͞ɻ •
Layout͚ͩΉBFFΛ͍ΕͯɺRailsଆLayoutͳ͠Ͱฦ͢ɻ͜ͷ࣌Ͱ·ͩHypernova ͓ͬͯ͘ 2. ControllerͷॲཧΛBFFʹҠ͢ • Hypernova͘͠ͳ͍ BFFͷಓͷΓ(ఆ)
©2018 Wantedly, Inc. 1. SSR͍͚ͨͩ͠ͳΒBFFඞਢ͡Όͳ͍ • ͨΓલͷ͜ͱ͚ͩͲɺແཧͯ͠ಋೖΛਐΊͳ͍ͰΑ͔ͬͨ 2. Ұؾʹಋೖ͢Δͷେม͚ͩͲɺૄ݁߹Λҙࣝ͠ ͯҰาͮͭਐΜͰ͍͜͏
• ڧ͍ϑϩϯτΤϯυνʔϜΛ࡞ΔͨΊʹɺͬͺΓBFFԽͪΌΜͱਐΊ͍͖͍ͯͨ • ͏ͪΐͬͱৄ͘͠ϒϩάʹॻ͍ͯ·͢ ·ͱΊ
©2018 Wantedly, Inc. • ҰॹʹBFF࣮ݱͯ͘͠ΕΔํWanted! We are hiring!