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
5
3.7k
デザインシステムを導入してUIに秩序を取り戻す - React (Native)編 #rejectron2018
kentomoriwaki
16
3.5k
ReactでWebとNativeの共通UIライブラリを作ろう
kentomoriwaki
0
1.1k
TypeScript in Wantedly
kentomoriwaki
2
660
5分でわかる React "Suspense"
kentomoriwaki
3
1.4k
導入して1年経ったReact周辺の 技術スタックを反省します | React反省会@Wantedly
kentomoriwaki
10
8.5k
Immutable.jsとReact @Wantedly ~入門編~
kentomoriwaki
8
74k
React速習会@Wantedly
kentomoriwaki
1
400
Other Decks in Programming
See All in Programming
GitHub Actionsのキャッシュと手を挙げることの大切さとそれに必要なこと
satoshi256kbyte
5
430
Remix on Hono on Cloudflare Workers
yusukebe
1
300
『ドメイン駆動設計をはじめよう』のモデリングアプローチ
masuda220
PRO
8
540
よくできたテンプレート言語として TypeScript + JSX を利用する試み / Using TypeScript + JSX outside of Web Frontend #TSKaigiKansai
izumin5210
6
1.7k
LLM生成文章の精度評価自動化とプロンプトチューニングの効率化について
layerx
PRO
2
190
Flutterを言い訳にしない!アプリの使い心地改善テクニック5選🔥
kno3a87
1
200
Micro Frontends Unmasked Opportunities, Challenges, Alternatives
manfredsteyer
PRO
0
110
役立つログに取り組もう
irof
28
9.6k
Macとオーディオ再生 2024/11/02
yusukeito
0
370
PHP でアセンブリ言語のように書く技術
memory1994
PRO
1
170
[Do iOS '24] Ship your app on a Friday...and enjoy your weekend!
polpielladev
0
110
EMになってからチームの成果を最大化するために取り組んだこと/ Maximize team performance as EM
nashiusagi
0
100
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
32
1.5k
Become a Pro
speakerdeck
PRO
25
5k
10 Git Anti Patterns You Should be Aware of
lemiorhan
655
59k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
Facilitating Awesome Meetings
lara
50
6.1k
Happy Clients
brianwarren
98
6.7k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Designing on Purpose - Digital PM Summit 2013
jponch
115
7k
A Tale of Four Properties
chriscoyier
156
23k
Making the Leap to Tech Lead
cromwellryan
133
8.9k
Automating Front-end Workflow
addyosmani
1366
200k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
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!