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.

Amplifying fullstack serverless apps with AppSync & the Amplify Framework - MAD312 - Chicago AWS Summit

379 views

Published on

AWS AppSync lets you create robust, scalable GraphQL APIs to securely access and manipulate data from multiple sources. It makes it easy to build engaging, collaborative applications that deliver responsive user experiences, providing offline and real-time capabilities. The Amplify Framework allows you to easily build and connect to your serverless backend with a powerful toolchain and resourceful library. The Amplify Console provides a Git-based workflow for deploying and hosting fullstack serverless web applications, providing out-of-the-box CI/CD capabilities. In this session, we learn how to use AWS AppSync and the Amplify Framework to create, deploy, and host engaging fullstack serverless applications.

  • Be the first to comment

Amplifying fullstack serverless apps with AppSync & the Amplify Framework - MAD312 - Chicago AWS Summit

  1. 1. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T Amplifying fullstack serverless apps with AppSync & the Amplify Framework Ed Lima Solutions architect AWS AppSync M A D 3 1 2
  2. 2. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T Fullstack https://www.flickr.com/photos/ginnerobot/2549674908/
  3. 3. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T Backend Front end CI/CD https://www.flickr.com/photos/ginnerobot/2549674908/
  4. 4. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T No servers to provision or manage Scales with usage Never pay for idle Availability and fault tolerance built in Serverless means…
  5. 5. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T
  6. 6. S U M M I T © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
  7. 7. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T {API}
  8. 8. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T InternetMobile & web apps Databases & data stores Basic API technology stack Failover Load balancers Web & application servers Message buses Workers ?API backend ?API “server”
  9. 9. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T AWS InternetMobile & web apps Databases & data stores Basic API technology stack Failover Load balancers Web & application servers Message buses Workers ?API backend ?API “server”
  10. 10. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T InternetMobile & web apps Basic serverless API technology stack AWS Serverless business logic Serverless APIs Databases & data stores Fail over Load balancers Web/application servers Message buses Workers
  11. 11. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T /posts /comments /authors REST API posts comments authors GraphQL API What is GraphQL?
  12. 12. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T Queries MutationsTypes Subscriptions GraphQL schema and operations A query language for APIs . . . and a runtime! type User { id: ID! username: String! firstName: String lastName: String daysActive: Int }
  13. 13. S U M M I T © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Queries query GetPost { getPost(id: ”1”) { id title } } mutation CreatePost { createPost(title: “Summit”) { id title } } subscription OnCreatePost { onCreatePost { id title } } Mutations Subscriptions A query language for APIs . . .
  14. 14. S U M M I T © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
  15. 15. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T
  16. 16. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T 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 facade for any AWS service Conflict detection and resolution in the cloud Enterprise security features: IAM, Amazon Cognito, OIDC, API keys
  17. 17. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T How does AWS AppSync work? , ,
  18. 18. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T GraphQL data flow in AWS AppSync: Resolvers Request template Response template Data sources 1 2 3 4 5
  19. 19. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T Pipeline resolvers
  20. 20. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T Real-time data broadcasting
  21. 21. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T Real-time subscriptions subscription onCreateMessage { createMessage {…} } WebSocket URL and connection payload Secure WebSocket connection (wss://) AppSync Data Sources AWS AppSync Amazon DynamoDB Amazon Elasticsearch Service AWS Lambda Amazon Aurora HTTP Local (Pub/Sub)
  22. 22. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T AWS AppSync real-time reference architecture https://github.com/aws-samples/appsync-refarch-realtime
  23. 23. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T Offline
  24. 24. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T Offline capabilities: AppSync client storage • Offline is a write-through “store" • Persistent storage mediums back the Apollo normalized cache • Local storage for web • AsyncStorage for React Native • SQLite on native platforms • Database can be preloaded • Offline client can be configured • Wi-Fi only • Wi-Fi and cellular
  25. 25. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T Polyglot backend data access
  26. 26. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T Microservices data access
  27. 27. S U M M I T © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
  28. 28. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T Multiple authorization providers on a single API • Type, operation, and field level authorization • Default authorization mode • Additional providers • OpenID Connect • Amazon Cognito User Pools • AWS Identity and Access Management • API key
  29. 29. S U M M I T © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
  30. 30. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T Log insights
  31. 31. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T Log insights nanoseconds
  32. 32. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T
  33. 33. S U M M I T © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
  34. 34. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T Amplify Framework
  35. 35. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T Amplify Framework
  36. 36. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T Amplify Framework ✓ CLI ✓ Client libraries (native and JS support) ✓ Console – Continuous deployment and hosting ✓ Prebuilt UI components ✓ Toolchain ✓ JS framework support
  37. 37. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T • Create, update, and delete cloud services • Manage multiple environments • GraphQL Transform • GraphQL Codegen Amplify Framework CLI
  38. 38. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T Categories Authentication Analytics Interactions (chat bots) API (REST) API (GraphQL) Amplify CLI Serverless functions Storage XR Push notifications Video
  39. 39. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T $ amplify add auth $ amplify push $ amplify configure auth $ amplify delete $ amplify codegen add Amplify CLI
  40. 40. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T $ amplify add api – # schema.graphql type Post @model { id: ID! title: String! }
  41. 41. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T @model Top-level entity; creates DynamoDB table, resolvers, and additional schema (queries, mutations, and subscriptions) for base type @connection Enables relationships between @model types @auth Enables set of authorization rules @searchable Handles streaming the data of an @model object type to Amazon Elasticsearch Service and configures search resolvers @versioned Enables versioning @function Enables adding a Lambda function as a data source –
  42. 42. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T GraphQL Transform: Mix and match data sources type Post { id: ID! content: String description: String ups: Int downs: Int }
  43. 43. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T GraphQL Transform: Mix and match data sources createPost readPost updatePost deletePost type Post @model { id: ID! content: String description: String ups: Int downs: Int }
  44. 44. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T GraphQL Transform: Mix and match data sources mutations queries createPost readPost updatePost deletePost type Post @model @auth(rules: [{allow: owner}]){ id: ID! content: String description: String ups: Int downs: Int }
  45. 45. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T GraphQL Transform: Mix and match data sources searchPosts mutations queries createPost readPost updatePost deletePost type Post @model @auth(rules: [{allow: owner}]) @searchable{ id: ID! content: String description: String ups: Int downs: Int }
  46. 46. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T GraphQL Transform: Mix and match data sources searchPosts mutations queries createPost readPost updatePost deletePost type Post @model @auth(rules: [{allow: owner}]) @searchable{ id: ID! content: String description: String ups: Int downs: Int }
  47. 47. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T $ amplify add codegen [--apiId <api-id>] // Will generate GraphQL statements // (queries, mutations, subscriptions)
  48. 48. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T $ amplify env add $ amplify env list $ amplify env checkout $ amplify env remove
  49. 49. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T Multiple environments and team workflow • Git-style interaction and project switching • Share backends between team members or clone for sandbox isolated development User Users
  50. 50. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T Amplify Framework • Connect to and interact with cloud services from web and mobile applications • Preconfigured components forpopular front-end libraries Client
  51. 51. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T AWS Amplify client • Opinionated • Declarative • Client focused • High-level abstractions • Best practices built in • Built with Amplify CLI in mind
  52. 52. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T AWS Amplify client import { Auth, API, Storage, Analytics, XR } from ‘aws-amplify’ $ npm install aws-amplify
  53. 53. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T AWS Amplify client import { Auth } from ‘aws-amplify’ Auth.signIn(’myusername’, ‘mypassword’) Auth.signOut() Auth.currentAuthenticatedUser()
  54. 54. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T AWS Amplify: Native support
  55. 55. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T AWS Amplify: JS framework support
  56. 56. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T Higher-order components import {withAuthenticator} from ‘aws-amplify-react’ export default withAuthenticator(App) class App extends Component { // your code goes here
  57. 57. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T Escape hatches https://www.flickr.com/photos/93241698@N00/4791058431
  58. 58. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T Amazon API Gateway Amazon Pinpoint AWS Lambda AWS AppSync Amazon DynamoDBAmazon Cognito
  59. 59. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T Amplify Framework Common workflows 1. Deploying a Lambda function with API Gateway (REST) 2. Adding authentication 3. Deploying a GraphQL API 4. Adding analytics
  60. 60. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T Deploying a Lambda function with API Gateway 1. Create the Lambda function & API $ amplify add api // chose REST with Express backend
  61. 61. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T 2. Write code/make changes // amplify/backend/function/<FUNCTION_NAME>/src/app.js app.get(‘/items’, function(req, res) { // new code goes here }) Deploying a Lambda function with API Gateway
  62. 62. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T $ amplify push 3. Deploy new API Deploying a Lambda function with API Gateway Amazon API Gateway AWS Lambda
  63. 63. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T import { API } from ‘aws-amplify’ API.get(’/items’) .then(data => console.log({ data })) .catch(err => console.log({ err }) 4. Interact with the API Deploying a Lambda function with API Gateway
  64. 64. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T $ amplify add auth // choose either default or custom configuration 1. Create the authentication service Adding authentication
  65. 65. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T import { Auth } from ‘aws-amplify’ 2. Import the Auth component Adding authentication
  66. 66. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T Auth.signUp(‘username’, ‘password’, { attributes: { email: ‘jane@doe.com’ } }) Auth.signIn(’myusername’, ‘mypassword’) 3. Implement Auth methods Adding authentication
  67. 67. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T $ amplify add api // chose GraphQL 1. Create the GraphQL API Deploying a GraphQL API
  68. 68. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T type Todo @model { id: ID! name: String! description: String! completed: Boolean } 2. Define annotated GraphQL schema Deploying a GraphQL API
  69. 69. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T $ amplify push 3. Deploy new API Deploying a GraphQL API Amazon Cognito AWS AppSync Amazon DynamoDB
  70. 70. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T import { API, GraphqlOperation } from ‘aws-amplify’ import { listTodos } from ‘./src/graphql/queries’ API.graphql(graphqlOperation(listTodos)) .then(data => console.log({ data })) .catch(err => console.log({ err }) 4. Interact with API Deploying a GraphQL API
  71. 71. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T $ amplify add analytics $ amplify push 1. Create analytics service Adding analytics Amazon Pinpoint
  72. 72. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T 2. Import Analytics API Adding analytics import { Analytics } from ‘aws-amplify’
  73. 73. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T 3. Record events Adding analytics Analytics.record({ name: 'albumVisit’ }) Analytics.record({ name: 'albumVisit', // Attribute values must be strings attributes: { genre: ‘nu-metal', artist: ’RATM’ } })
  74. 74. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T Amazon API Gateway Amazon Pinpoint AWS Lambda AWS AppSync Amazon DynamoDBAmazon Cognito
  75. 75. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T AWS AppSync JS SDK • Offline ready • Built-in helpers foroptimistic response, subscriptions • Usewith React Apollo / VueApollo / Angular Apollo • https://github.com/awslabs/aws-mobile-appsync-sdk-js
  76. 76. S U M M I T © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
  77. 77. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T Fullstack DevOps for web apps • Strong isolation barrier between projects and stages Dedicated AWS accounts for each project and stage (sandbox, staging, prod) • Source code (and history) for each stage readily available Git branching used for the source code for each stage • Minimize version mismatches between front end and backend Front end (e.g., code) and backend (e.g., AWS CloudFormation templates) developed and versioned together in same Git repository • Developers in control Developers deploy front end *and* backend
  78. 78. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T DevOps requirements for modern web apps Web app per dev sandbox Test web app Prod web app
  79. 79. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T DevOps challenges with modern web apps Lots of moving parts complicate the following:
  80. 80. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T AWS Amplify Console Build, deploy, and host cloud-powered modern web apps Optional deployment of backend resources + fully managed front-end hosting
  81. 81. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T AWS Amplify Console Your app is served via Amazon's reliable content delivery network with 144 points of presence globally. Set up custom domains managed in Amazon Route 53 with a single click, plus get a free HTTPS certificate. Connect your repository to 'git push' changes to your front end and backend in a single workflow. Work on new features without impacting production. Create branch deployments linked to each feature branch. All deployments either rollout successfully or fail without requiring maintenance windows. Share yet-to-be released features with internal stakeholders by setting a username and password.
  82. 82. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T Use cases Use static site generators like Hugo or Jekyll to publish a blog. SSGs perform faster than traditional websites. Deploy SSGs with free SSL on the AWS Amplify Console. Add dynamic functionality using GraphQL or REST APIs. Use the AWS Amplify Console to deploy your front end and backend in a single workflow. PWAs offer native app-like performance, work offline, support push notifications, and can be updated over the air. Use AWS Amplify to deploy PWAs to mobile devices.
  83. 83. S U M M I T © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
  84. 84. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T Community • https://amplify.aws/community/ • https://awsappsync.dev • https://aws-amplify.github.io/ • https://github.com/aws-amplify • https://github.com/aws-amplify
  85. 85. Thank you! S U M M I T © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Ed Lima @ednergizer

×