AWS Amplify is a JavaScript library and toolchain that makes it easy to build mobile and web applications that use cloud services. It supports frameworks like React, Vue, Angular and Ionic. It provides a CLI to create and configure AWS services like databases, APIs, authentication, analytics and hosting. Behind the scenes, it automates the creation of resources like Cognito for authentication, DynamoDB tables, Lambda functions, API Gateway, S3 and more. It also provides a JavaScript library to connect front-end apps to these cloud services. The demo shows how to create a React app, add Amplify, add features like authentication and hosting, connect the app to GitHub, deploy features to different environments

1. AWS AmplifyThe fastest way to build mobile and web apps that scale
Ahmed Samir
32
27-07-2019

2. Agenda
• Modern Apps
• Application Needs
• What is AWS Amplify?
• SPA Frameworks Supported
• What Does it do ?
• Services
• Behind the seen
• Demo

3. Modern Apps
Modern web apps offer a native app-like
user experience by serving the app front
end, or user interface, efficiently to browsers
as prebuilt HTML/JavaScript files that can
then invoke backend functionality without
reloading the page.

4. Modern Apps
Modern web applications functionality is often
spread across multiple places such as
• Databases
• Authentication services,
• Front end code running in the browser
• Backend business logic
• AWS Lambda functions running in the cloud
Complex Deployment

5. Common Application Needs
Development Deployment
User Management & Auth
Real time APIs
Client SDK and Tools
Multiple Environments
Hosting & CI/CD
Analytics

6. What is AWS Amplify?
AWS Amplify is an easy to use
JavaScript Library and Powerful
toolchain for building cloud-powered
mobile and web applications

7. SPA Frameworks Supported
Vue
React
React Native
Angular
Ionic

8. What Does it do ?
CLI
Create and Configure AWS Services
JavaScript Library
Connect your front-end app to cloud services

9. Services
• Database
• API
• Lambda /Serverless
• Authentication
• Analytics
• Hosting
• Storage

10. Behind the seen
Authentication
• Create & configure new Amazon Cognito resources for user signup & signin
• Interact with Amazon Cognito using Auth class from client Library
• Pre-configured components available for React, React Native, Angular, & Ionic
Analytics
• Create & configure new Amazon Pinpoint resources
• Record events from the client application
• Automatically records session data
• Automatically records auth data (sign ups, sign ins, & auth failures) Amazon Pinpoint

11. Behind the seen
REST API
• Create new AWS Lambda Function
• Scaffold Lambda code
• Configure API Gateway
• Interact with Lambda function with client Library
GraphQL
• Create new AWS AppSync GraphQL API
• Configure AppSync
• Perform queries, mutatations, & register subscriptions from client application
• React & React Native Components for render props

12. Behind the seen
Database API
• Create & configure table
• Create Lambda function
• Configure API Gateway
• Scaffolds Lambda code to act as REST API
• Interact with Lambda Function using client Library
Hosting
• Creates & configure S3 bucket for hosting
• Configure Amazon Cloudfront
• Publishes assets to S3
• Push updates when necessary directly
from CLI Amazon S3
Amazon DynamoDB + AWS Lambda + Amazon API Gateway
Storage
Create & configure Amazon S3 bucket
Manage user content for your app in public,
protected or private storage buckets Amazon
S3

13. Amplify
AWS Amplify This CLI & toolchain for the client greatly
lowers the barrier to entry for developers & companies
looking to build full-stack applications allowing them to
not only iterate & experiment quickly, but also giving
them the ability to do so at a lower cost

14. Demo
• Create React Application
• Add Amplify library
• Add Features like Auth , Hosting
• Create New Rep on Github
• Connect repo to the tool chain
• Add Another Feature API
• Create development branch to apply Feature Branch Deployments
• Create Development Environment
• Publish
• Switch between branches and trigger builds
• Check the custom domain
Scenario

15. Thanks