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
DevinでAI AWSエンジニア製造計画 序章 〜CDKを添えて〜/devin-load-to-aws-engineer
tomoki10
0
180
目標と時間軸 〜ベイビーステップでケイパビリティを高めよう〜
kakehashi
PRO
3
300
Share my, our lessons from the road to re:Invent
naospon
0
150
Ruby on Railsで持続可能な開発を行うために取り組んでいること
am1157154
3
160
What's new in Go 1.24?
ciarana
1
110
スキルだけでは満たせない、 “組織全体に”なじむオンボーディング/Onboarding that fits “throughout the organization” and cannot be satisfied by skills alone
bitkey
0
190
設計を積み重ねてシステムを刷新する
sansantech
PRO
0
180
AWSアカウントのセキュリティ自動化、どこまで進める? 最適な設計と実践ポイント
yuobayashi
7
850
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
19k
日経のデータベース事業とElasticsearch
hinatades
PRO
0
250
手を動かしてレベルアップしよう!
maruto
0
230
偏光画像処理ライブラリを作った話
elerac
1
180
Featured
See All Featured
For a Future-Friendly Web
brad_frost
176
9.6k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.2k
Visualization
eitanlees
146
15k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
650
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Designing for Performance
lara
604
68k
Building Your Own Lightsaber
phodgson
104
6.2k
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