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
390
サーバーレスでAPIを提供する際のアプリケーション"以外"の話 / Talk about Serverless Other than Application
shimpeiws
0
710
🏄♂️ Scrum Development beyond the sea 🏄♂️
shimpeiws
3
410
Webサービスの初期開発とマイクロサービス・BFF
shimpeiws
20
13k
もう一度JSON Schemaの話をしよう ~ Form / Validation / View ~
shimpeiws
2
3.1k
サーバサイドレンダリング、してますか?
shimpeiws
11
6.6k
Wantedlyでの React + Reduxの導入 & 展開
shimpeiws
4
710
共通Reactコンポーネントを作ろう!!!
shimpeiws
4
2.3k
WantedlyにReact + Reduxを導入した話
shimpeiws
17
45k
Other Decks in Technology
See All in Technology
【CEDEC2025】大規模言語モデルを活用したゲーム内会話パートのスクリプト作成支援への取り組み
cygames
PRO
1
420
ファインディにおける Dataform ブランチ戦略
hiracky16
0
220
Turn Your Community into a Fundraising Catalyst for Black Philanthropy Month
auctria
PRO
0
210
複数のGemini CLIが同時開発する狂気 - Jujutsuが実現するAIエージェント協調の新世界
gunta
13
3.8k
株式会社島津製作所_研究開発(集団協業と知的生産)の現場を支える、OSS知識基盤システムの導入
akahane92
1
1.3k
私とAWSとの関わりの歩み~意志あるところに道は開けるかも?~
nagisa53
1
140
AI エンジニアの立場からみた、AI コーディング時代の開発の品質向上の取り組みと妄想
soh9834
8
600
Jitera Company Deck / JP
jitera
0
280
モバイルゲームの開発を支える基盤の歩み ~再現性のある開発ラインを量産する秘訣~
qualiarts
0
760
AI駆動開発 with MixLeap Study【大阪支部 #3】
lycorptech_jp
PRO
0
270
FAST導入1年間のふりかえり〜現実を直視し、さらなる進化を求めて〜 / Review of the first year of FAST implementation
wooootack
1
200
東京海上日動におけるセキュアな開発プロセスの取り組み
miyabit
0
200
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
54
11k
What's in a price? How to price your products and services
michaelherold
246
12k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Designing for Performance
lara
610
69k
Navigating Team Friction
lara
187
15k
Speed Design
sergeychernyshev
32
1k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
GraphQLとの向き合い方2022年版
quramy
49
14k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
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