Every project which involves a mobile or a web application frontend, shares similar challenges. Where do we start from? How will we manage our users? How can we provide a secure API backend to serve our frontend requests? How can we track application usage? This session can help with understanding how AWS offers services like Amplify, AppSync, Cognito and API Gateway to address some of those challenges, increasing your agility and allowing you to focus on your strengths.

1. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Innovate –
Frontend and Mobile with AWS Amplify
Moshe Shelly
Solutions Architect
Amazon Web Services
D E V 3 0 3
Ran Efrat
Solutions Architect
Amazon Web Services

2. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
What to expect from this session?
• Frontend and mobile development on AWS
• How we can use Amplify to accelerate app development
• Hands on Demos – Minimum Slides

3. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.

4. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWSome Airlines – Architecture
FrontendData Microservices Common
Interfaces
Machine Learning Services
Serverless Scheduler Data lake and Analytics
Flights
Resources
31
2
4
5

5. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
What do all applications need?
Development:
Deployment:

6. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.

7. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.

8. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Frontend Architecture – AWSome Airlines
AWS Cloud
Web App
Dashboard
Mobile
App
Frontend
Region
Amazon CloudFront
Amazon Route 53
Amazon S3
Hosting
Role
Amazon Cognito
User Management

9. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Amazon Cognito
• Simple and Secure User Sign-Up, Sign-In,
and Access Control
Managed User
Directory
Federation AWS
Credentials
Standard
Tokens
JWT
Advanced
Security Features
Hosted
UI

10. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Frontend Architecture – AWSome Airlines
AWS Cloud
Web App
Dashboard
Mobile
App
Frontend
Region
Amazon CloudFront
Amazon Route 53
Amazon S3
Hosting
Role
Amazon Cognito
User Management
AWS AppSync Resolvers
Backend API
car
AWS
IoT Core
Amazon
SNS
car
car

11. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.

12. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Download and set up Amplify CLI
$ npm install -g @aws-amplify/cli
$ amplify configure
Download Amplify Library
$ npm install aws-amplify
$ npm install aws-amplify-react/aws-amplify-angular/aws-amplify-vue

13. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Amplify CLI makes project setup easy
$ amplify init
$ amplify add auth
$ amplify add analytics
$ amplify add api
$ amplify push
Initialize a project and environment
Add an Amazon Cognito User Pool
Create an Amazon Pinpoint endpoint
Provision an API and data infrastructure
Deploy via AWS CloudFormation

14. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.

15. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.

16. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
APIs for frontend systems
• How to build an API backend for our
frontend?
• Which technology should we use?
• How do we authorize the use of this API?

17. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
What is GraphQL?
• Open, declarative data-fetching specification
• != Graph database
• Use NoSQL, Relational, HTTP, etc.
/flights
/flightHeaders
/flightsWithTasks
/tasksByResourceID
/tasks
/tasksByFlight
Traditional data-fetching GraphQL

18. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
A query language for APIs…
Queries
query GetPost {
getPost(id: ”1”) {
id
title
}
}
mutation CreatePost {
createPost(title: “TLV Summit”) {
id
title
}
}
subscription OnCreatePost
{
onCreatePost {
id
title
}
}
Mutations Subscriptions

19. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS AppSync

20. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
How does AWS AppSync work?
AWS AppSync
Resolvers
Lambda
Function
DynamoDB
Table
HTTP
Endpoint
Amazon
Elasticsearch
Data SourcesGraphQL Schema and objects
Web App
Mobile
App
Frontend

21. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.

22. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Key takeaways
your business
AWS AppSync
Amplify
https://amplify.aws

23. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
What’s next?
FrontendData Microservices Common
Interfaces
Machine Learning Services
Serverless Scheduler Data lake and Analytics
Flights
Resources
31
2
4
5

24. Thank you!
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Moshe Shelly
moshes@amazon.com
Ran Efrat
ranefrat@amazon.com
http://bit.ly/2SFkzkF