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
15k
17

Backends For Frontends (AWS Dev Day)

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

Avatar for Yosuke Furukawa

Yosuke Furukawa PRO

November 02, 2018

More Decks by Yosuke Furukawa

See All by Yosuke Furukawa
jsmini JavaScript Engine を作ってみた話
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
0
300
デザインシステムが必須の時代に
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
2
250
Node.js, Deno, Bun 最新動向とその所感について
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
10
5.3k
Welcome JSConf.jp 2024
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
1
4.8k
tc39 x jsconf.jp Panel Discussion 2024
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
0
360
Removing Corepack
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
9
2k
JavaScript Runtime とはなにか
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
15
3.2k
Strip Types と Storage
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
4
520
Module Harmony について
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
4
1.9k

Other Decks in Programming

See All in Programming
変わらないものが、変わるものを決める — 意図駆動開発 × イベントソーシング × イミュータブル | What Doesn't Change Decides What Can — IDD × Event Sourcing × Immutability
Avatar for Tomohisa Takaoka tomohisa
0
1.4k
関東Kaggler会_NVIDIA_Nemotron_コンペ_振り返り
Avatar for rick rick_ds
0
510
S3 を使うアプリケーションをローカル完結で動かすことに全力を注いでみた / Running S3 Apps Offline
Avatar for Daisuke Garaike contour_gara
0
410
Terraform標準の組織で AWS CDKをどう使うか
Avatar for mu7889yoon / Yuta Nakamura mu7889yoon
1
500
JAWS-UG横浜 #102 AWSサ終供養LT会 成仏できない AWS サービスたち 〜本日、三体供養します〜
Avatar for maroon1st maroon1st
0
340
Lean は証明の正しさを確認するためだけのツールって思ってませんか？
Avatar for 井上亜星 inoueasei
1
150
Jindong: Introducing Declarative Haptics in Compose Multiplatform
Avatar for HyunWoo Lee l2hyunwoo
0
100
【やさしく解説 設計編・中級 #6】良いアーキテクチャとは ～ 一本の登り道の、行き先 ～
Avatar for HideyukiKitao panda728
PRO
0
210
freee が目指す データ マネジメント戦略 AI-Ready 時代を支える 攻めのガバナンスとは
Avatar for freee freee
PRO
0
320
作るコストが小さくなった時代 幸せに働くために改めて考えたいこと 〜エンジニアとして価値を出し続けるために注視している二分野〜
Avatar for YuppeEng yuppeeng
0
200
What's New in Android 2026
Avatar for Veronikapj veronikapj
0
250
PHP に部分適用が来るぞ！……ところで何それ？おいしいの？ #phpcon / phpcon-2026
Avatar for shogogg shogogg
0
610

Featured

See All Featured
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
360
30k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
55
12k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
73
41k
New Earth Scene 8
Avatar for Sydney Stone popppiees
3
2.5k
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
450
So, you think you're a good person
Avatar for Per Axbom axbom
PRO
2
2.1k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
19k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
55
8.3k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
640
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
Avatar for Tech SEO Connect techseoconnect
PRO
0
360
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
10k

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Ͱ΋͋Γ·͢Α͏ʹɻ