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
370
サーバーレスでAPIを提供する際のアプリケーション"以外"の話 / Talk about Serverless Other than Application
shimpeiws
0
700
🏄♂️ 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
44k
Other Decks in Technology
See All in Technology
Observability в PHP без боли. Олег Мифле, тимлид Altenar
lamodatech
0
290
25分で解説する「最小権限の原則」を実現するための AWS「ポリシー」大全
opelab
9
2.2k
実践! AIエージェント導入記
1mono2prod
0
140
Amazon ECS & AWS Fargate 運用アーキテクチャ2025 / Amazon ECS and AWS Fargate Ops Architecture 2025
iselegant
16
4.6k
ユーザーのプロフィールデータを活用した推薦精度向上の取り組み
yudai00
0
490
プロダクトエンジニアリング組織への歩み、その現在地 / Our journey to becoming a product engineering organization
hiro_torii
0
110
「Chatwork」の認証基盤の移行とログ活用によるプロダクト改善
kubell_hr
1
100
白金鉱業Meetup_Vol.19_PoCはデモで語れ!顧客の本音とインサイトを引き出すソリューション構築
brainpadpr
2
490
登壇ネタの見つけ方 / How to find talk topics
pinkumohikan
3
300
Microsoft Build 2025 技術/製品動向 for Microsoft Startup Tech Community
torumakabe
1
210
UIテスト自動化サポート- Testbed for XCUIAutomation practice
notoroid
0
110
OAuth/OpenID Connectで実現するMCPのセキュアなアクセス管理
kuralab
5
880
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Agile that works and the tools we love
rasmusluckow
329
21k
The Cult of Friendly URLs
andyhume
79
6.4k
Adopting Sorbet at Scale
ufuk
77
9.4k
Building Applications with DynamoDB
mza
95
6.5k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
How GitHub (no longer) Works
holman
314
140k
Raft: Consensus for Rubyists
vanstee
140
7k
Automating Front-end Workflow
addyosmani
1370
200k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
Designing for Performance
lara
609
69k
A better future with KSS
kneath
239
17k
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