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.1k
デザインシステムを導入してUIに秩序を取り戻す - React (Native)編 #rejectron2018
kentomoriwaki
16
3.6k
ReactでWebとNativeの共通UIライブラリを作ろう
kentomoriwaki
0
1.1k
TypeScript in Wantedly
kentomoriwaki
2
710
5分でわかる React "Suspense"
kentomoriwaki
3
1.4k
導入して1年経ったReact周辺の 技術スタックを反省します | React反省会@Wantedly
kentomoriwaki
10
8.6k
Immutable.jsとReact @Wantedly ~入門編~
kentomoriwaki
8
74k
React速習会@Wantedly
kentomoriwaki
1
410
Other Decks in Programming
See All in Programming
読まないコードリーディング術
hisaju
0
110
Go 1.24でジェネリックになった型エイリアスの紹介
syumai
2
300
Generating OpenAPI schema from serializers throughout the Rails stack - Kyobashi.rb #5
envek
1
410
Domain-Driven Design (Tutorial)
hschwentner
13
22k
もう少しテストを書きたいんじゃ〜 #phpstudy
o0h
PRO
19
4.2k
SwiftUI Viewの責務分離
elmetal
PRO
2
280
15分で学ぶDuckDBの可愛い使い方 DuckDBの最近の更新
notrogue
3
810
Kotlinの開発でも AIをいい感じに使いたい / Making the Most of AI in Kotlin Development
kohii00
5
1.7k
Boos Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
560
未経験でSRE、はじめました! 組織を支える役割と軌跡
curekoshimizu
1
200
たのしいSocketのしくみ / Socket Under a Microscope
coe401_
8
1.4k
[JAWS DAYS 2025] 最近の DB の競合解決の仕組みが分かった気になってみた
maroon1st
0
160
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
91
5.9k
Six Lessons from altMBA
skipperchong
27
3.6k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
11
1.3k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Facilitating Awesome Meetings
lara
53
6.3k
The Cost Of JavaScript in 2023
addyosmani
47
7.4k
Done Done
chrislema
182
16k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7.1k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
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!