Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Supercharging Applications with GraphQL and AWS AppSync

1,887 views

Published on

In this webinar we’ll give you an overview the next generation technology for building APIs called GraphQL and how AWS AppSync takes advantage of GraphQL to make it easy to build collaborative mobile and web applications that deliver responsive and enhanced user experiences.

Modern developers need easy tools for real time, offline access and synchronisation. These techniques are no longer optional for a great end user experience, yet they are difficult to engineer and scale from scratch. Implementing these concepts with modern data fetching patterns across web or mobile can also be difficult.

AWS AppSync automatically updates the data for web and mobile applications in real time and synchronize data for offline users as soon as they reconnect, managing everything needed to store, process, and retrieve the data for your application. In this session, we will also cover how AWS AppSync allows you to query your data using GraphQL and how it handles mutations, subscriptions, pagination, relations, offline access, real time communications, conflict resolution, and efficient data fetching.

What to expect:

Learn GraphQL Concepts
Understand how to use AWS AppSync with different data sources
Manage application data with real time and offline capabilities in the cloud

Supercharging Applications with GraphQL and AWS AppSync

  1. 1. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Ed Lima – Solutions Architect May 2018 Supercharging Applications with GraphQL and AWS AppSync @ednergizer
  2. 2. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. A New Philosophy for Backend APIs
  3. 3. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. App Data Challenges Data requirements vary across devices and become harder when multiple users share data Users want instant access to data Building scalable data-driven apps without learning distributed systems concepts is hard Users want to continue using their apps even with low or no connectivity
  4. 4. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Traditional Data Fetching Data ü Trivial to set up ü Standard HTTP Calls Relationships Lists with reduced information Query support Ordering and pagination Notifications /posts /postInfo /postJustTitle /postsByAuthor /postNameStartsX /postByTag /commentsOnPost REST Endpoints
  5. 5. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Is There A Better Way
  6. 6. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. GraphQL
  7. 7. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. What Is GraphQL? Describe what’s possible with a type system Uniform API across data stores and APIs Network optimized requests and responses Powerful developer tools Integrated documentation and introspection Query language for your API and a runtime for fulfilling queries with existing data
  8. 8. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. What Is GraphQL? /posts /comments /authors REST API posts comments authors GraphQL API
  9. 9. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. subscription { onCreateComment{ id } } mutation { createEvent(name:”Dinner”){ id } } query { getEvent(id: 1){ id name } } Queries Read Data Mutations Write Data Subscriptions Receive Data in Real-Time GraphQL Operations
  10. 10. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. type Query { listEvents: [Event] } type Event { id: ID! name: String! when: String! where: String! } query { listEvents { id name } } { "id": "1", "name": "React Meet Up" }, { "id": "2", "name": "GraphQL Party" }, { “id”: “3”, “name”: “Angular Sesh” } ... Define your data (Schema) Invoke Operation Get EXACTLY what you asked for How To Use GraphQL
  11. 11. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. type Query { listEvents: [Event] } type Event { id: ID! name: String! when: String! where: String! } query { listEvents { id name when } } { "id": "1”, "name": "React Meet Up”, “when”: “Tomorrow” }, { "id": "2", "name": "GraphQL Party", “when”: “Saturday” }, { “id”: “3”, “name”: “Angular Sesh”, “when”: “Next Friday” } ... Define your data (Schema) Invoke Operation Get EXACTLY what you asked for How To Use GraphQL
  12. 12. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. GraphQL sounds legit! I want to run my own GraphQL server!!
  13. 13. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Focus on Apps Not Infrastructure
  14. 14. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS AppSync
  15. 15. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS AppSync Managed Serverless GraphQL service Connect to data sources in your account Add data sync, real-time and offline capabilities for any data source or API GraphQL façade for any AWS service Conflict detection and resolution in the cloud Enterprise security features: IAM, Cognito, OIDC, API keys
  16. 16. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. How Does AppSync Work? Create, Import or Upload GraphQL Schema Amazon Elasticsearch Amazon DynamoDB AWS Lambda Connect Data Sources AppSync Updates Data in Real Time and Manages Data when Offline __________ ______________ ___________ _________ ___________ ____________ __________
  17. 17. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Building Data-Driven Apps With AWS Appsync Robust, scalable storage capable of handling millions of events a day Geospatial search Real-time Updates Mobile and Web clients
  18. 18. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Clients receive the data they ask for. Nothing more, nothing less Get many resources from many data sources with a single request Self-documenting APIs with Introspection AWS AppSync Benefits React Native, Android, iOS, and Web (JS) using the Apollo GraphQL client Data persistence across application restarts Write-through mutations with Optimistic UI
  19. 19. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Mix/Match Data Sources on GraphQL Types Amazon DynamoDB type Query { listPosts: [Post] searchPosts: [Post] } type Mutation { addPost: Post } type Post { id: ID! content: String description: String ups: Int downs: Int } Amazon Elasticsearch listPosts searchPosts addPost
  20. 20. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Elasticsearch Amazon DynamoDB Browser Mobile device WebSocket servers Web servers PubSub servers Subscription /search /taps /taps/:id /m_search AWS Lambda Third-party service … Real-Time App Before AppSync
  21. 21. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. /graphql AWS AppSync Subscription Amazon Elasticsearch Amazon DynamoDB AWS Lambda Third-party service Real-Time App After AppSync
  22. 22. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Real-Time Updates o GraphQL subscriptions o Event stream of mutation results o Data synchronisation with MQTT + WebSockets o Client managed WebSocket connection o Automatic catch-up snapshots
  23. 23. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Handshake Process subscription NewPostSub { addedPost {…} } Websocket URL and Connection Payload Secure Websocket Connection (wss://)
  24. 24. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. GraphQL Data Flow in AWS AppSync Request Template Response Template Data Sources 1 2 3 4 5
  25. 25. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Fine Grained Access Controls
  26. 26. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Access Control Checks Simple Only users in certain groups can perform actions #if($hasPermission || $ctx.result.public == 'yes') $utils.toJson($ctx.result) #else $utils.unauthorized() #end Only users in certain groups can perform actions #if($ctx.result["Owner"] == $ctx.identity.username) $utils.toJson($context.result); #else $utils.unauthorized() #end Advanced Only users in certain groups can perform actions #foreach($group in $ctx.identity.claims.get("cognito:groups")) #if($group == "Admin") #set($inCognitoGroup = true) #end #end #if($inCognitoGroup) { …write/read from datasource } #else $utils.unauthorized() #end
  27. 27. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Data Conflicts Jane Version : 2 Updated Document Jane Version : 2 Updated Document Version : 3 Updated Document Version : 1 New Document Time John John Jane goes offline Jane comes back online Version : 4 Updated Document John Jane
  28. 28. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Handle Data Conflicts In The Cloud o Conflict detection with optimistic version check o Conflict resolution strategies: A. Client wins B. Server wins C. Silent reject D. Custom logic in AWS Lambda o Client callback for conflict resolution is available "condition" : { "expression" : "someExpression" "conditionalCheckFailedHandler" : { "strategy" : "Custom", "lambdaArn" : "arn:..." } }
  29. 29. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. type Mutation { updatePhoto(profilePicInput: S3ObjectInput!): Profile } input S3ObjectInput { bucket: String! key: String! region: String! localUri: String! } type Profile { name: String! profilePic: S3Object! } type S3Object { bucket: String! key: String! region: String! } Amazon S3 Amazon DynamoDB Images and Rich Content https://github.com/aws-samples/aws-amplify-graphql
  30. 30. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Offline Capabilities - AppSync Client Storage o Offline is a write-through "Store" o Persistent storage mediums back the Apollo normalised cache o Local Storage for web o AsyncStorage for React Native o SQLite on native platforms o Database can be preloaded o Offline client can be configured o WiFi only o WiFi and cellular
  31. 31. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS AppSync – From November to April
  32. 32. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. General Availability – New Features o Test/Debug Resolver Flows o CloudWatch (Logs and Metrics) o CloudFormation Support o Subscription Resolvers o Batch Delete/Read/Put o AWS Amplify Support o AWS Mobile CLI Support o HIPPA Compliance GA
  33. 33. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Test/Debug/Log o GraphQL request logs, metrics, and auditing o Verbose or Errors o Type & Field o Overall Execution Summary o “Stream” logs to query editor o “Unit test” with mock context o Arguments, Identity, Parent o Single or List results
  34. 34. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Batch Operations o Single or Multiple Tables o Custom error handling o Writes, Reads, and Deletes o Order is preserved o Web + Mobile + IoT use cases query { getMultipleTablesResults { id name } }
  35. 35. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Mobile CLI and AWS Amplify Support o Quickly use GraphQL + Auth, Storage, Analytics o Queries, Mutations, and Subscriptions o Extension of API category, includes Sigv4 signing o React/Angular components o Quickly deploy with the AWS Mobile CLI
  36. 36. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
  37. 37. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon API Gateway AWS AppSync
  38. 38. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon API Gateway AWS AppSync vs
  39. 39. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon API Gateway AWS AppSync vs
  40. 40. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon API Gateway AWS AppSync &
  41. 41. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon API Gateway AWS AppSync &
  42. 42. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Enough Talking… https://aws.amazon.com/appsync/resources/#Starter_applications (Angular Chat App) https://github.com/aws-samples/aws-mobile-appsync-chat-starter-angular https://aws.amazon.com/blogs/mobile/building-a-serverless-real-time-chat-application-with-aws-appsync/
  43. 43. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
  44. 44. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Cognito User Pools JWT Token GraphQL Schema ChatQL Conversations Table Messages Table User Conversations Table Users Table Amazon DynamoDB Queries and Mutations Subscriptions AppSync Resolvers User AWS AppSync AppSync Data Sources
  45. 45. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. User 1..1 1..n 1..1 1..n 1..n User Conversation Conversation Messages GraphQL Relations between NoSQL DynamoDB Tables!!!
  46. 46. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Demo Time https://aws.amazon.com/appsync/resources/#Starter_applications (Angular Chat App)
  47. 47. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Takeaways Don’t boil the Ocean. Start small and iterate on Offline (cache-and- network), Real-time and Conflict Resolution Use UI cues with Optimistic UI when Offline Take advantage of built-in GraphQL powerful features such as Connections (Pagination) and Relations (NoSQL) It’s all about the User Experience: AWS AppSync = J
  48. 48. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Go Build with AWS AppSync and GraphQL!
  49. 49. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Applying the Twelve-Factor Application Manifesto to Developing Serverless Applications The popular series will return in June & July visiting 6 cities in AU/NZ. Be sure to register your spot as seats fill up quickly! https://aws.amazon.com/events/lunch-and-learn/dev-lounge/
  50. 50. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Thank You!

×