Tweet
Tweet

Slide 1

Slide 1 text

© 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential © 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential Sébastien Stormacq Technical Evangelist, AWS EMEA Simplify your Web & Mobile apps with cloud-based serverless backends @sebsto

Slide 2

Slide 2 text

© 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential A typical day in developer life

Slide 3

Slide 3 text

© 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential 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

Slide 4

Slide 4 text

© 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential 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.

Slide 5

Slide 5 text

© 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential

Slide 6

Slide 6 text

© 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential Serverless means

Slide 7

Slide 7 text

© 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential Serverless means No Server to Provision or Manage Scale with Usage Availability and Fault Tolerance Built-in Pay for value

Slide 8

Slide 8 text

© 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential Serverless across the stack Database Access Compute Developer Workflow

Slide 9

Slide 9 text

© 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential What obstacles developers are facing?

Slide 10

Slide 10 text

© 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential 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 Storage Databases 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

Slide 11

Slide 11 text

© 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential Many lines of boiler plate code

Slide 12

Slide 12 text

© 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential Introducing AWS Amplify

Slide 13

Slide 13 text

© 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential 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

Slide 14

Slide 14 text

© 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential Amplify – A Set of Open-Source Libraries

Slide 15

Slide 15 text

© 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential Let’s enrich a React web app

Slide 16

Slide 16 text

© 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential Initialise amplify $ amplify init $ amplify push

Slide 17

Slide 17 text

© 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential #1 add authentication

Slide 18

Slide 18 text

© 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential Provision the service $ amplify add auth $ amplify push

Slide 19

Slide 19 text

© 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential 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);

Slide 20

Slide 20 text

© 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential Demo

Slide 21

Slide 21 text

© 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential $ amplify add auth && amplify push AWS Cloud Clients AWS Cognito User Pool Accounts Multi Factor Authentication Signup & Signin

Slide 22

Slide 22 text

© 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential Hosted UI & Federated Authentication AWS Cloud Clients AWS Cognito User Pool Accounts Multi Factor Authentication Signup & Signin

Slide 23

Slide 23 text

© 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential One line of code

Slide 24

Slide 24 text

© 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential #2 add an API

Slide 25

Slide 25 text

© 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential https://2018.stateofjs.com/data-layer/overview

Slide 26

Slide 26 text

© 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential 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! }

Slide 27

Slide 27 text

© 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential 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

Slide 28

Slide 28 text

© 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential Provision the API $ amplify add api $ amplify push

Slide 29

Slide 29 text

© 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential $ 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: //amplify/backend/api/amplifynotes/schema.graphql ? Press enter to continue

Slide 30

Slide 30 text

© 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential A basic schema type Note { id: ID! note: String! }

Slide 31

Slide 31 text

© 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential Transformers (aka annotations) type Note @model @auth(rules: [{allow: owner}]){ id: ID! note: String! }

Slide 32

Slide 32 text

© 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential Demo

Slide 33

Slide 33 text

© 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential $ 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

Slide 34

Slide 34 text

© 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential #3 add search capability

Slide 35

Slide 35 text

© 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential Update GraphQL Transformer type Note @model @auth(rules: [{allow: owner}]) @searchable { id: ID! note: String! }

Slide 36

Slide 36 text

© 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential Provision the service $ amplify push

Slide 37

Slide 37 text

© 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential Demo

Slide 38

Slide 38 text

© 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential @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 }

Slide 39

Slide 39 text

© 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential @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

Slide 40

Slide 40 text

© 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential #4 deploy the app

Slide 41

Slide 41 text

© 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential Provision the service $ amplify add hosting $ amplify publish

Slide 42

Slide 42 text

© 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential 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

Slide 43

Slide 43 text

© 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential Demo

Slide 44

Slide 44 text

© 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential amplify publish (dev) AWS Cloud Clients Amazon Cloudfront Amazon S3 Bucket serving static web content Edge Locations

Slide 45

Slide 45 text

© 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential amplify publish (prod) AWS Cloud Clients Amazon Cloudfront Amazon S3 Bucket serving static web content Edge Locations

Slide 46

Slide 46 text

© 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential Advanced Topics

Slide 47

Slide 47 text

© 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential Amplify black belt tips $ amplify checkout ENV $ amplify add ENV

Slide 48

Slide 48 text

© 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential Amplify black belt tips

Slide 49

Slide 49 text

© 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential Amplify black belt tips

Slide 50

Slide 50 text

© 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential What did we just do ? We created a front end web app backed by cloud services • User Sign-in, Sign-up, Identity Federation (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

Slide 51

Slide 51 text

© 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential Take Away

Slide 52

Slide 52 text

© 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential Tomorrow, Saturday 18th 10:30 Une introduction à AWS pour les développeurs 13:40 Utilisez des services d'intelligence artificielle dans vos applications sans être expert en apprentissage machine. 15:30 Hébergez votre site web sur AWS, en serverless et avec intégration continue.

Slide 53

Slide 53 text

© 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential © 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential Sébastien Stormacq Technical Evangelist, AWS EMEA Thank you ! @sebsto