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.

Simplify front end apps.pdf

147 views

Published on

Designing, deploying and maintaining APIs for your mobile application is a challenge. In between authentication, authorization, data access, notifications, offline devices and the usual non functional requirements of availability, scalability and shrinking budgets.
During this session, I will show you how to deploy a GraphQL API, without requiring to be an API expert. I will show you how to easily integrate an authentication wall, with minimal coding. By attending this session you will be able to accelerate the development of your web & mobile applications by using simplified backends in the cloud.

  • Be the first to comment

  • Be the first to like this

Simplify front end apps.pdf

  1. 1. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. 03.04.2019 O S L O
  2. 2. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Simplify your Web & Mobile apps with cloud-based serverless backends Sébastien Stormacq, Technical Evangelist M A D 3 O S L O 03.04.2019 { "name": "Sébastien Stormacq", "role": ”Technical Evangelist", "company": "Amazon Web Services”, "twitter": "@sebsto”, “github” : "sebsto" }
  3. 3. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. A typical day in developer life
  4. 4. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. We need an app to let our customers update preference settings – our competitors just launched the same thing, so I need it fast. I don’t want to pay a lot for it, especially when no one is using it. But remember that we’re growing, so make sure it scales great and is easy to manage and operate. And you’re on your own – sorry! A typical day in developer life
  5. 5. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. We need an app to let our customers update preference settings – our competitors just launched the same thing, so I need it fast. I don’t want to pay a lot for it, especially when no one is using it. But remember that we’re growing, so make sure it scales great and is easy to manage and operate. And you’re on your own – sorry! A typical day in developer life No problem, I will use a cloud-based & serverless backend.
  6. 6. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
  7. 7. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Serverless means
  8. 8. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Serverless means No Server to Provision or Manage Scale with Usage Availability and Fault Tolerance Built-in Pay for value
  9. 9. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Serverless across the stack Database AccessCompute Developer Workflow
  10. 10. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. What obstacles developers are facing?
  11. 11. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. 165+ services TECHNICAL & BUSINESS SUPPORT Support Professional Services Optimization Guidance Partner Ecosystem Training & Certification Solutions Management Account Management Security & Billing Reports Personalized Dashboard MARKETPLACE Business Apps Business Intelligence DevOps Tools Security Networking StorageDatabases IoT Rules Engine Device Shadows Device SDKs Device Gateway Registry Local Compute MIGRATION Schema Conversion Exabyte-Scale Data Migration Application Migration Database Migration Server Migration HYBRID Integrated Networking Data Integration Integrated Identity & Access Integrated Resource & Deployment Management Integrated Devices & Edge Systems ML / IA Custom Model Training & Hosting Conversational Chatbots Image & Scene Recognition Facial Recognition & Analysis Deep Learning (Apache MXNet, TensorFlow, & others) Text to Speech Facial Search ENTERPRISE Virtual Desktops App Streaming Sharing & Collaboration Corporate Email Communications Contact Center MOBILE API Gateway Single Integrated Console Identity Sync Mobile Analytics Mobile App Testing Targeted Push Notifications DEV/OPS One-click App Deployment DevOps Resource Management Application Lifecycle Management Containers Triggers Resource Templates Build and Test Analyze and Debug Patching ANALYTICS Data Warehousing Business Intelligence Elasticsearch Hadoop/Spark Data Pipelines Streaming Data Collection ETL Streaming Data Analysis Interactive SQL Queries APP SERVICES Queuing & Notifications Workflow Email Transcoding Search INFRA Regions Availability Zones Points of Presence CORE SERVICES Compute VMs, Auto-scaling, Load Balancing, Containers, Virtual Private Servers, Batch Computing, Cloud Functions, Elastic GPUs, Edge Computing Storage Object, Blocks, File, Archivals, Import/Export, Exabyte-scale data transfer CDN Databases Relational, NoSQL, Caching, Migration, PostgreSQL compatible Networking VPC, DX, DNS SECURITY & COMPLIANCE Identity Management Key Management & Storage Monitoring & Logs Configuration Compliance Web Application Firewall Assessment & Reporting Resource & Usage Auditing Access Control Account Grouping DDOS Protection MANAGEMENT TOOLS Monitoring Manage Resources Resource Templates Configuration Tracking Server Management Service Catalogue
  12. 12. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Many lines of boiler plate code
  13. 13. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Introducing AWS Amplify
  14. 14. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify – a CLI to Provision Services $ amplify add auth $ amplify add storage $ amplify add api $ amplify push Add an Amazon Cognito User Pool Create and secure an Amazon S3 bucket Add an AWS AppSync or API Gateway Deploy via AWS CloudFormation
  15. 15. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify – A Set of Open-Source Libraries
  16. 16. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Let’s enrich a React web app
  17. 17. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Initialise amplify $ amplify init $ amplify push
  18. 18. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. #1 add authentication
  19. 19. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Provision the service $ amplify add auth $ amplify push
  20. 20. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Modify our App import Amplify from 'aws-amplify’; import { withAuthenticator } from 'aws-amplify-react’; // 'aws-amplify-react-native'; import awsmobile from './aws-exports’; Amplify.configure(awsmobile); … export default withAuthenticator(App);
  21. 21. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Demo
  22. 22. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. $ amplify add auth && amplify push AWS Cloud Clients AWS Cognito User Pool Accounts Multi Factor Authentication Signup & Signin
  23. 23. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. #2 add an API
  24. 24. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. https://2018.stateofjs.com/data-layer/overview
  25. 25. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. query GetNote { getNote(id: ”1”) { id value } } mutation CreateNote { createNote(value: “My first note”) { id value } } subscription OnCreateNote { onCreateNote { id value } } GraphQL, a query language for APIs type Note { id: ID! value: String! }
  26. 26. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. AppSync, a runtime to execute the query query GetPost { getPosts(id: ”1”) { id title comments { content } author { name } } } query GetPost { getPosts(id: ”1”) { id title comments { content } author { name } } } Amazon EC2 { "data" : { "posts" : [ { "id" : 1, "title" : "Introduction to GraphQL", "comments" : [ { "content" : "I want GraphQL for my next App!" } ], "author" : { "name" : "Sébastien Stormacq" } } ] } } Amazon DynamoDB AWS Lambda
  27. 27. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Provision the API $ amplify add api $ amplify push
  28. 28. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. $ amplify add api $ amplify add api ? Please select from one of the below mentioned services GraphQL ? Provide API name: amplifynotes ? Choose an authorization type for the API Amazon Cognito User Pool Using service: Cognito, provided by: awscloudformation The current configured provider is Amazon Cognito. ? Do you want to use the default authentication and security configuration? Yes, use the default configuration. Successfully added auth resource ? Do you have an annotated GraphQL schema? No ? Do you want a guided schema creation? true ? What best describes your project: Objects with fine-grained access control (e.g., a project management app with owner-based authorization) ? Do you want to edit the schema now? Yes Please edit the file in your editor: /<path>/amplify/backend/api/amplifynotes/schema.graphql ? Press enter to continue
  29. 29. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. A basic schema type Note { id: ID! note: String! }
  30. 30. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Transformers (aka annotations) type Note @model @auth(rules: [{allow: owner}]){ id: ID! note: String! }
  31. 31. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Demo
  32. 32. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. $ amplify add api & @model AWS Cloud Clients AWS AppSync Amazon DynamoDB Table Schemas Resolvers Data Sources type Query { getNote(...): Note listNotes(...): Note } type Mutation { createNote(...): Note updateNote(...): Note deleteNote(...): Note } type Subscription { onCreateNote (...): Note onUpdateNote (...): Note onDeleteNotet(...): Note } type Note { id: ID! value: String } queries mutations getNote listNotes updateNote deleteNote createNote Note Table Datasource IAM Role ARN Note Role ARN
  33. 33. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. #3 add search capability
  34. 34. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Update GraphQL Transformer type Note @model @auth(rules: [{allow: owner}]) @searchable { id: ID! note: String! }
  35. 35. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Provision the service $ amplify push
  36. 36. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Demo
  37. 37. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. @searchable AWS Cloud Clients AWS AppSync Amazon DynamoDB Table Schemas Resolvers Data Sources queries mutations getNote listNotes updateNote deleteNote createNote Note Table Datasource IAM Role ARN Note Role ARN type Query { getNote(...): Note listNotes(...): Note } type Mutation { createNote(...): Note updateNote(...): Note deleteNote(...): Note } type Subscription { onCreateNote (...): Note onUpdateNote (...): Note onDeleteNotet(...): Note } type Note { id: ID! value: String }
  38. 38. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. @searchable AWS Cloud Clients AWS AppSync Document Index Amazon ElasticSearch Schemas Resolvers Data Sources type Query { getNote(...): Note listNotes(...): Note searchNotes(...): [Note] } type Mutation { createNote(...): Note updateNote(...): Note deleteNote(...): Note } type Subscription { onCreateNote (...): Note onUpdateNote (...): Note onDeleteNotet(...): Note } type Note { id: ID! value: String } queries mutations getNote listNotes updateNote deleteNote createNote ElasticSearch Datasource IAM Role ARN ES Domain ARN Streaming Lambda Note Table Datasource IAM Role ARN Note Role ARN searchNotes Amazon DynamoDB Table
  39. 39. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. #4 deploy the app
  40. 40. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Provision the service $ amplify add hosting $ amplify publish
  41. 41. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. amplify add hosting $ amplify add hosting ? Select the environment setup: DEV (S3 only with HTTP) ? hosting bucket name my_hosting_bucket ? index doc for the website index.html ? error doc for the website index.html
  42. 42. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Demo
  43. 43. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. amplify publish (dev) AWS Cloud Clients Amazon Cloudfront Amazon S3 Bucket serving static web content Edge Locations
  44. 44. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. amplify publish (prod) AWS Cloud Clients Amazon Cloudfront Amazon S3 Bucket serving static web content Edge Locations
  45. 45. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Advanced Topics
  46. 46. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify black belt tips ! $ amplify checkout ENV $ amplify add ENV
  47. 47. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify black belt tips !
  48. 48. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify black belt tips !
  49. 49. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. What did we just do ? We created a front end web app backed by cloud services • User Sign-in, Sign-up (Amazon Cognito) • CRUD GraphQL API (AWS AppSync + Amazon DynamoDB) • Search API (Amazon ElasticSearch) • Hosting (Amazon S3, Amazon CloudFront) https://github.com/sebsto/amplify-react-workshop
  50. 50. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Take Away
  51. 51. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Thank you! © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Sébastien Stormacq, Technical Evangelist { "name": "Sébastien Stormacq", "role": ”Technical Evangelist", "company": "Amazon Web Services”, "twitter": "@sebsto”, “github” : "sebsto" }
  52. 52. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Please complete the session survey in the mobile app. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.

×