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
デザインシステムが必須の時代に
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
2
240
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
350
Removing Corepack
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
9
2k
JavaScript Runtime とはなにか
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
15
3.1k
Strip Types と Storage
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
4
520
Module Harmony について
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
4
1.9k
LTのやり方
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
16
3k

Other Decks in Programming

See All in Programming
AI時代の仕事技芸論〜ソフトウェア開発で「遊ぶように働く」職人的熟達のすすめ（スクフェス仙台 2026バージョン）
Avatar for Yoshihito Kuranuki / 倉貫義人 kuranuki
0
660
気圧・高度・GPSを記録&可視化するアプリ「Koudo」を作った話
Avatar for Hajime Kato hjmkth
1
360
関数型プログラミングのメリットって何だろう？
Avatar for わんこ(Wanko_IT) wanko_it
0
180
Prismを使った型安全な暗号化_関数型まつり2026
Avatar for _fhhmm _fhhmm
0
140
Embedded SREと共に達成した会員管理システムのAWS移行 - SRE NEXT 2026 ランチスポンサーセッション
Avatar for ニフティ株式会社 niftycorp
PRO
1
2.7k
Welcome to the "Parametricity" 🏙️ − Generic だけど Specific な世界 −
Avatar for TAKASE Kazuyuki guvalif
PRO
1
170
琵琶湖の水は止められてもNet--HTTPのリトライは止められない / You might be able to stop the water flow of Lake Biwa but you can't stop Net::HTTP retries
Avatar for luccafort luccafort
PRO
0
400
「正の参照」と 「負の導出」で組む ハーネスエンジニアリング
Avatar for Masahiro Watanabe cottpan
1
140
技術記事、 専門家としてのプログラマ、 言語化
Avatar for Koutarou Chikuba mizchi
14
7.5k
PHPだって関数型したい 〜できること、できないこと〜 / fp-in-php
Avatar for jsoizo jsoizo
0
230
20260623_Loop Engineeringで自分の分身の問い合わせBotを作る
Avatar for ryugen04 ryugen04
0
220
音楽のための関数型プログラミング言語mimiumにおける多段階計算の活用
Avatar for Tomoya Matsuura tomoyanonymous
1
340

Featured

See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
201
75k
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
390
AI: The stuff that nobody shows you
Avatar for John Nunemaker jnunemaker
PRO
8
830
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
52k
sira's awesome portfolio website redesign presentation
Avatar for ElsiraPls elsirapls
0
300
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
356
21k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
281
24k
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
1
230
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
620
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
2
730
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k

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