Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Backends For Frontends (AWS Dev Day)

Avatar for Yosuke Furukawa Yosuke Furukawa PRO
November 02, 2018
Programming
17
15k

Backends For Frontends (AWS Dev Day)

AWS Dev Day で発表した Backends For Frontends の話です。

Avatar for Yosuke Furukawa

Yosuke Furukawa PRO

November 02, 2018
Tweet

More Decks by Yosuke Furukawa

See All by Yosuke Furukawa
デザインシステムが必須の時代に
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
2
180
Node.js, Deno, Bun 最新動向とその所感について
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
10
4.8k
Welcome JSConf.jp 2024
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
1
4.5k
tc39 x jsconf.jp Panel Discussion 2024
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
0
290
Removing Corepack
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
9
1.8k
JavaScript Runtime とはなにか
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
15
3k
Strip Types と Storage
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
4
460
Module Harmony について
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
4
1.8k
LTのやり方
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
16
2.8k

Other Decks in Programming

See All in Programming
ELYZA_Findy AI Engineering Summit登壇資料_AIコーディング時代に「ちゃんと」やること_toB LLMプロダクト開発舞台裏_20251216
Avatar for 株式会社ELYZA elyza
2
1.1k
クラウドに依存しないS3を使った開発術
Avatar for しめさば simesaba80
0
220
メルカリのリーダビリティチームが取り組む、AI時代のスケーラブルな品質文化
Avatar for osari.k cloverrose
2
470
副作用をどこに置くか問題：オブジェクト指向で整理する設計判断ツリー
Avatar for Koya Masuda koxya
1
410
これならできる！個人開発のすゝめ
Avatar for Tsubasa SEKIGUCHI tinykitten
PRO
0
150
LLMで複雑な検索条件アセットから脱却する！！ 生成的検索インタフェースの設計論
Avatar for po3rin po3rin
4
1.1k
脳の「省エネモード」をデバッグする ～System 1（直感）と System 2（論理）の切り替え～
Avatar for HideyukiKitao panda728
PRO
0
130
Giselleで作るAI QAアシスタント 〜 Pull Requestレビューに継続的QAを
Avatar for Tadashi Shigeoka codenote
0
340
MDN Web Docs に日本語翻訳でコントリビュート
Avatar for uutan1108 ohmori_yusuke
0
460
Claude Codeの「Compacting Conversation」を体感50%減！ CLAUDE.md + 8 Skills で挑むコンテキスト管理術
Avatar for Kazuki Murahama kmurahama
1
750
TerraformとStrands AgentsでAmazon Bedrock AgentCoreのSSO認証付きエージェントを量産しよう！
Avatar for neruneruo neruneruo
4
2.4k
React 19でつくる「気持ちいいUI」- 楽観的UIのすすめ
Avatar for Hiroshi Morishige himorishige
11
5.3k

Featured

See All Featured
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
1
1.4k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
Avatar for Katarina Dahlin katarinadahlin
PRO
0
3.4k
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
3.1k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
527
40k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.5k
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
130
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
140
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1371
200k
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
0
400
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
1
270
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k

