Ionic and GraphQL

Transcript

1. 1.

   Ionic and GraphQL 2017.08.06 by Yosuke Kurami

2. 2.

   Today’s theme

3. 3.

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

4. 4.

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

5. 5.

   Agenda • Demonstration • Introduction to GraphQL • How to

   integrate GraphQL into Ionic
6. 6.

   Demonstration

7. 7.

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

   59554521
8. 8.

   None
9. 9.

   Do you know GraphQL ?

10. 10.

    What’s GraphQL w 'BDFCPPL͕ఏএ͍ͯ͠Δ2VFSZ
    -BOHVBHF
    w ೥ʹެ։ɻҰԠ3'$ͷ૲Ҋ΋͋Δ
    w ࢀর࣮૷͸+BWB4DSJQU
    ଞݴޠϥΠϒϥϦ࣮૷΋ଟ͍
    w (JU)VC͕ඪ४

    WFSTJPO
     "1*ͱͯ͠࠾༻ ݄ʙ
    w ҰํͰɺΠϚΠνྲྀߦͬͯͳ͍ٙ࿭΋ʜ
11. 11.

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

12. 12.

    1. Single Endpoint w ྫ
    (JU)VC
    W
    "1*
    w IUUQTBQJHJUIVCDPNHSBQIRM
    ͷΈ
    w )551ϝιου͸
    1045
    w

    CPEZ BQQMJDBUJPOKTPO ͷ
    query
    ͰΫΤϦΛදݱ
