Ionic and GraphQL - Speaker Deck

Ionic and GraphQL

by Yosuke Kurami

Slide 1

Slide 1 text

Ionic and GraphQL 2017.08.06 by Yosuke Kurami

Slide 2

Slide 2 text

Today’s theme

Slide 3

Slide 3 text

*POJDυॳ৺ऀͷԶ͕Ͳ͏ʹ͔ *POJD(SBQI2-BQQ࡞ͬͯΈͨ࿩

Slide 4

Slide 4 text

EJTDMBJNFS ΄΅(SBQI2-ͷ࿩͔͠͠·ͤΜ

Slide 5

Slide 5 text

Agenda • Demonstration • Introduction to GraphQL • How to integrate GraphQL into Ionic

Slide 6

Slide 6 text

Demonstration

Slide 7

Slide 7 text

App is here: https://quramy.github.io/ionic-gql- messenger/index.html or Ionic view APP ID: 59554521

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

Do you know GraphQL ?

Slide 10

Slide 10 text

What’s GraphQL w 'BDFCPPL͕ఏএ͍ͯ͠Δ2VFSZ-BOHVBHF w ೥ʹެ։ɻҰԠ3'$ͷ૲Ҋ΋͋Δ w ࢀর࣮૷͸+BWB4DSJQUଞݴޠϥΠϒϥϦ࣮૷΋ଟ͍ w (JU)VC͕ඪ४ WFSTJPO "1*ͱͯ͠࠾༻ ݄ʙ w ҰํͰɺΠϚΠνྲྀߦͬͯͳ͍ٙ࿭΋ʜ

Slide 11

Slide 11 text

Features of GraphQL ୯ҰΤϯυϙΠϯτ %FNBOE%SJWFO"SDIJUFDUVSF #VJMUJOͳܕͱεΩʔϚػߏ

Slide 12

Slide 12 text

1. Single Endpoint w ྫ(JU)VCW"1* w IUUQTBQJHJUIVCDPNHSBQIRMͷΈ w )551ϝιου͸1045 w CPEZ BQQMJDBUJPOKTPO ͷqueryͰΫΤϦΛදݱ

Slide 13

Slide 13 text

1. Single Endpoint (SBQI2-RVFSZFYBNQMF query RepoSummary { repository(name: "ionic", owner: "ionic-team") { createdAt, issues(states: OPEN) { totalCount } stargazers { totalCount } watchers { totalCount } } } https://developer.github.com/v4/explorer/

Slide 14

Slide 14 text

1. Single Endpoint w &OEQPJOU͕ఏڙ͢Δ"1*ύλʔϯ͸छྨ w 2VFSZ͍ΘΏΔ(&5૬౰҆શ͔ͭႈ౳ͳૢ࡞Λެ։ w .VUBUJPO͍ΘΏΔ10451"5$)165%&-&5&૬౰  ഁյతมߋΛͱ΋ͳ͏ૢ࡞Λެ։͢Δ w 4VCTDSJQUJPO͍ΘΏΔ1VC4VCʹ͓͚Δߪಡʹ૬౰  ࣮૷ʹ͸4FSWFS4JEF1VTI͕ඞཁͱͳΔ  ݱঢ়͸XTͰUSBOTQPSU͢Δ͜ͱ͕ଟ͍

Slide 15

Slide 15 text

2. Demand Driven Architecture w ʮཉ͍͠৘ใΛཉ͍͠෼͚ͩʯཁٻͰ͖Δ࢓૊Έͷ͜ͱ w ઌͷ(JU)VCͷྫͰ͋Ε͹ɺ(SBQI2-Ͱ͸Ұ౓ʹ 3FQPTJUPSZͱͦͷJTTVFͷৄࡉΛऔಘ͢Δ͜ͱ΋Ͱ͖Δ w ରͯ͠3&45΍40"1ͷΑ͏ʹ3FTQPOTFͷܕ͕ݻఆ͞ΕΔ ܗࣜͷ࢓૊͸4VQQMZ%SJWFO"SDIJUFDUVSFͱݺͿ w 42-41"32-+40/(SBQI 'BMDPS FUD https://qconnewyork.com/ny2015/system/ﬁles/presentation-slides/ qcon_dda_2015_iwork09_boguta_nolen.pdf

Slide 16

Slide 16 text

Mobile and DDA w ʮը໘ʹඞཁͳ৘ใΛඞཁͳλΠϛϯάͰཁٻͰ͖Δʯ  ͱ͍͏͜ͱ͸ɺϦΫΤετճ਺ଳҬཁٻ͕γϏΞͳαʔ ϏεͰద༻ͯͦ͜͠༏Ґੑ͕ൃشͰ͖Δ w ઀ଓ؀ڥ͕ܙ·Ε͍ͯΔ1$ΞϓϦΑΓ΋ɺ(ͰઓΘͶ͹ ͳΒͳ͍Α͏ͳϞόΠϧΞϓϦʹͦ͜ɺ(SBQI2-͸޲͍ͯ ͍ΔͷͰ͸ɻ

Slide 17

Slide 17 text

3. Schema System w (SBQI2-ͷΤϯυϙΠϯτ͸ެ։͢ΔσʔλεΩʔϚΛఆٛ ͢Δඞཁ͕͋Δ w (SBQI2-࢓༷ࣗମʹܕػߏ͕૊Έࠐ·Ε͍ͯΔͨΊɺ  ίʔυੜ੒΍3PVUJOHϥΠϒϥϦ͕ߏங͠΍͍͢ type Repository implements Node { id: ID! number: Number! createdAt: DateTime! issues: [Issue] : }

Slide 18

Slide 18 text

3. Schema System

Slide 19

Slide 19 text

Caveat w όοΫΤϯυͷ࣮૷ߟྀ఺͕ࢁͷΑ͏ʹ͋Δ  /໰୊ ηΩϡϦςΟ FUD w ϑΟʔϧυΛͭͭࢦఆ͢Δ෼ɺϑϩϯτͷ࣮૷ෛՙ΋ߴ ͘ͳΓ͔Ͷͳ͍ 3&45Ͱ͸ΤϯυϙΠϯτΛࢦఆ͢Δ͚ͩ ͰࡁΜͰ͍ͨ w 3&45Ͱഓͬͨϊ΢ϋ΢΍πʔϧ͕׆͔ͤͳ͍  ΤϥʔεςʔλεΛͲ͏ઃܭ͢Δ͔ʁ౳

Slide 20

Slide 20 text

Pros / Cons w 1SPT w "1*ʹੑೳͱϦιʔεઃܭͷ྆໘Λ୲อͰ͖Δ w ϚϧνΫϥΠΞϯτ 1$XFC.PCJMF ରԠ͠΍͍͢ w ܕεΩʔϚʹΑΓɺपลπʔϧΛ࡞Γ΍͍͢ w $POT w όοΫΤϯυϑϩϯτΤϯυͱ΋ʹ࣮૷ෛՙߴΊ

Slide 21

Slide 21 text

How to integrate GraphQL into Ionic Apps

Slide 22

Slide 22 text

Client Libraries w 'BDFCPPL3FMBZ w 3FMBZ2-౳ɺಠ੍ࣗ໿͕ڧ͍ ΄΅ϑϨʔϜϫʔΫ w 3FBDU3FBDUOBUJWF #BCFMͱͷ૬ੑ͸ྑ͍ w "QPMMP w ରԠݴޠ'84XJGU+BWB3FBDU"OHVMBS w ػೳ͸ബΊɻ୞ͷ$MJFOUϥΠϒϥϦ

Slide 23

Slide 23 text

Backend as a Service w αΫοͱϞόΠϧ։ൃΛ͍ͨ͠৔߹ͷબ୒ࢶ w ͪͳΈʹ"OHVMBSք۾Ͱ͸'JSFCBTF͕ڧ͍ w 'JSFCBTF'VODUJPOTͰ(SBQI2-TFSWFͨ͠ྫ΋ w ୯ҰΤϯυϙΠϯτͷ෼ɺϦιʔεϚοϐϯάָ͕ͳͷͰɺ 4FSWFSMFTT"SDIJUFDUVSF(SBQI2-͸݁ߏ؆୯

Slide 24

Slide 24 text

GraphQL BaaS w 3FJOEFY IUUQTBDDPVOUTSFJOEFYJP   (SBQI2-#BB4૲෼͚తଘࡏɻ࠷ۙͷ׆ಈ͸΄΅θϩʜ w HSBQIDPPM IUUQTDPOTPMFHSBQIDPPM   "84্ʹߏங͞Εͨ#BB4  5PLZP3FHJPO BQOPSUIFBTU ΋બ୒Մೳ w TDBQIPME IUUQTTDBQIPMEJPBQQT   ൺֱత࠷ۙʹϩʔϯν͞Εͨ#BB4"84͔Ͳ͏͔͸ෆ໌ͩ ͚Ͳɺݱঢ়બ୒ՄೳSFHJPO͸VTXFTUPSFVSPQFͷΈ

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

It’s time to dev!

Slide 27

Slide 27 text

Type Propagation w HSBQIDPPM  4DIFNBΛ+40/ܗࣜͰΤΫεϙʔτ w UTHSBQIRMQMVHJO ࣗ࡞   54-BOHVBHF4FSWJDFͰ4DIFNBKTPOΛಡΈ͜Ή  ίʔυதͰΫΤϦͷิ׬͕༗ޮʹ w BQPMMPDPEFHFO  5BHHFE5FNQMBUF-JUFSBM಺ͷΫΤϦΛύʔε͠ɺ  54ͷUZQFBOOPUBUJPOΛੜ੒

Slide 28

Slide 28 text

Type Propagation w BQPMMPBOHVMBS  ੜ੒͞ΕͨUZQFΛDMJFOUʹ৯ΘͤΔ͜ͱͰɺ3YKT4USFBN ΛಘΔ w !BOHVMBSDPSF  BTZODQJQFʹΑΓTUSFBN͔ΒΫΤϦ݁ՌΛऔΓग़͢ w !BOHVMBSMBOHVBHFTFSWJDF  ΫΤϦ݁Ռ (SBQI2-GSBHNFOU ͷUZQFBOOPUBUJPOΛར ༻ͯ͠ɺ"OHVMBSUFNQMBUFதͰ΋ϓϩύςΟิ׬

Slide 29

Slide 29 text

.ts or .graphql ? w BQPMMPDPEFHFO͸HSBQIRMϑΝΠϧʹهड़͞ΕͨRVFSZ NVUBUJPO͔ΒUZQFBOOPUBUJPOΛੜ੒͢Δ͜ͱ΋Մೳ w ͜ͷ৔߹ HSBQIRMUBHMPBEFSͱ͍͏XFCQBDLMPBEFSΛ ࢖͏ඞཁ͕ੜ͡ΔͨΊɺJPOJDBQQTDSJQUTDPOpH XFCQBDLDPOpHKTʹ௥ه͠·͠ΐ͏

Slide 30

Slide 30 text

GraphQL Result as Observable w BQPMMPBOHVMBSͷRVFSZNVUBUJPOTVCTDSJQUJPO࣮ߦ݁ Ռ͸ɺશͯ0CTFSWBCMFΛฦ٫ const users$ = this.apollo.query({ query: users }) .map(({ data }) => data.allUsers) ; // typeof users$: Observable

Slide 31

Slide 31 text

GraphQL Result as Observable ύζϧ2VFSZ.VUBUJPO4VCTDSJQUJPO͔Βɺ  this.timeline$: ObservableΛ࡞ͬͯΈΑ͏ const latestMessages$: Observable = this.apollo.query({ query }); const myMessage$: Observable = this.apollo.mutate({ mutation }); const addedMessage$: Observable = this.apollo.subscribe({ subscription }); ճ౴͸ͪ͜Β: https://github.com/Quramy/ionic-gql-messenger/blob/master/src/pages/timeline/ timeline.ts#L68-L82

Slide 32

Slide 32 text

Summary

Slide 33

Slide 33 text

Summary w (SBQI2-ʹ͸ͭΒΈ΋͋ΔҰํɺϞόΠϧͱͷ૊Έ߹Θͤ ʹ͸ເΛײ͡Δ w ࠷ۙͰ͸༷ʑͳ#BB4΋ొ৔͠ɺॳظίετ΋Լ͕͖ͬͯͯ ͍Δ w "QPMMPͱपลϥΠϒϥϦͷ׆༻Ͱɺշద։ൃ؀ڥ͕खʹೖ Δ

Slide 34

Slide 34 text

Resources 1/2 w %FNP"QQ3FQP  IUUQTHJUIVCDPN2VSBNZJPOJDHRMNFTTFOHFS w *POJDBOE(SBQI2-HVJEF3FQP  IUUQTHJUIVCDPN2VSBNZJPOJDBQPMMPTJNQMFBQQ w (SBQI2-5ZQF4DSJQU-BOHVBHF4FSWJDFQMVHJO  IUUQTHJUIVCDPN2VSBNZUTHSBQIRMQMVHJO

Slide 35

Slide 35 text

Resources 2/2 w (SBQI2-5ZQF4DSJQU"OOPUBUJPO(FOFSBUPS  IUUQTHJUIVCDPNBQPMMPHSBQIRMBQPMMPDPEFHFO w "OHVMBS"QPMMP$MJFOU  IUUQEFWBQPMMPEBUBDPNBOHVMBS w HSBQIDPPM (SBQI2-#BB4   IUUQTDPOTPMFHSBQIDPPM

Slide 36

Slide 36 text

About me

Slide 37

Slide 37 text

IAM

Slide 38

Slide 38 text

એ఻ͦͷ w OHTBLFͱ͍͏"OHVMBSNFFUVQΛෆఆظ։࠵͍ͯ͠·͢ w ୈճ͸ Ր w $POOQBTTͰlOHTBLFzͰݕࡧͩʂ

Slide 39

Slide 39 text

એ఻ͦͷ w (SBQI2-5PLZPͱ͍͏.FFUVQΛ্ཱ͍ͪ͛ͯ·͢ w NFFUVQDPNͰl(SBQI2-5PLZPzͬͯݕࡧͯ͠Ͷʂ

Slide 40

Slide 40 text

Thank you.