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

GraphQLを用いたサイトに
おけるパフォーマンス改善
(ECサイトを題材に)/ Improving online shopping site performance which using the GraphQL

nobuhikosawai
December 01, 2019

GraphQLを用いたサイトに
おけるパフォーマンス改善
(ECサイトを題材に)/ Improving online shopping site performance which using the GraphQL

nobuhikosawai

December 01, 2019
Tweet

More Decks by nobuhikosawai

Other Decks in Programming

Transcript

  1. ?B1>App Store&Google Play 1@-2018@10 .2019@9.('702  5<App Annie Google Play

    "2018 3/,8AC :646 App Annie TOP PUBLISHER AWARD 2018  MAUAC *46 12).D9;1* !& =+  $#  % FiNC
  2. ֓ཁʢഎܠʣ w ϦχϡΞʔϧϓϩδΣΫτ w ϦϦʔεͷλΠϛϯάΛ༏ઌ w ֎෦ϕϯμʔΛ׆༻ $44σβΠ ϯʣ w

    ͦͷ݁ՌύϑΥʔϚϯε΍࡞Γ΍ ͢͞Λ٘ਜ਼ʹ͍ͯͨ͠ w ݁ՌϦχϡʔΞϧޙͷϖʔδ͕͔ͳ Γॏ͘ͳͬͨ 7
  3. ຊτʔΫͷର৅ͱ͍ͯ͠Δਓ w (SBQI2-ΛϓϩμΫγϣϯͰಋೖ͠Α͏͔ݕ౼͍ͯ͠Δਓ w ϓϩμΫγϣϯͰಋೖ͍ͯ͠Δ͕ͬ͘͠Γདྷ͍ͯͳ͍ਓ w ͜ͷ͋ͨΓͷ༻ޠʹϐϯͱདྷͳ͍ํ w 0WFSGFUDIJOH w

    'SBHNFOUͱ$PMPDBUJPO w 1FSTJTUFERVFSZ 10 ※ΊͬͪΌΘ͔Δͱ͍͏ํ͸Ή͠Ζ࠙਌ձͱ͔Twitterͱ͔ͰͲ͏͍͏ӡ༻͍ͯ͠Δ͔ڭ͍͖͍͑ͯͨͩͨͰ͢
  4. 16

  5. 17

  6. 22 443
 3FOEFSJOH 4FSWFS 3BJMT HSBQIRMSVCZ ϦχϡʔΞϧ࣌ͷٕज़ߏ੒ 443࣌ 1. /index

    2. /graphql query { content { id } } 3. api response { “content”: { “name”: “hoge” } }
  7. 23 443
 3FOEFSJOH 4FSWFS 3BJMT HSBQIRMSVCZ ϦχϡʔΞϧ࣌ͷٕज़ߏ੒ 443࣌ 1. /index

    2. /graphql query { content { id } } 3. api response { “content”: { “name”: “hoge” } } 4. html/js/css
  8. 25 443
 3FOEFSJOH 4FSWFS 3BJMT HSBQIRMSVCZ ϦχϡʔΞϧ࣌ͷٕज़ߏ੒ $43࣌ 1. /graphql

    query { content { id } } 2. api response { “content”: { “name”: “hoge” } }
  9. ϑϩϯτଆͷվળ w ςΩετѹॖͷ༗ޮԽ w SFOEFSJOH݁ՌͷIUNM w $POUFOU&ODPEJOH͕ޮ͍͓ͯΒ ͣɺH[JQѹॖ͞Ε͍ͯͳ͔ͬͨ $44͸0, 

    w SFTTFU)FBEFS $POUFOU5ZQF UFYU IUNMDIBSTFUVUG` Λ௥Ճ͢Δ͚ͩ w ҙ֎ͱΘ͢Ε͕ͪͳͷͰ஫ҙΛ 38
  10. 43 POST /graphql query FeatureAllQuery { ranking(rankingType: WEEKLY) { id

    … } greetingProducts(count: 3) { id name … } firstPromotionArticle { id … } secondPromotionArticle { id title … } … }
  11. 44 POST /graphql query FeatureAllQuery { ranking(rankingType: WEEKLY) { id

    … } greetingProducts(count: 3) { id name … } firstPromotionArticle { id … } secondPromotionArticle { id title … } … }
  12. αʔόʔଆͷվળ w (SBQI2-ͷαʔόʔଆͷॲཧ w RVFSZͷ֤ϑΟʔϧυ͸SFTPMWFSͱ ݺ͹ΕΔؔ਺Ͱॲཧ͞Ε͍ͯ͘ w 4DBMBSΛฦ͢·Ͱ࣮ߦ͞ΕΔ w SFTPMWFS͕PCKFDUΛฦ͢৔߹͸


    ࠶ؼతʹ࣮ߦ͞ΕΔ w SFGIUUQTNFEJVNDPNQBZQBM FOHJOFFSJOHHSBQIRMSFTPMWFST CFTUQSBDUJDFTDEGECDFG 45 query FeatureAllQuery { greetingProducts(count: 3) { id name … } firstPromotionArticle { id … } secondPromotionArticle { id title … } ranking(rankingType: WEEKLY) { id … } … }
  13. αʔόʔଆͷվળ w (SBQI2-ͷUSBDFͷಡΈղ͖ํ w ·ͣ͸͡ΊʹRVFSZͷQBSTFͱ WBMJEBUJPO͕࣮ߦ͞ΕΔ 47 query FeatureAllQuery {

    ranking(rankingType: WEEKLY) { id products { id name reviews { id rating } } … } greetingProducts(count: 3) { id name … } … } … }
  14. αʔόʔଆͷվળ w (SBQI2-ͷUSBDFͷಡΈղ͖ํ w ͦΕ͕ऴΘΔͱRVFSZʹඥͮ͘ SFTPMWFS্͕͔Β࣮ߦ͞ΕΔ w 2VFSZͷத਎Λ஌Βͳ͍ͱಡΊͳ͍ 48 query

    FeatureAllQuery { ranking(rankingType: WEEKLY) { id products { id name reviews { id rating } } … } greetingProducts(count: 3) { id name … } … } … }
  15. αʔόʔଆͷվળ w (SBQI2-ͷUSBDFͷಡΈղ͖ํ w (SBQI2-͸/ ͷ%#ΞΫηε͕ൃੜ ͕ͪ͠ 49 query FeatureAllQuery

    { ranking(rankingType: WEEKLY) { id products { id name reviews { id rating } } … } greetingProducts(count: 3) { id name … } … } … }
  16. 51

  17. 52

  18. 53

  19. 65

  20. 70

  21. 72

  22. 74

  23. 76

  24. Query/Schemaͷվળ w 'SBHNFOUͱ$PMPDBUJPO w 'SBHNFOUͱ$PNQPOFOUΛಉ͡ ৔ॴͰ؅ཧ͢Δ w 2VFSZ͸֤$PNQPOFOUͰఆٛ͞ Εͨ'SBHNFOU͔Β૊ΈͨͯΔ w

    GFUDIͨ͠σʔλ͕WJFXͰར༻ ͞Ε͍ͯΔ͔Ͳ͏͔͕Ұ໨ྎવ ʹͳΔ 77 "QQ$PNQPOFOU "QQ2VFSZ 1SPEVDU-JTU*UFN #FGPSF "GUFS "QQ$PNQPOFOU "QQ2VFSZ 1SPEVDU-JTU*UFN 1SPEVDU-JTU*UFN GSBHNFOU
  25. ࠓޙͷల๬ w LFZͷొ࿥ w $PNQJMFUJNFQVTI w CVJME࣌ʹొ࿥ w 3VOUJNFQVTI w

    ޙ͔Βಈతʹొ࿥ w DMJFOU༻ͷϥΠϒϥϦ BQPMMPMJOLQFSTJTUFE RVFSZ 90  3VOUJNFQVTI