GraphQL + Relay + Serverless

필요한 리소스만을 요청하고 사용하는 API 만들기

Transcript

1. GraphQL + Relay + Serverless
   ߅ഋध @ థ࠶ߢ
   

   View Slide

2. థ࠶ߢ
   "#$%&'()*+,-./01234
   56
   

   View Slide

3. ೙ਃೠ ܻࣗझ݅ਸ
   ਃ୒ೞҊ ࢎਊೞח API ٜ݅ӝ
   I
   

   View Slide

4. ੢߄ҳפ
   ੢߄ҳפী׸ӟ࢚ಿ
   ࢸݺ оѺ ߓ࣠࠺
   ߓ࣠઱ࣗ
   25,000
   12,000
   2,500
   2,500
   ࢚ಿ
   

   View Slide

5. ੢߄ҳפ
   ੢߄ҳפী׸ӟ࢚ಿ
   ࢸݺ оѺ ߓ࣠࠺
   ߓ࣠઱ࣗ
   25,000
   12,000
   2,500
   2,500
   ࢚ಿ
   ProductList
   Cart
   ShippingAddress
   ProductData
   ProductData
   

   View Slide

6. ProductList
   Cart
   ProductData
   ProductData
   ShippingAddress
   /carts/1
   /products/1
   /products/2
   /shippingAddresses/1
   

   View Slide

7. 
   /carts/1?
   fields=products,coupons,shipping_addr
   esses&products[images, descriptions]
   /carts/1?
   fields=products,coupons,shipping_addr
   esses&products[images[high,low]]&prod
   ucts[descriptions[reviews, contents]]
   

   View Slide

8. /carts_with_products_shipping_address_coupons
   /carts_with_products_recommendations
   /carts_with_products_videos
   /carts_with_products_newsletter_signups
   /carts_with_products_for_mobile
   /carts_with_products_for_tablets
   

   View Slide

9. View Slide

10. View Slide

11. View Slide

12. View Slide

13. BFF (soundcloud)
    Backends for Frontends
    

    View Slide

14. View Slide

15. GraphQL
    A Query Language for API
    

    View Slide

16. {
    me {
    name
    company
    }
    }
    

    View Slide

17. {
    me {
    name: "߅ഋध"
    company: "థ࠶ߢ"
    }
    }
    

    View Slide

18. {
    me {
    name
    company
    hobby
    }
    }
    

    View Slide

19. {
    me {
    name: "߅ഋध"
    company: "థ࠶ߢ"
    hobby: "୷ҳ"
    }
    }
    

    View Slide

20. Query
    REST GET method
    

    View Slide

21. REST
    GET /me
    {
    name: "߅ഋध",
    company: "థ࠶ߢ",
    hobby: "୷ҳ",
    favoriteColor: "౵ی࢝",
    country: "؀ೠ޹Ҵ",
    conference: "playnode 2017",
    cloudProvider: "IBM",
    age: "?^^^^",
    address: "??????????",
    cardNumber: "@#$D@#$#$%#$FD@#$@#"
    }
    

    View Slide

22. GraphQL
    {
    user (id: "1") {
    name
    company
    }
    }
    

    View Slide

23. GraphQL
    {
    user {
    name: "chulsoo"
    company: "younghee co."
    }
    }
    

    View Slide

24. ProductList
    Cart
    ProductData
    ProductData
    ShippingAddress
    /carts/1
    /products/1
    /products/2
    /shippingAddresses/1
    REST
    

    View Slide

25. ProductList
    Cart
    ProductData
    ProductData
    ShippingAddress
    {
    cart {
    products {
    imageUrl
    description
    price
    shippingCost
    }
    shippingAddress
    }
    }
    POST /graphql
    GraphQL
    

    View Slide

26. View Slide

27. View Slide

28. View Slide

29. View Slide

30. Type System
    ⚙⚙⚙
    

    View Slide

31. Types
    type Query {
    cart: Cart
    }
    type Cart {
    products: [Product]!
    shippingAddress: String!
    }
    type Product {
    imageUrl: String!
    description: String!
    price: Int!
    shippingCost: Int!
    }
    {
    cart {
    products {
    imageUrl
    description
    price
    shippingCost
    }
    shippingAddress
    }
    }
    

    View Slide

32. Types
    type Query {
    cart: Cart
    }
    type Cart {
    products: [Product]!
    shippingAddress: String!
    }
    type Product {
    imageUrl: String!
    description: String!
    price: Int!
    shippingCost: Int!
    }
    {
    cart {
    products {
    imageUrl
    description
    price
    shippingCost
    }
    shippingAddress
    }
    }
    

    View Slide

