This document discusses using AWS Amplify to build applications in a lean and agile way. It provides an overview of AWS Amplify, including that it is a CLI and toolchain for client development that allows creating sophisticated serverless backends fast using services like Amazon Cognito, AWS AppSync, Amazon S3, and AWS Lambda. It then demonstrates building a note taking app using these AWS services with AWS Amplify.

1. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Build your APPs in Lean and Agile Way
using AWS Amplify
Jayson Hsieh, Solutions Architect | 2018 Taipei

2. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Startup DNA
Build FAST！ Scalable
Limited
Resources

3. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
https://mobileapplicationtestingtimes.wordpress.com/2013/04/04/the-road-to-a-successful-mobile-app-strategy/
http://theleanstartup.com/principles

4. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
What is AWS Amplify?
AWS Amplify is a CLI & Toolchain for the client

5. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
What Does it Do?
CLI
Creates & configures AWS
services

6. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Create sophisticated serverless backends fast
The CLI includes support for
authentication, analytics, functions,
REST/GraphQL APIs, and much more.
The toolchain uses AWS CloudFormation
and enables you to add, modify, and share
configurations.

7. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Hosting for static assets and websites
Distribute content to end users with low
latency and high data transfer speeds via a
secure, durable, and scalable object
storage infrastructure. You can perform
local testing of AWS Lambda functions,
connect them to your APIs, and deploy
everything in one command.

8. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Easily create APIs and generate client code
Define your API using the GraphQL
Schema Definition Language (SDL). The
toolchain will expand and transform a full
CloudFormation template that implements
your data model.

9. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
What Does it Do?
JavaScript Library
Connects your front-end application to cloud
services

10. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
JavaScript Library for frontend development
• JavaScript & TypeScript
• Framework support:
• React + React Native
• Angular, Vue
• Ionic

11. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
What kind of services?
 Authentication (Amazon Cognito)
 Storage (Amazon S3 & Amazon DynamoDB)
 Function (AWS Lambda)
 API (AWS AppSync & Amazon API Gateway)
 Analytics (Amazon Pinpoint)
 Hosting (Amazon S3 and Amazon CloudFront)
 Notifications (Amazon Pinpoint)
 Interactions (Amazon Lex)
 And more…

12. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Let’s Start Building an APP!

13. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Architecture for the Demo - Note APP
Amazon S3
Amazon Cognito
AWS AppSync Amazon DynamoDB
GraphQL
Amazon CloudFront
Amplify

14. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Demo
Pre-requisition
1. Install Amplify CLI, React
2. Create React APP
3. Add Amplify JS Library to our project
Configure
4. Configure Amplify CLI
5. Initiate Amplify project
6. Add functionality to our application
Push and Serve
7. Push the change to update the back-end service
8. Start the service and test it locally
9. Host the front-end service to AWS for publicity

15. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Amazon Cognito

16. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Developing Auth Infrastructure is Difficult
Source: images.huffingtonpost.com/2015-06-18-1434640796-8854716-frustration.jpg

17. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Amazon Cognito Identity
Your User Pools
You can easily and securely add sign-up
and sign-in functionality to your mobile and
web apps with a fully-managed service that
scales to support 100s of millions of users.
Federated Identities
Your users can sign in with third-party
identity providers, such as Facebook and
SAML providers, and you can control
access to AWS resources from your app.
Sign in
Username
Password
Submit
Facebook
Corporate
OIDC
Sign in with
SAML

18. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Comprehensive Support for Identity Use Cases

19. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Amazon Cognito
User Pools
Amazon API Gateway
Custom Authorizer
Lambda Function
/pets
/n…
Amazon
DynamoDB
Throttling
Cache
Logging
Monitoring
Auth
JWT Token
I want to authenticate
people
…on
browser or mobile
…against
Amazon Cognito User Pools
…to access
Amazon API Gateway
1
2
3
4
5

20. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Amazon Cognito: Identity Management Scenarios
Business to Consumer
IoT Scenarios
Business to Employee
SAML
Federation
Enterprise
Directory
Partner A
Partner B
Business to Business
AWS IoT
API Gateway with Lambda
Deny
Allow
Custom
Authorizer
Access control for AWS
Resources
AWS IAM

21. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
AWS AppSync

22. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
What Is GraphQL?
/posts /comments /authors
REST API
/posts /comments /authors
GraphQL API

23. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
How to use GraphQL
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

24. © 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, API keys)

25. © 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 with
GraphQL Resolvers
AppSync Updates Data
in Real Time and Manages
Data when Offline
__________
______________
___________
_________
___________
____________
__________

26. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Amazon API Gateway AWS AppSync
&

27. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Build your APPs in Lean and Agile Way?
Start from here: https://aws-amplify.github.io/
Thank you!