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
Shimpei Takamatsu
December 02, 2016
Technology
3
2.4k
BFFにかける期待
Gotanda.js #6 in Oisix
https://gotandajs.connpass.com/event/42328/
Shimpei Takamatsu
December 02, 2016
Tweet
Share
More Decks by Shimpei Takamatsu
See All by Shimpei Takamatsu
自己紹介LT - 20230825
shimpeiws
0
320
サーバーレスでAPIを提供する際のアプリケーション"以外"の話 / Talk about Serverless Other than Application
shimpeiws
0
680
🏄♂️ Scrum Development beyond the sea 🏄♂️
shimpeiws
3
380
Webサービスの初期開発とマイクロサービス・BFF
shimpeiws
20
13k
もう一度JSON Schemaの話をしよう ~ Form / Validation / View ~
shimpeiws
2
3.1k
サーバサイドレンダリング、してますか?
shimpeiws
11
6.6k
Wantedlyでの React + Reduxの導入 & 展開
shimpeiws
4
690
共通Reactコンポーネントを作ろう!!!
shimpeiws
4
2.3k
WantedlyにReact + Reduxを導入した話
shimpeiws
17
44k
Other Decks in Technology
See All in Technology
Oracle Database Technology Night #87-1 : Exadata Database Service on Exascale Infrastructure(ExaDB-XS)サービス詳細
oracle4engineer
PRO
1
170
ExaDB-XSで利用されているExadata Exascaleについて
oracle4engineer
PRO
3
240
PHPで印刷所に入稿できる名札データを作る / Generating Print-Ready Name Tag Data with PHP
tomzoh
0
180
Windows の新しい管理者保護モード
murachiakira
0
200
入門 PEAK Threat Hunting @SECCON
odorusatoshi
0
150
NFV基盤のOpenStack更新 ~9世代バージョンアップへの挑戦~
vtj
0
340
PHPカンファレンス名古屋-テックリードの経験から学んだ設計の教訓
hayatokudou
2
540
30→150人のエンジニア組織拡大に伴うアジャイル文化を醸成する役割と取り組みの変化
nagata03
0
100
生成AI×財務経理:PoCで挑むSlack AI Bot開発と現場巻き込みのリアル
pohdccoe
1
610
データベースの負荷を紐解く/untangle-the-database-load
emiki
2
500
AWSではじめる Web APIテスト実践ガイド / A practical guide to testing Web APIs on AWS
yokawasa
7
650
データエンジニアリング領域におけるDuckDBのユースケース
chanyou0311
9
2.1k
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1368
200k
How GitHub (no longer) Works
holman
314
140k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
133
33k
A better future with KSS
kneath
238
17k
Typedesign – Prime Four
hannesfritz
40
2.5k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
570
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Transcript
BFFʹ͔͚Δظ ~ࠓ·Ͱॻ͍ͨPromiseͷΛ͍֮͑ͯΔͷ͔?~ Gotanda.js #6 2016/12/02 Akatsuki Inc.ɹߴদ ਅฏ
▪ ߴদ ਅฏ (@shimpeiws) ▪ WebΤϯδχΞ @ ΞΧπΩ LXࣄۀ෦
ɹɾRailsͱJavaScriptΛʑ͘Β͍ॻ͍͍ͯΔ ▪ LX(ϥΠϒΤΫεϖϦΤϯε)ࣄۀ෦ ɹɾཱྀφΧɾΞΫςΟϏςΟɺཱྀߦɺΠϯόϯυͳͲ ɹɾϦΞϧͳମݧͷػձΛఏڙ͢ΔαʔϏεΛؚ͘Ή ࢲ୭
࣍ 1. WowfulͷΞʔΩςΫνϟ 3. BFFʹ͔͚Δظ 2. Կ͕ਏ͔͔ͬͨ? Կ͕ਏ͘ͳ͔͔ͬͨ?
1. WowfulͷΞʔΩςΫνϟ
▪ wowful.com (β൛) ɹɾβ൛ͱͯ͠εςϧεͰݕূத (ͳͷͰͻͬͦΓͱ…) 8PXGVMͷΞʔΩςΫνϟ
▪ Presentation Server(BFF)ɺ API Serverͷ2ମ੍ ɾॳճΞΫηεHTTPϦΫΤετ ɾNode.jsͰड͚ͯReactͰSSR ɾAPIαʔό͔Βσʔλऔಘ ɾSSR݁ՌͷHTMLΛฦ͢
8PXGVMͷΞʔΩςΫνϟ
8PXGVMͷΞʔΩςΫνϟ ▪ Presentation Server(BFF)ɺ API Serverͷ2ମ੍ ɾҎ߱Single Page Application
ɾΫϥΠΞϯταΠυͷReactͰඳը ɾ௨৴͕ඞཁͳλΠϛϯάͰXHR
▪αʔόαΠυϨϯμϦϯά ɹɾSEOͱϢʔβϏϦςΟͷͨΊʹSSR͔ͨͬͨ͠ ɹɾ͕ɺGoogleʹؔͯ͠SEO্ͷϝϦοτແͦ͞͏! ▪Presentation Server(Node.js + Express)͕ଘࡏ ɹɾSSR͢ΔͨΊͷαʔόͱͯ͠ੜ ɹɾ࠷ۙʮ͜ͷϨΠϠ͕ΞʔΩςΫνϟͷ伴ͳͷͰ?ʯͱࢥ͍࢝Ίͨ
▪Isomorphic JavaScript ɹɾSSR࣌ΫϥΠΞϯταΠυͰಉ͡JavaScriptͰಈ࡞͢Δ 8PXGVMͷΞʔΩςΫνϟ
" " " " " OSSͱࢿྉʹѹతײँ " " " "
" ઌਓͷܙ recruit-tech/redux-async-loader SSR࣌ͷඇಉظσʔλಡΈࠐΈʹར༻ React with ReduxʹΑΔ େن༻αʔϏεͷ։ൃ https://speakerdeck.com/yoshidan/nodefest2016
2. Կ͕ਏ͔͔ͬͨ? Կ͕ਏ͘ͳ͔͔ͬͨ?
▪# # # ਏ͔ͬͨͱ͜Ζ# # # ɹɾσʔλͷऔಘ ※ ಛʹ͜͜ͷΛ͍ͨ͠ͷͰ͜ͷޙ!!!
ɹɾViewͱͷϚοϐϯά ɾσʔλͷಛੑ্ϓϨθϯςʔγϣϯϩδοΫ͕ΒΈ͕ͪ ɾXXXUtilɺXXXHelperɺXXXViewModel͕ཚཱͨ͠… ɹɾReact in productionϞʔυ ɹ ɹɾdevelopͩͱwarningʹͳΔΑ͏ͳͷ͕productionͰக໋ইʹͳΔ ɹ ɹɾe.g. λάͷωετ(pλάͷதʹdivͱ͔)ɺdefaultValueʹundefined ▪$ $ $ ਏ͘ͳ͔ͬͨͱ͜Ζ$ $ $ ɹɾSSR͢Δ͜ͱࣗମ ɹ ɹɾϥΠϒϥϦἧ͖ͬͯͯɺͦΜͳʹෑډ͕ߴ͘ͳ͍ ɹɾϢʔβΠϕϯτىҼͷΞΫγϣϯͷෳࡶ͞ ɹ ɹɾ͜ΕReactͷԸܙͰͦΜͳʹ͘͠ͳ͍ɺstateʹूத͢Ε͍͍ Կ͕ਏ͔͔ͬͨ Կ͕ਏ͘ͳ͔͔ͬͨ
▪ྫ͑͋Δৄࡉը໘ͷinitial stateΛ࡞Δͱ͜Ζ(※ίʔυΠϝʔδͰ͢) Կ͕ਏ͔͔ͬͨ Կ͕ਏ͘ͳ͔͔ͬͨ 6ฒྻ ྻ ྻ
▪ͳΜͰ͜͏ͳͬͨ… ɹɾ% % % ͢Έ·ͤΜ…% % % ▪APIRESTʹอ͔ͪͨͬͨ ɹɾը໘ʹͬͨΓدΓఴͬͨAPI࠶ར༻Ͱ͖ͳͯ͘ɺվमͭΒ͍
ɹɾnestedͳJSONۃྗΊͯɺϦιʔεຖʹϦΫΤετ͠ͳ͓ͦ͏ ɹɾ·͋ɺΫϥΠΞϯτͰؤுΕ͍͍ͬ͠ΐ… ▪͜ΕDBपΓͰߟ͑ͯͨ͜ͱ͕Ұखલʹདྷͯͳ͍͔? ɹɾϧʔϓͰΞΫηε͢ΔͱAPIͰN+1͢Δ ɹɾAPIϨεϙϯεͷΩʔআͱ໋͔औΓ (DBͷSchemaมߋͱಉҙ) ɹɾ݁ՌRESTकΓ͖Εͣɺnestedͳͭฦ͢… ɹɾϑϩϯτΤϯυʹෳࡶ͞Λԡ͚͗ͨ͢͠Μͩͳ͊… Կ͕ਏ͔͔ͬͨ Կ͕ਏ͘ͳ͔͔ͬͨ
&&&& Ͳ͏͠Α… &&&& Կ͕ਏ͔͔ͬͨ Կ͕ਏ͘ͳ͔͔ͬͨ
3. BFFʹ͔͚Δظ
▪σʔλͷऔಘ͕ਏ͍ɺʹରͯ͠ߟ͑ΒΕΔιϦϡʔγϣϯ ɹɾRESTΛఘΊͯը໘ʹԊͬͨAPIΛ࡞Δ ɹɾΫϥΠΞϯτࢹͰݴ͑͜Ε͕ຊདྷୡ͔ͨͬͨ͜͠ͱ… ɹɾGraphQL / Falcor ɹɾ͏ΜɺΓ͍ͨɺΓ͍͚ͨͲɺطʹREST API͕͋ͬͯશϦϓϨΠε… ɹɾΦʔέετϨʔγϣϯ
ɹɾଟࠓͷঢ়گͩͱҰ൪ݱ࣮త ɹɾhttp://thenextweb.com/dd/2013/12/17/future-api-design-orchestration-layer/ #''ʹ͔͚Δظ
▪BFF(Backend For Frontend) ɹɾݩSound CloudͷPhil Calçado͕ఏএ ɹɾΫϥΠΞϯτͷछผຖʹதؒϨΠϠΛ࡞Δ #''ʹ͔͚Δظ “Pattern:
Backends For Frontends” Sam Newman http://samnewman.io/patterns/architectural/bff/
▪ࠓͷΞΠσΞ ɹɾࠓSSR͍ͯ͠Δ͚ͩͷPresentationServerʹϑϩϯτΤϯυͷෳࡶ͞ͷݞ ΘΓΛ͍͖͍ͤͯͨ͞ ɹɾBFFͷׂ͜͜ʹ ɹɾ͜ͷͰ͖Δ͜ͱͬͯͬͱ͋ΔͷͰ? ɹ ɾViewͷ෦Ωϟογϡ??? (ͦ͜CDN͔…) #''ʹ͔͚Δظ
͍ͭ͜ʹͬͱؤுͬͯΒ͏
'''' https://aktsk.jp/recruit/lx/ '''' 8FBSFIJSJOH