Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Frontend and Mobile with AWS Amplify | AWS Summit Tel Aviv 2019

156 views

Published on

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.

  • Be the first to comment

  • Be the first to like this

Frontend and Mobile with AWS Amplify | AWS Summit Tel Aviv 2019

  1. 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. 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. 3. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
  4. 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. 5. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. What do all applications need? Development: Deployment:
  6. 6. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
  7. 7. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
  8. 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. 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. 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. 11. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
  12. 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. 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. 14. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
  15. 15. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
  16. 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. 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. 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. 19. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. AWS AppSync
  20. 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. 21. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
  22. 22. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Key takeaways your business AWS AppSync Amplify https://amplify.aws
  23. 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. 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

×