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.2k
デザインシステムを導入してUIに秩序を取り戻す - React (Native)編 #rejectron2018
kentomoriwaki
16
3.4k
ReactでWebとNativeの共通UIライブラリを作ろう
kentomoriwaki
0
990
TypeScript in Wantedly
kentomoriwaki
2
620
5分でわかる React "Suspense"
kentomoriwaki
3
1.4k
導入して1年経ったReact周辺の 技術スタックを反省します | React反省会@Wantedly
kentomoriwaki
10
8.4k
Immutable.jsとReact @Wantedly ~入門編~
kentomoriwaki
8
74k
React速習会@Wantedly
kentomoriwaki
1
380
Other Decks in Programming
See All in Programming
Architectures with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
100
継続的な活動で築く地方エンジニアの道
myamashii
2
350
AWSでゲームサーバーを運用! Amazon GameLiftのお話
iriikeita
0
200
[After Kotlin Fest 2024 LT Night @ Sansan] もっともっとKotlinを好きになる!K2 Compiler Pluginで遊んでみよう!
kitakkun
2
260
初心者がおさえておきたいAWS CDKのベストプラクティス 2024
konokenj
15
7.3k
CSC307 Lecture 09
javiergs
PRO
1
500
How to use Macrobenchmark
veronikapj
0
160
Google's Recipe for Scaling (Web) Security – LocoMocoSec 2024
lweichselbaum
0
170
しくじり先生 Image Matching Challenge 2024 編
goosehaaan
0
810
Clean Architecture by TypeScript & NestJS
ryounasso
0
150
「2024年版 Kotlin サーバーサイドプログラミング実践開発」の補講 〜O/Rマッパー編〜
n_takehata
2
260
Javaの現状2024夏 / Java current status 2024 summer
kishida
4
1.4k
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
423
64k
How to Think Like a Performance Engineer
csswizardry
4
590
No one is an island. Learnings from fostering a developers community.
thoeni
17
2.8k
Design by the Numbers
sachag
277
18k
Optimizing for Happiness
mojombo
373
69k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
26
1.6k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
StorybookのUI Testing Handbookを読んだ
zakiyama
15
4.9k
Building a Modern Day E-commerce SEO Strategy
aleyda
25
6.7k
Building Effective Engineering Teams - LeadDev
addyosmani
47
2.2k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
35
6.3k
Building Better People: How to give real-time feedback that sticks.
wjessup
357
18k
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!