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

The Power of Serverless GraphQL with AppSync

The Power of Serverless GraphQL with AppSync

ServerlessDays Virtual, October 2020. https://virtual.serverlessdays.io/speakers/202010/slobodan/

2663a9ac90cc6ed420e0e1560db57782?s=128

Slobodan Stojanović

October 28, 2020
Tweet

Transcript

  1. he!o! ServerlessDays Virtual

  2. every story n"ds a hero

  3. None
  4. Our hero

  5. Works in a sma! team on a mid-sized application

  6. Most of the time enjoys the job

  7. Just sent a test push notification to thousands of customers

  8. We need to build this new complex app.

  9. Ok, no problem

  10. But we have a short deadline.

  11. Ok, how short?

  12. It needs to be ready for yesterday. And it needs

    to be scalable and real-time!
  13. How should I build this?

  14. Don't worry, we have a famous consultant that will help

    you architecture the app.
  15. Great!

  16. multi-cloud guru

  17. Just use Kubernetes! multi-cloud guru

  18. But I don't know Kubernetes.

  19. I don't have time to learn Kubernetes now.

  20. What should I do?

  21. Am I the only one who don't know Kubernetes?

  22. Maybe I am not good enough for this!

  23. None
  24. Serverless GraphQL You should try

  25. Serverless GraphQL?

  26. Serverless GraphQL with AppSync The Power of

  27. @slobodan_ Before we continue…

  28. Slobodan Stojanović CTO @ Cloud Horizon & CTO @ Vacation

    Tracker co-author of Serverless Applications with Node.js book AWS Serverless Hero @slobodan_
  29. Serverless GraphQL with AppSync The Power of

  30. Serverless GraphQL ?

  31. What's GraphQL?

  32. @slobodan_ "Our biggest mistake was betting too much on HTML5"

    Mark Zuckerberg, 2012
  33. @slobodan_

  34. @slobodan_ HTML HTML

  35. @slobodan_ "Our biggest mistake was betting too much on HTML5"

    Mark Zuckerberg, 2012
  36. @slobodan_ REST? FQL? REST? FQL?

  37. @slobodan_ "We were frustrated with the differences between the data

    we wanted to use in our apps and the server queries they required." L" Byron, 2015 GraphQL: A data query language article
  38. @slobodan_ Data app needs Data app needs

  39. @slobodan_

  40. Nice. But, why should I care about GraphQL?

  41. I don't have the same problems as Facebook.

  42. Ok, but let's s" if you have one of the

    fo!owing problems
  43. Distinct frontend clients for multiple platforms (i.e., web and mobile)

    has different data requirements.
  44. A backend serves data to clients from different sources.

  45. A complex state and caching managements for both frontend and

    backend.
  46. Slow pages especia!y on mobile, caused by multiple dependant HTTP

    requests.
  47. These are just some "symptoms" that GraphQL can cure.

  48. • Defines a data shape • Hierarchical • Strongly typed

    • Protocol, not storage • Introspective • Version fr"
  49. None
  50. None
  51. Types type Author { id: Int name: String posts: [Post]

    } type Post { id: Int title: String text: String author: Author }
  52. Schema type Query { getAuthor(id: Int): Author getPostsByTitle(titleContains: String): [Post]

    } schema { query: Query }
  53. Resolvers getAuthor(_, args){ return sql.raw('SELECT * FROM authors WHERE id

    = %s', args.id); } posts(author){ return request(`https://api.blog.io/by_author/${author.id}`); }
  54. Queries { getAuthor(id: 5){ name posts { title author {

    # this will be the same as the name above name } } } }
  55. 1. Parse 2. Validate 3. Execute

  56. Result { "name": "Slobodan", "posts": [{ "title": "Hello World", "author":

    { "name": "Slobodan" } }, { "title": "GraphQL", "author": { "name": "Slobodan" } }] }
  57. GraphQL supports: • Queries • Mutations • Subscriptions

  58. Interesting!

  59. Serverless GraphQL

  60. Serverless GraphQL Why?

  61. GraphQL using Kubernetes We!, you can deploy

  62. BUT there's an easier way

  63. None
  64. You sti! n"d to scale these

  65. Unless you make it serverless

  66. How can I make my GraphQL app serverless?

  67. You can make it manua!y

  68. Or you can use AWS AppSync!

  69. What's AWS AppSync?

  70. AppSync is a managed service that uses GraphQL to make

    it easy for applications to get exactly the data they n"d.
  71. AppSync to develop your app faster You can use

  72. I can? How?

  73. • Define GraphQL schema • Automatically provision a DynamoDB data

    source and connect resolvers • Write GraphQL queries and mutations • Use the API in the frontend app
  74. It's easy to start with Let's give it a try

  75. You can start with the guided schema wizard on AWS

    Web Console
  76. But you should use AWS Amplify, CloudFormation or CDK for

    more serious apps
  77. None
  78. > amplify init > amplify add api > amplify push

  79. Wow, that was fast!

  80. I should show it to the consultant.

  81. That will never work! Amplify is not good enough. multi-cloud

    guru
  82. You can always start with Amplify and then move to

    CloudFormation or CDK
  83. AppSync with CDK import * as cdk from '@aws-cdk/core'; import

    * as appsync from '@aws-cdk/aws-appsync'; export class AppsyncCdkAppStack extends cdk.Stack { constructor(scope: cdk.Construct, id: string, props?: cdk.StackProps) { super(scope, id, props); // Creates the AppSync API const api = new appsync.GraphqlApi(this, 'Api', { name: 'my-awesome-app', schema: appsync.Schema.fromAsset('graphql/schema.graphql'), }); // Prints out the AppSync GraphQL endpoint to the terminal new cdk.CfnOutput(this, "GraphQLAPIURL", { value: api.graphqlUrl }); } }
  84. Ok, but the app needs to be real-time multi-cloud guru

  85. AWS AppSync lets you specify which part of your data

    should be available in a real-time manner using GraphQL Subscriptions.
  86. Real-time subscriptions type Subscription { addedPost: Post @aws_subscribe(mutations: ["addPost"]) updatedPost:

    Post @aws_subscribe(mutations: ["updatePost"]) deletedPost: Post @aws_subscribe(mutations: ["deletePost"]) }
  87. And it needs to be scalable! multi-cloud guru

  88. None
  89. But what if you need a search functionality? multi-cloud guru

  90. AWS AppSync supports Amazon Elasticsearch! the GraphQL operations can be

    simple lookups, complex queries & mappings, fu! text searches, fuzzy/keyword searches or geo lookups.
  91. But what if you need to connect to an existing

    app? multi-cloud guru
  92. You can connect AWS AppSync to AWS Lambda!

  93. What about roles and permissions? multi-cloud guru

  94. • API_KEY Authorization • AWS_IAM Authorization • OPENID_CONNECT Authorization •

    AMAZON_COGNITO_USER_POOLS Authorization
  95. Multi-tenant? multi-cloud guru

  96. You can use Cognito Groups.

  97. use Resolver Mapping Template For fine-grained permissions

  98. ? multi-cloud guru

  99. ?

  100. You can use Apache Velocity Template Language (VTL)

  101. What's VTL?

  102. I would say it’s an alien language (we!, its Java-based)

    hard to test in isolation in a serverless application, especia!y in AWS CloudForamation.
  103. Alien language a.k.a. VTL #if($context.result["Owner"] == $context.identity.username) $utils.toJson($context.result) #else $utils.unauthorized()

    #end
  104. How do you test that? multi-cloud guru

  105. Testing Alien language Templates import { AppSyncMockFile } from 'amplify-appsync-simulator'

    import { VelocityTemplate } from 'amplify-appsync-simulator/lib/velocity' import { readFileSync } from 'fs' import { join } from 'path' import { getAppSyncSimulator } from './helpers/get-appsync-simulator' import { getVelocityRendererParams } from './helpers/get-velocity-renderer-params' // Read the VTL file from the disc const vtl = readFileSync(join(__dirname, '..', 'get-company-resolver-request.vtl'), 'utf8') const template: AppSyncMockFile = { content: vtl } // Create a simulator instance const simulator = getAppSyncSimulator() // Create a VelocityTemplate instance const velocity = new VelocityTemplate(template, simulator)
  106. Testing Alien language Templates describe('some-file.vtl', () => { const {

    ctxValues, requestContext, info } = getVelocityRendererParams('username', { 'custom:companyId': 'company', }) test('should render a template', () => { const result = velocity.render(ctxValues, requestContext, info) expect(result).toEqual({ errors: [], isReturn: false, stash: {}, result: { version: '2018-05-29', operation: 'GetItem', key: { id: { S: 'company' }, }, }, }) }) })
  107. Ha! I don't like that! multi-cloud guru

  108. Me neither!

  109. AppSync supports Direct Lambda Resolvers, which skips VTL completely

  110. But what if you want to reuse some logic? multi-cloud

    guru
  111. You can do that in AWS Lambda or use Pipeline

    Resolvers
  112. Ok, ok, but this is still complex for the frontend

    multi-cloud guru
  113. AWS Amplify gives us nice libraries for the frontend

  114. And it can automatica!y generate queries, mutations, subscriptions and types

    for us!
  115. I give up! multi-cloud guru

  116. But this is not a!!

  117. AppSync supports caching and offline data synchronization

  118. Ok, but how do you test it? multi-cloud guru

  119. It depends on your approach. It's good to have end-to-end

    tests, but you can test your Lambda code or VTL templates in isolation.
  120. You can also run the app loca!y using AWS Amplify

  121. What if we need to use more complex architecture, i.e.

    CQRS multi-cloud guru
  122. Mutation Event storage Subscription Query Read-only table EventBridge Business logic

    Business logic
  123. Mutation Event storage Subscription Query Read-only table EventBridge Business logic

    Business logic
  124. Mutation Event storage Subscription Query Read-only table EventBridge Business logic

    Business logic
  125. multi-cloud guru

  126. None
  127. Serverless GraphQL Guru

  128. None
  129. Quick Summary: • GraphQL makes your frontend and backend connection

    effortless • AppSync makes GraphQL management effortless • Serverless GraphQL makes you a super hero
  130. @slobodan_ vacationtracker.io