Frontend and Mobile with AWS Amplify | AWS Summit Tel Aviv 2019
1 like376 views
The document outlines a session on frontend and mobile development using AWS Amplify, emphasizing its role in accelerating app development through hands-on demos. It covers architectural components like Amazon Cognito for user management and AWS AppSync for API integration. Key takeaways include the importance of AWS services in building scalable applications and guidance on project setup with Amplify CLI.
Frontend and Mobile with AWS Amplify | AWS Summit Tel Aviv 2019
- 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 [email protected] Ran Efrat [email protected] http://bit.ly/2SFkzkF