13. 13.

    1. Single Endpoint (SBQI2-
    RVFSZ
    FYBNQMF query RepoSummary { repository(name: "ionic", owner:

    "ionic-team") { createdAt, issues(states: OPEN) { totalCount } stargazers { totalCount } watchers { totalCount } } } https://developer.github.com/v4/explorer/
14. 14.

    1. Single Endpoint w &OEQPJOU͕ఏڙ͢Δ"1*ύλʔϯ͸छྨ
    w 2VFSZ
    ͍ΘΏΔ(&5૬౰
    ҆શ͔ͭႈ౳ͳૢ࡞Λެ։
    w .VUBUJPO
    ͍ΘΏΔ
    10451"5$)165%&-&5&
    ૬౰
 ഁյతมߋΛͱ΋ͳ͏ૢ࡞Λެ։͢Δ
    

    w 4VCTDSJQUJPO
    ͍ΘΏΔ1VC4VCʹ͓͚Δߪಡʹ૬౰
 ࣮૷ʹ͸4FSWFS
    4JEF
    1VTI͕ඞཁͱͳΔ
 ݱঢ়͸XT
    ͰUSBOTQPSU͢Δ͜ͱ͕ଟ͍
15. 15.

    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/files/presentation-slides/ qcon_dda_2015_iwork09_boguta_nolen.pdf
16. 16.

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

    ͍ΔͷͰ͸ɻ
17. 17.

    3. Schema System w (SBQI2-ͷΤϯυϙΠϯτ͸ެ։͢ΔσʔλεΩʔϚΛఆٛ ͢Δඞཁ͕͋Δ
    w (SBQI2-࢓༷ࣗମʹܕػߏ͕૊Έࠐ·Ε͍ͯΔͨΊɺ
 ίʔυੜ੒΍3PVUJOHϥΠϒϥϦ͕ߏங͠΍͍͢ type

    Repository implements Node { id: ID! number: Number! createdAt: DateTime! issues: [Issue] : }
18. 18.

    3. Schema System

19. 19.

    Caveat w όοΫΤϯυͷ࣮૷ߟྀ఺͕ࢁͷΑ͏ʹ͋Δ
 /
    
    ໰୊
    ηΩϡϦςΟ
    FUD
    
    
    w ϑΟʔϧυΛͭͭࢦఆ͢Δ෼ɺϑϩϯτͷ࣮૷ෛՙ΋ߴ

    ͘ͳΓ͔Ͷͳ͍ 3&45Ͱ͸ΤϯυϙΠϯτΛࢦఆ͢Δ͚ͩ ͰࡁΜͰ͍ͨ
    w 3&45Ͱഓͬͨϊ΢ϋ΢΍πʔϧ͕׆͔ͤͳ͍
 ΤϥʔεςʔλεΛͲ͏ઃܭ͢Δ͔ʁ౳
20. 20.

    Pros / Cons w 1SPT
    w "1*ʹੑೳͱϦιʔεઃܭͷ྆໘Λ୲อͰ͖Δ
    w ϚϧνΫϥΠΞϯτ 1$
    XFC.PCJMF

    
    ରԠ͠΍͍͢
    w ܕεΩʔϚʹΑΓɺपลπʔϧΛ࡞Γ΍͍͢
    w $POT
    w όοΫΤϯυ
    
    ϑϩϯτΤϯυͱ΋ʹ࣮૷ෛՙߴΊ
21. 21.

    How to integrate GraphQL into Ionic Apps

22. 22.

    Client Libraries w 'BDFCPPL
    3FMBZ
    w 3FMBZ
    2-౳ɺಠ੍ࣗ໿͕ڧ͍ ΄΅ϑϨʔϜϫʔΫ
    w 3FBDU
    
    3FBDU
    OBUJWF

    
    #BCFMͱͷ૬ੑ͸ྑ͍
    w "QPMMP
    w ରԠݴޠ
    '8
    4XJGU
    
    +BWB
    
    3FBDU
    
    "OHVMBS
    
    w ػೳ͸ബΊɻ୞ͷ$MJFOUϥΠϒϥϦ
    
23. 23.

    Backend as a Service w αΫοͱϞόΠϧ։ൃΛ͍ͨ͠৔߹ͷબ୒ࢶ
    w ͪͳΈʹ"OHVMBSք۾Ͱ͸'JSFCBTF͕ڧ͍
    w 'JSFCBTF
    'VODUJPOTͰ(SBQI2-
    TFSWFͨ͠ྫ΋
    

    w ୯ҰΤϯυϙΠϯτͷ෼ɺϦιʔεϚοϐϯάָ͕ͳͷͰɺ 4FSWFSMFTT
    "SDIJUFDUVSF
    
    (SBQI2-͸݁ߏ؆୯
24. 24.

    GraphQL BaaS w 3FJOEFY
    
    IUUQTBDDPVOUTSFJOEFYJP 
 (SBQI2-
    #BB4૲෼͚తଘࡏɻ࠷ۙͷ׆ಈ͸΄΅θϩʜ
    w HSBQIDPPM
    IUUQTDPOTPMFHSBQIDPPM

    
 "84্ʹߏங͞Εͨ#BB4
    
 5PLZP
    3FHJPO BQOPSUIFBTU ΋બ୒Մೳ
    w TDBQIPME
    IUUQTTDBQIPMEJPBQQT 
 ൺֱత࠷ۙʹϩʔϯν͞Εͨ#BB4
    "84͔Ͳ͏͔͸ෆ໌ͩ ͚Ͳɺݱঢ়બ୒ՄೳSFHJPO͸VTXFTU
    PS
    FVSPQFͷΈ
25. 25.

    None
26. 26.

    It’s time to dev!

27. 27.

    Type Propagation w HSBQIDPPM
 4DIFNBΛ+40/ܗࣜͰΤΫεϙʔτ
    w UTHSBQIRMQMVHJO
    ࣗ࡞ 
    
 54
    -BOHVBHF
    4FSWJDFͰ4DIFNBKTPOΛಡΈ͜Ή


    ίʔυதͰΫΤϦͷิ׬͕༗ޮʹ
    w BQPMMPDPEFHFO
 5BHHFE
    5FNQMBUF
    -JUFSBM಺ͷΫΤϦΛύʔε͠ɺ
 54ͷUZQF
    BOOPUBUJPOΛੜ੒
28. 28.

    Type Propagation w BQPMMPBOHVMBS
 ੜ੒͞ΕͨUZQFΛDMJFOUʹ৯ΘͤΔ͜ͱͰɺ3YKT
    4USFBN ΛಘΔ
    w !BOHVMBSDPSF
 BTZOD
    QJQFʹΑΓTUSFBN͔ΒΫΤϦ݁ՌΛऔΓग़͢
    w

    !BOHVMBSMBOHVBHFTFSWJDF
 ΫΤϦ݁Ռ (SBQI2-
    GSBHNFOU ͷUZQF
    BOOPUBUJPOΛར ༻ͯ͠ɺ"OHVMBS
    UFNQMBUFதͰ΋ϓϩύςΟิ׬
29. 29.

    .ts or .graphql ? w BQPMMPDPEFHFO͸HSBQIRMϑΝΠϧʹهड़͞ΕͨRVFSZ NVUBUJPO͔ΒUZQF
    BOOPUBUJPOΛੜ੒͢Δ͜ͱ΋Մೳ
    w ͜ͷ৔߹
    HSBQIRMUBHMPBEFSͱ͍͏XFCQBDL
    MPBEFSΛ

    ࢖͏ඞཁ͕ੜ͡ΔͨΊɺJPOJDBQQTDSJQUTDPOpH XFCQBDLDPOpHKTʹ௥ه͠·͠ΐ͏
30. 30.

    GraphQL Result as Observable w BQPMMPBOHVMBSͷ
    RVFSZNVUBUJPOTVCTDSJQUJPO
    ࣮ߦ݁ Ռ͸ɺશͯ
    0CTFSWBCMF
    Λฦ٫ const users$ =

    this.apollo.query<UsersQuery>({ query: users }) .map(({ data }) => data.allUsers) ; // typeof users$: Observable<UserFragment[]>
31. 31.

    GraphQL Result as Observable ύζϧ
    
    2VFSZ.VUBUJPO4VCTDSJQUJPO͔Βɺ
 this.timeline$: Observable<Message[]>
    Λ࡞ͬͯΈΑ͏ const latestMessages$: Observable<Message[]>

    = this.apollo.query({ query }); const myMessage$: Observable<Message> = this.apollo.mutate({ mutation }); const addedMessage$: Observable<Message> = this.apollo.subscribe({ subscription }); ճ౴͸ͪ͜Β: https://github.com/Quramy/ionic-gql-messenger/blob/master/src/pages/timeline/ timeline.ts#L68-L82
32. 32.

    Summary

33. 33.

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

34. 34.

    Resources 1/2 w %FNP
    "QQ
    3FQP
 IUUQTHJUIVCDPN2VSBNZJPOJDHRMNFTTFOHFS
    w *POJD
    BOE
    (SBQI2-
    HVJEF
    3FQP
 IUUQTHJUIVCDPN2VSBNZJPOJDBQPMMPTJNQMFBQQ
    w (SBQI2-
    5ZQF4DSJQU
    -BOHVBHF
    4FSWJDF
    QMVHJO


    IUUQTHJUIVCDPN2VSBNZUTHSBQIRMQMVHJO
35. 35.

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

    (SBQI2-
    #BB4 
 IUUQTDPOTPMFHSBQIDPPM
36. 36.

    About me

37. 37.

    IAM

38. 38.

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

39. 39.

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

40. 40.

    Thank you.