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.4k
デザインシステムを導入してUIに秩序を取り戻す - React (Native)編 #rejectron2018
kentomoriwaki
16
3.5k
ReactでWebとNativeの共通UIライブラリを作ろう
kentomoriwaki
0
1k
TypeScript in Wantedly
kentomoriwaki
2
640
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
400
Other Decks in Programming
See All in Programming
KSPの導入・移行を前向きに検討しよう!
shxun6934
PRO
0
280
大公開!iOS開発の悩みトップ5 〜iOSDC Japan 2024〜
ryunakayama
0
190
Rechartsで楽にゴリゴリにカスタマイズする!
10tera
1
170
Modern Angular with the NGRX Signal Store New Rules for Your Architecture @BASTA! 2024 in Mainz
manfredsteyer
PRO
0
150
いまから追い上げる、Jetpack Compose トレーニング
nyafunta9858
0
590
【TID2024】模擬講義:プログラマと一緒にゲームをデザインしてみよう!
akatsukigames_tech
0
660
状態管理ライブラリZustandの導入から運用まで
k1tikurisu
3
470
Prolog入門
qnighy
4
1k
Shinjuku.rb#95:心の技術書紹介
free_world21
1
110
The Sequel to a Dream of Ruby Parser's Grammar
ydah
1
220
Amazon Neptuneで始める初めてのグラフDB ー グラフDBを使う意味を考える ー
satoshi256kbyte
2
260
Prompt Cachingは本当に効果的なのか検証してみた.pdf
ttnyt8701
0
530
Featured
See All Featured
Scaling GitHub
holman
458
140k
How GitHub Uses GitHub to Build GitHub
holman
472
290k
Git: the NoSQL Database
bkeepers
PRO
425
64k
Fireside Chat
paigeccino
31
2.9k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
23
1.7k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
8.9k
Why You Should Never Use an ORM
jnunemaker
PRO
53
8.9k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
Web development in the modern age
philhawksworth
205
10k
Designing the Hi-DPI Web
ddemaree
278
34k
Building a Modern Day E-commerce SEO Strategy
aleyda
36
6.8k
Designing on Purpose - Digital PM Summit 2013
jponch
114
6.8k
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!