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&4540"1ͷΑ͏ʹ3FTQPOTFͷܕ͕ݻఆ͞ΕΔ
ܗࣜͷ4VQQMZ%SJWFO"SDIJUFDUVSFͱݺͿ
w 42-41"32-+40/(SBQI 'BMDPS
FUD
https://qconnewyork.com/ny2015/system/files/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͔Ͳ͏͔ෆ໌ͩ
͚Ͳɺݱঢ়બՄೳSFHJPOVTXFTUPSFVSPQFͷΈ
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 BQPMMPDPEFHFOHSBQIRMϑΝΠϧʹهड़͞Εͨ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.