33. Types
    type Query {
    cart: Cart
    }
    type Cart {
    products: [Product]!
    shippingAddress: String!
    }
    type Product {
    imageUrl: String!
    description: String!
    price: Int!
    shippingCost: Int!
    }
    {
    cart {
    products {
    imageUrl
    description
    price
    shippingCost
    }
    shippingAddress
    }
    }
    

    View Slide

34. Types
    type Query {
    cart: Cart
    }
    type Cart {
    products: [Product]!
    shippingAddress: String!
    }
    type Product {
    imageUrl: String!
    description: String!
    price: Int!
    shippingCost: Int!
    }
    {
    cart {
    products {
    imageUrl
    description
    price
    shippingCost
    }
    shippingAddress
    }
    }
    

    View Slide

35. Types
    type Query {
    cart: Cart
    }
    type Cart {
    products: [Product]!
    shippingAddress: String!
    }
    type Product {
    imageUrl: String!
    description: String!
    price: Int!
    shippingCost: Int!
    }
    {
    cart {
    products {
    imageUrl
    description
    price
    shippingCost
    }
    shippingAddress
    }
    }
    

    View Slide

36. Mutation
    REST POST/PUT/PATCH/DELETE Method
    

    View Slide

37. Mutation
    mutation {
    createProduct(
    input: {
    description: "ݧ૓ ৩"
    price: 50000
    }
    )
    } {
    product {
    Price
    }
    }
    

    View Slide

38. ؊ب ݈Ҋ ؏ب ݈Ҋ
    ٯ ௿ۄ੉঱౟о ਗೞח ч݅
    NO
    

    View Slide

39. ࠺ऴ ֎౟ਕ௼ ਃ୒
    ୭ࣗച R
    

    View Slide

40. View Slide

41. View Slide

42. Relay
    

    View Slide

43. Relay
    

    View Slide

44. Relay
    

    View Slide

45. Relay
    

    View Slide

46. Relay
    

    View Slide

47. Relay
    

    View Slide

48. Relay
    

    View Slide

49. id?
    GraphQL Relay
    

    View Slide

50. id?
    id
    GraphQL Relay
    

    View Slide

51. GraphQL Relay
    

    View Slide

52. GraphQL Relay
    

    View Slide

53. GraphQL Relay
    1
    

    View Slide

54. GraphQL Relay
    1
    1
    

    View Slide

55. View Slide

56. View Slide

57. Server
    

    View Slide

58. Serverless
    

    View Slide

59. f(⚡)
    Functions
    ⚡⚡
    ⚡⚡
    

    View Slide

60. Serverless
    = function-as-a-service?
    

    View Slide

61. Serverless
    Pattern / Architecture
    

    View Slide

62. ࢲߡ ҙܻ੄ ݽٚѦ
    ௿ۄ਋٘ীѱ ݐӝ੗ ☁
    /provisioning, OS patching/upgrading,
    scaling, self-healing, … /
    

    View Slide

63. Pricing
    • IBM Cloud functions
    
    • 500ms प೯
    
    • 512MB @ 5,000,000 ਃ୒ പࣻ
    
    • $14.45
    

    View Slide

64. Pricing
    • प೯ दр ⏰
    
    • ݫݽܻ ࣗ࠺۝
    
    • ਃ୒ പࣻ ⚡
    

    View Slide

65. “ࢲߡ” ৉ೡ੄ ݽٚѦ
    ௿ۄ਋٘ীѱ ݐӝ੗ ☁
    /API Gateway, Message Queue, Search,
    Analytics, Authentication, … /
    

    View Slide

66. ੉ “ࢲߡ”ٜਸ ೣࣻ۽ োѾೞ੗
    ⚡
    ⚡
    ⚡
    ⚡
    ⚡ ⚡
    

    View Slide

67. View Slide

68. GraphQL
    API Gateway
    Cart
    Product
    Search
    Message Queue
    Object Storage
    ⚡
    ⚡
    ⚡
    ⚡
    ⚡
    ⚡
    ⚡
    ⚡
    ⚡
    ⚡
    Email
    Authentication
    

    View Slide

69. GraphQL + Relay + Serverless
    

    View Slide

70. tumblbug.workable.com
    ହઑ੸ੋ दب੄ ӝࣿ੸ ӝ߈ਸ ೣԋ ٜ݅
    
    ࣗ೐౟ਝয ূ૑פযܳ ଺णפ׮.
    

    View Slide