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.5k
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
410
サーバーレスでAPIを提供する際のアプリケーション"以外"の話 / Talk about Serverless Other than Application
shimpeiws
0
720
🏄♂️ Scrum Development beyond the sea 🏄♂️
shimpeiws
3
420
Webサービスの初期開発とマイクロサービス・BFF
shimpeiws
20
13k
もう一度JSON Schemaの話をしよう ~ Form / Validation / View ~
shimpeiws
2
3.1k
サーバサイドレンダリング、してますか?
shimpeiws
11
6.6k
Wantedlyでの React + Reduxの導入 & 展開
shimpeiws
4
720
共通Reactコンポーネントを作ろう!!!
shimpeiws
4
2.3k
WantedlyにReact + Reduxを導入した話
shimpeiws
17
45k
Other Decks in Technology
See All in Technology
Pythonによる契約プログラミング入門 / PyCon JP 2025
7pairs
5
2.4k
Geospatialの世界最前線を探る [2025年版]
dayjournal
3
470
SOC2取得の全体像
shonansurvivors
1
350
"複雑なデータ処理 × 静的サイト" を両立させる、楽をするRails運用 / A low-effort Rails workflow that combines “Complex Data Processing × Static Sites”
hogelog
3
1.7k
analysis パッケージの仕組みの上でMulti linter with configを実現する / Go Conference 2025
k1low
1
260
Pure Goで体験するWasmの未来
askua
1
170
20250929_QaaS_vol20
mura_shin
0
110
バイブコーディングと継続的デプロイメント
nwiizo
2
380
PLaMo2シリーズのvLLM実装 / PFN LLM セミナー
pfn
PRO
2
910
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
Why React!?? Next.jsそしてReactを改めてイチから選ぶ
ypresto
10
4.1k
ユニットテストに対する考え方の変遷 / Everyone should watch his live coding
mdstoy
0
110
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
331
21k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
Automating Front-end Workflow
addyosmani
1371
200k
YesSQL, Process and Tooling at Scale
rocio
173
14k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
Building an army of robots
kneath
306
46k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Context Engineering - Making Every Token Count
addyosmani
4
160
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Facilitating Awesome Meetings
lara
56
6.6k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
950
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