Transcript

  1. BFF introduction 2018/11/2 @ AWS Dev Day

  2. Twitter: @yosuke_furukawa Github: yosuke-furukawa

  3. None

  4.  /PEFֶԂࡇ։࠵͠·͢ʂʂʂ

  5. !*5Ͱ#''ͷهࣄΛॻ͖·ͨ͠ʂʂʂʂ

  6. BFFͱ͸

  7. Backends For Frontends

  8. Backends For Frontends #SPXTFS #'' .JDSP4FSWJDF .JDSP4FSWJDF .JDSP4FSWJDF • ϑϩϯτΤϯυͷͨΊͷόοΫΤϯυαʔό

  9. Backends For Frontends #SPXTFS #'' .JDSP4FSWJDF .JDSP4FSWJDF .JDSP4FSWJDF ϑϩϯτΤϯυͱόοΫΤϯυʹ෼͚Δɺ ϚΠΫϩαʔϏεΛҙࣝ͢Δ

    • ϑϩϯτΤϯυͷͨΊͷόοΫΤϯυαʔό

  10. Backends For Frontends • Sam Newman ΞʔΩςΫνϟύλʔϯΛఏএ

  11. Backends For Frontends • ֤छΫϥΠΞϯτ͝ͱʹઐ༻ͷΞμϓλʔΛ ༻ҙ͢Δ

  12. BFF͕΍Δ͜ͱ͍͔ͭ͘঺հ

  13. BFF use-cases (1) • API Aggregation #'' 6TFS .JDSP4FSWJDF "SUJDMF

    .JDSP4FSWJDF $PNNFOU .JDSP4FSWJDF 3FRVFTUUPCMPH QBHF 3FRVFTUUPTPNFЖ4FSWJDFT DPODVSSFOUMZ $PODBU&WFSZ+40/ 3FTQPOTF

  14. • Session Management BFF use-cases (2) #'' 3FRVFTUXJUI TFTTJPOJE (FU5PLFOGSPN

    4FTTJPO 4FTTJPO4UPSF JE VTFSOBNF UPLFO 0UIFS"1* 3FRVFTUXJUIUPLFO

  15. • (Server Side) Rendering BFF use-cases (3) #'' 1BHF3FRVFTU $PNQPOFOUT

    5FNQMBUFT 'FUDI%BUB "1* 3FOEFS)5.-

  16. • File Upload BFF use-cases (4) #'' 'JMF$IVOLFE 6QMPBE "1*

    4UPSF'JMF 'JMF4UPSBHF 4 (FU'JMF1BUI "1*3FRVFTUXJUI 'JMF1BUI

  17. • WebSocket/LongPolling/SSE BFF use-cases (5) #'' 8FC4PDLFU "1* 4VC4DSJCF .FTTBHF2VFVF

    1VCMJTI

  18. BFF CaseStudy: Twitter

  19. BFF CaseStudy: Twitter

  20. Mobile Twitter Stack #SPXTFS #'' /PEFKT &YQSFTT3FBDU .JDSP4FSWJDF 4DBMB .JDSP4FSWJDF

    4DBMB .JDSP4FSWJDF 4DBMB

  21. BFF CaseStudy: Twitter • ࠷ॳ͸ Monolith • ్த͔ΒScalaԽͯ͠MicroServices • ࠷ۙ͸Mobileͷϑϩϯτ͚ͩ͸

    BFF ʹ

  22. BFF CaseStudy: Netflix

  23. http://techblog.netflix.com/2012/07/embracing-differences-inside-netflix.html

  24. Many Devices : Many APIs

  25. Many Devices : Many APIs

  26. BFF CaseStudy: Netflix • ଟछଟ༷ͳσόΠεʹରͯ͠ҰݸҰݸʹBFF ʢClient Adapter CodeʣΛஔ͘ • σόΠεؒͷҧ͍ΛBFFͰٵऩ͢Δ

    • OSFA - One Size Fit All - ͳ REST API Λ࡞Β ͣʹ֤σόΠεຖʹ࠷దԽ͢Δͱ͍͏ߟ͑ํ

  27. BFF CaseStudy: RecruitTech

  28. Recruit Technologies • BFFΛNode.js (Express) Ͱߏங͍ͯ͠Δ • API Aggregation •

    Server Side Rendering (React) • Session Management • File Upload • WebSocket

  29. Recruit Technologies • Example: booking table

  30. Recruit Technologies • Example: raico #SPXTFS #'' #BDLFOE"1* 4FTTJPO4UPSF 3FEJT

    /'4 )5518FC4PDLFU 4FTTJPO .BOBHFNFOU 'JMF4UPSBHF 3&45"1* 4FSWFS4JEF 3FOEFSJOH

  31. BFFಋೖ͢Δͱ͖ ಋೖ͠ͳ͍ͱ͖

  32. BFFΛಋೖ͢Δ࣌ • ϑϩϯτΤϯυͱόοΫΤϯυͰ։ൃऀΛ෼ۀͤ͞Δ ͜ͱͰૄ݁߹ʹͯ͠ࠓޙͷΤϯϋϯε଎౓Λ্͍͛ͨ • ઌఔ͋͛ͨϢʔεέʔεͷΑ͏ͳॲཧ͕ඞཁʢྫɿ SEO ͷͨΊʹαʔόαΠυϨϯμϦϯά͕ඞཁɺϦΞϧλ ΠϜΞϓϦͳͷͰWebSocket͕ඞཁ etcʣ

    • ϨΨγʔͳγεςϜ͕طʹଘࡏ͓ͯ͠ΓɺͦΕΛ্ʹ ͔Ϳͤͯஈ֊తʹϦΞʔΩςΫτ͍ͨ͠

  33. ٯʹBFFΛಋೖ͠ͳ͍࣌ • ϑϩϯτͱόοΫ྆ํΛ։ൃͰ͖Δਓ͕ଟ͍ʢϑϧ ελοΫΤϯδχΞ͕ଟ͍ʣ • ϞϊϦγοΫʹαʔϏε։ൃ্ͨ͠ͰϚʔέοτΠ ϯΛ଎Ί͍ͨ • ্ड़ͨ͠Ϣʔεέʔε͕ٻΊΒΕΔ͜ͱ͕গͳ͍ (ྫɿSEOཁΒͳ͍ɺϦΞϧλΠϜͳॲཧ͕ͳ͍

    etc)

  34. BFFΞϯνύλʔϯ

  35. None

  36. ௒༁όοΫΤϯυͱϑϩϯτΤϯυΛ෼͚Δࣄͦͷ΋ ͷ͕Ξϯνύλʔϯ

  37. BFFΛ2೥࣮ؒફͯ͠ ࣮ࡍʹؕͬͨ
 ΞϯνύλʔϯΛ঺հ

  38. BFF ͸ϑϩϯτΤϯυͱόο ΫΤϯυͷՍ͚ڮͰ͋Γɺ ૊৫ͷ઀߹఺

  39. BFFΞϯνύλʔϯ ͦͷ1 εύʔείϛϡχέʔγϣϯ

  40. BFF͸ΞʔΩςΫνϟಉ͕࢜ ૄʹͳΔ͕ɺ ίϛϡχέʔγϣϯ·Ͱૄ(sparse) ʹͳͬͯ͠·͏έʔε

  41. None

  42. ྫ1: ςʔϒϧؙݟ͑ API JE OBNF BHF    

  43. #'' .JDSP4FSWJDF .JDSP4FSWJDF .JDSP4FSWJDF \ pSTU@OBNFGPP  MBTU@OBNFCBS  SPMFIPHF

     SPMFGVHB ^

  44. #'' .JDSP4FSWJDF .JDSP4FSWJDF .JDSP4FSWJDF \ pSTU@OBNFGPP  MBTU@OBNFCBS  SPMFIPHF

     SPMFGVHB ^ %#ͷεΩʔϚ͕ಁ͚ͯݟ͑Δʂʂʂʂ

  45. SELECTจ͕ಁ͚ͯݟ͑Δɻ ୯७ͳέʔεͳΒͦΕͰ΋ྑ͍͕ɺ snake => camelͷม׵΍JOIN͠ ͨεΩʔϚ͕ͦͷ··ݟ͑ͯΔͷ͸ NGɻɻɻ

  46. ྫ2: N+1 Query API

  47. #'' .JDSP4FSWJDF .JDSP4FSWJDF .JDSP4FSWJDF (&5VTFST RGPP JEͷϦετ͚ͩฦΔ \ JE< 

      > ^

  48. #'' .JDSP4FSWJDF .JDSP4FSWJDF .JDSP4FSWJDF JE͔ΒৄࡉΛऔΔʢ˞/ ճ"1*Λ࣮ߦ͍ͯ͠Δɻʣ (&5VTFST (&5VTFST (&5VTFST (&5VTFST

    (&5VTFST

  49. #'' .JDSP4FSWJDF .JDSP4FSWJDF .JDSP4FSWJDF JET<    > /ճΫΤϦʔ౤͛ͯΔɻɻɻɻ

    VTFS\ JE OBNFCBS ^ VTFS\ JE OBNFCBS ^ VTFS\ JE OBNFCBS ^ VTFS\ JE OBNFCBS ^ VTFS\ JE OBNFCBS ^ VTFS\ JE OBNFGPP ^

  50. ϚΠΫϩαʔϏε͔ͩΒͱ͍ͬͯ APIΛ؆ૉʹ͍͍ͯ͠༁͡Όͳ͍ɻ ݁Ռ:1ϖʔδදࣔ͢Δͷʹ3secͱ ͔͔͔Δ

  51. શ෦ίϛϡχέʔγϣϯΛͪΌ Μͱऔͬͯͳ͍͔Βى͖Δ • όοΫΤϯυ͸BFF͔ͩΒͱݴͬͯϏδωεϩ δοΫ͸αʔόαΠυʹ͋ΔͷΛ๨Εͳ͍Ͱཉ͠ ͍ʢαϘΒͳ͍Ͱ͘Εʣ • ϑϩϯτΤϯυ͸Ͳ͏͍͏API͕΄͍͠ͷ͔ͪΌ ΜͱόοΫΤϯυʹཁٻ͢ΔΑ͏ʹͯ͠ཉ͍͠ ʢΩϟϝϧ͕ཉ͍͠ͱ͔͜͜͸arrayͰ΄͍͠ͱ͔

    ͸ͪ͜ΒଆͰͪΌΜͱݴ͏΂͖ʣ

  52. શ෦ίϛϡχέʔγϣϯΛͪΌ Μͱऔͬͯͳ͍͔Βى͖Δ • όοΫΤϯυ͸BFF͔ͩΒͱݴͬͯϏδωεϩ δοΫ͸αʔόαΠυʹ͋ΔͷΛ๨Εͳ͍Ͱ ཉ͍͠ • ϑϩϯτΤϯυ͸Ͳ͏͍͏API͕΄͍͠ͷ͔ ͪΌΜͱόοΫΤϯυʹཁٻ͢ΔΑ͏ʹͯ͠ ཉ͍͠

    ΞʔΩςΫνϟ͸ૄͰ΋ؔ܎͸ର౳Ͱ͋Γɺ ίϛϡχέʔγϣϯ͸ີͰͳ͚Ε͹ͳΒͳ͍

  53. ๻Β͸Ͳ͏ͯ͠Δ͔

  54. ๻Β͸Ͳ͏ͯ͠Δ͔

  55. ϑϩϯτΤϯυͱόοΫΤϯ υͷର࿩͢ΔͨΊͷϞοΫαʔ όΛ࡞Γɺ౎౓ೝࣝᴥᴪΛੜ ·ͳ͍Α͏ʹ͍ͯ͘͠ɻ

  56. None

  57. ϑϩϯτΤϯυͱόοΫΤϯ υͷର࿩͢ΔͨΊͷϞοΫαʔ όΛ࡞Γɺ౎౓ೝࣝᴥᴪΛੜ ·ͳ͍Α͏ʹ͍ͯ͘͠ɻ

  58. DEMO

  59. ͞Βʹ࠷ۙͰ͸ Mock Λॻ͍ ͨΒ Swagger Λੜ੒͢Δࣄ ͰAPI docs΋ࣗಈੜ੒͢Δ࢓ ૊ΈΛ։ൃத

  60. None

  61. DEMO

  62. BFFΞϯνύλʔϯ ͦͷ2 ΠϯϑϥϨεϙϯγϏϦςΟ

  63. BFF͸ϑϩϯτΤϯυͷͨΊͷαʔ όͳͷʹɺΠϯϑϥɾӡ༻͸όοΫ Τϯυʹԡ͠෇͚ͯ͠·͏έʔε

  64. Πϯϑϥɾӡ༻ #SPXTFS #'' .JDSP4FSWJDF .JDSP4FSWJDF .JDSP4FSWJDF ͦ΋ͦ΋͜ͷαʔό͸୭͕ ݟΔͷʁϑϩϯτʁόοΫ Τϯυʁ

  65. Πϯϑϥɾӡ༻ #SPXTFS #'' .JDSP4FSWJDF .JDSP4FSWJDF .JDSP4FSWJDF ৽͍͠΋ͷΛ࡞Δͷʹӡ༻ ͸όοΫΤϯυ೚ͤʁ

  66. A. શһ

  67. Πϯϑϥɾӡ༻ • ӡ༻ͳΜͯͲ͔͚͕ͬͪͩ͢ΔΑ͏ͳ΋Μ͡Όͳ ͍ • ϑϩϯτ͸։ൃ͢ΔͳΒαʔϏεͷো֐ʹ͸හײ ʹͳΔ΂͖ͩ͠ɺམͪͨΓͨ͠ΒݟΕΔΑ͏ʹͳ Δ΂͖ • όοΫΤϯυ͸ϑϩϯτͷίʔυ͕Θ͔Βͳ͍͔

    Βͱݴͬͯܟԕͪ͠Ό͍͚ͳ͍

  68. Πϯϑϥɾӡ༻ • ӡ༻ͳΜͯͲ͔͚͕ͬͪͩ͢ΔΑ͏ͳ΋Μ͡Όͳ ͍ • ϑϩϯτ͸։ൃ͢ΔͳΒαʔϏεͷো֐ʹ͸හײ ʹͳΔ΂͖ͩ͠ɺམͪͨΓͨ͠ΒݟΕΔΑ͏ʹͳ Δ΂͖ • όοΫΤϯυ͸ϑϩϯτͷίʔυ͕Θ͔Βͳ͍͔

    Βͱݴͬͯܟԕͪ͠Ό͍͚ͳ͍ ϑϩϯτΤϯυͱόοΫΤϯυʹ෼͚͔ͨΒͱݴͬͯαʔ Ϗε͸ҰͭɻαʔϏεͷ඼࣭Λ্͛Δͷ͸શһ໺ٿ

  69. BFFΞϯνύλʔϯ ͦͷ3 ϏοάόϯδϣΠϯτ

  70. ࠷ޙͷ࠷ޙʹͳ͔ͬͯΒόοΫΤϯ υͱϑϩϯτΤϯυΛ݁߹͢Δͱ େମࢮ͵

  71. Πϯϑϥɾӡ༻ #SPXTFS #'' .JDSP4FSWJDF .JDSP4FSWJDF .JDSP4FSWJDF ϑϩϯτΤϯυ͸NPDL"1* Ͱಈ͍ͯΔΑ͏ʹͳ͖ͬͯ ͨɻ

  72. Πϯϑϥɾӡ༻ #SPXTFS #'' .JDSP4FSWJDF .JDSP4FSWJDF .JDSP4FSWJDF όοΫΤϯυ΋૝ఆ͍ͯ͠ ΔϦΫΤετ͸ύε͢ΔΑ ͏ʹͳͬͨɻ

  73. ظؒ΋͋ͱͪΐͬͱɺ࠷ޙͷ࠷ޙʹ ݁߹ͩʂʂʂʂ

  74. ʊਓਓਓਓਓਓʊ ʼɹ౰વͷࢮɹʻ ʉ^Y^Y^Y^Y^ʉ

  75. ϏοάόϯδϣΠϯτ • ઈରʹAPIͷϦΫΤετɾϨεϙϯε͸૝ఆ௨ Γ͡Όͳ͍ɻ • ࣮֬ʹ૝ఆ֎ͷ໰୊͸ى͖Δɻ • ϦΫΤετͷܕ͕string, integer, Ϩεϙϯεͷ

    status code͕ҧ͏ etc

  76. ๻Β͸Ͳ͏ͯ͠Δ͔

  77. + Proxy

  78. ग़དྷ͍ͯΔͱ͜Ζ͔Βঃʑʹ ຊ෺ʹ͍ͯ͘͠ #SPXTFS #'' 3FBM.JDSP4FSWJDF .PDL 'BLF .PDL 'BLF

  79. ग़དྷ͍ͯΔͱ͜Ζ͔Βঃʑʹ ຊ෺ʹ͍ͯ͘͠ #SPXTFS #'' 3FBM.JDSP4FSWJDF .PDL 'BLF .PDL 'BLF ͋Δఔ౓ϑϩϯτઌߦͯ͠ɺը໘Λঃʑʹຊ෺ʹ͍ͯ͠

    ͘ελΠϧɻͦ͏͢Δͱاըʹ΋ಈ͖Λ఻͑΍͍͢

  80. ·ͱΊ

  81. ·ͱΊ • BFFͱ͸ • Backends For Frontends • ϑϩϯτΤϯυͷͨΊͷαʔό •

    ར༻ྫ: API ू໿, Server Side Rendering, WebSocket, File Upload, Session Management

  82. ·ͱΊ • BFF ʹ͸Ξϯνύλʔϯ΋͋Δ • εύʔείϛϡχέʔγϣϯʢίϛϡχέʔγϣϯ͕ૄ͔ʹͳΔέʔεʣ • ΞʔΩςΫνϟ͸ૄʹͯ͠΋Α͍͕ɺίϛϡχέʔγϣϯ͸ૄʹͯ͠͸ ͍͚ͳ͍ •

    ΠϯϑϥϨεϙϯγϏϦςΟʢΠϯϑϥͷ੹຿Λ࣋ͭʣ • ΠϯϑϥΛݟΔͷ͸όοΫΤϯυ͚ͩʹ͋ΒͣɺશһͰݟΔඞཁ͕͋Δ • ϏοάόϯδϣΠϯτʢ࠷ޙͷ࠷ޙʹͳ͔ͬͯΒ݁߹ςετʣ • ࠷ޙͷ࠷ޙʹ݁߹ɻͰ͸ͳ͘ग़དྷ্͕Γ࣍ୈɺঃʑʹ݁߹͍ͯ͘͠

  83. ·ͱΊ • DevOps͕Dev/Ops͡Όͳͯ͘DevὑOpsͷΑ ͏ʹ • ϑϩϯτΤϯυ/όοΫΤϯυͰ͸ͳ͘ɺ • ϑϩϯτΤϯυὑόοΫΤϯυ • BFF

    ͸ Backend For Frontend Ͱ͸ͳ͘ɺ

  84. ·ͱΊ • DevOps͕Dev/Ops͡Όͳͯ͘DevὑOpsͷΑ ͏ʹ • ϑϩϯτΤϯυ/όοΫΤϯυͰ͸ͳ͘ɺ • ϑϩϯτΤϯυὑόοΫΤϯυ • BFF

    ͸ Backend For Frontend Ͱ͸ͳ͘ɺ #FTU'SJFOE'PSFWFSͰ΋͋Γ·͢Α͏ʹɻ