Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

Deep-Dive: Building Mobile Web Applications with AWS Mobile SDK

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Wird geladen in …3
×

Hier ansehen

1 von 21 Anzeige

Weitere Verwandte Inhalte

Diashows für Sie (20)

Andere mochten auch (20)

Anzeige

Ähnlich wie Deep-Dive: Building Mobile Web Applications with AWS Mobile SDK (20)

Weitere von Amazon Web Services (20)

Anzeige

Aktuellste (20)

Deep-Dive: Building Mobile Web Applications with AWS Mobile SDK

  1. 1. © 2016, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Deep-Dive: Building Mobile Web applications with the AWS Mobile SDK John Burry, Sr Mgr AWS Solutions Architecture October 25, 2016
  2. 2. Great Mobile Apps Run on AWS
  3. 3. Table Stakes - AuthN/AuthZ - Fine grained access control - Static asset download/refresh - File uploads (images, video, etc.) - User/System Notifications - API interaction (GET, POST, etc.) - REST, GraphQL, JSON-API - Async communications - Optimistic Updates - State - User preferences (cross-device) - Systems of record/tables - Mutability - Analytics - Session information - Custom events
  4. 4. Architecture concerns 1. System 1. Scale 2. Costs 3. Security 2. App 1. Performance • Network latency • UX 2. Usability • Accessibility 3. Security 4. State • Data flow/mutability Related: Development team speed New-joiner contribution Shared skills
  5. 5. Architecture: System Token Exchange Session Storage Dataset Sync Amazon CloudFront Amazon S3 Amazon DynamoDB Amazon RDS Amazon MobileAnalytics Amazon SNS Amazon Cognito Amazon API Gateway virtual private cloud AWS Lambda Amazon EC2/ECS Session data Custom Event Attributes Custom Metrics Routing API Negotiation Static content Images Video Binary data Uploads
  6. 6. Granular Auth Controls IAM Roles • Fine-grained API access • Enterprise SAML Federation User Pool Lambda Triggers Cognito Policy Variables API Gateway Authorizers • User Pool Authorizer • Custom Authorizer
  7. 7. Cognito Identity & IAM variables
  8. 8. Cognito Extras Unique Identity - DDB Indexes Short Term Credentials • Credentials Object triple • Token, Access Key, Secret Key • Pass to AWS SDKs • Sigv4 auto-signing Cognito User Pools - SRP - Passwords never travel over wire - Verifier calculated and stored http://srp.stanford.edu/ndss.html - Developer-Only attributes - API Gateway backend calls - Don’t send outside infra
  9. 9. Mobile Web
  10. 10. AWS SDK for JavaScript Generation - Native/Hybrid have SDKs bundled - JavaScript SDK - Builder: https://sdk.amazonaws.com/builder/js/ - Can use for Cordova too - Use w/ Frameworks & tooling - Deferred/selective loading
  11. 11. Mobile Frontend Requirements • Reactive Design for different form factors • Non-blocking HTTP actions • Auto Refreshing • State Management • Routing • List Restaurants, view Menu/Orders • Actions • Place/Delete Orders • ES6 syntax
  12. 12. Common Mobile Frontend Toolbox • React/Angular • Component-based design, minimize round-trips • State updates & dynamic page refresh • React Router • /restaurants, /menu:id, /order:id • Babel • ES6 compiler • Axios • Promise based XHR abstraction • Materialize • Reactive UX • Based on Material Design • Session Storage • Keep track of latest operations *For lab we load via CDN. This is not optimized for poor networks/low-powered devices. Production deployments should look at code splitting, deferred loading, static build tooling.
  13. 13. Angular + API Gateway
  14. 14. Toolbox Webpack - Code Splitting, deferred loading, bundling React Router • Routes can match up to AWS Services - /Login  Cognito - Alternative: API Gateway or ALB - /*  API Gateway {proxy+}
  15. 15. App: API Amazon RDS Amazon API Gateway virtual private cloud Amazon EC2/ECS Routing API Negotiation
  16. 16. Webserver Configuration • S3 bucket • Enable “Static Website” on bucket properties • Creates: BUCKETNAME.s3-website-us-east-1.amazonaws.com (regions vary) • Add access policy to bucket • Browser GET = s3:GetObject • Ensure CORS is enabled for XHR calls to API Gateway
  17. 17. Serverless Web API Gateway AWS Lambda Amazon EC2 Static S3 Website - AWS JavaScript SDK - Signed requests - Angular, React, Etc. - API Gateway SDK Generator Cognito: User Pools + Identity Amazon RDS Aurora
  18. 18. Serverless Mobile Web Zoom-In Amazon CloudFront Amazon S3 API Gateway Mobile apps 1. Optional CDN hosting of content 2. Webpage loaded with Script references 3. Browser downloads external libraries from CDN 4. Script libraries use XHR browser requests to API Gateway stage endpoints
  19. 19. Mobile Web Analytics
  20. 20. Mobile Web SDK Session Management Configure default session length Force event submission anytime Window.localStorage ensures persistence through browser/tab exiting
  21. 21. Thank You!

Hinweis der Redaktion

  • Do all these apps run Native only Mobile? Probably not.
    Many of them have similar features and concerns – TABLE STAKES.
  • Not a comprehensive list! Just examples
    Less friction on this list allows you to focus on your business, analysis/big data
    Mutability can also be inserting of data to AWS w/ Kinesis
  • Routing with Usability
  • Left hand side is app communication components with AWS
    Right hand side is AWS backend components communicating with each other
  • Sigv4 will digitally verify authenticity of requests
    Problem with salting/hashing passwords in DB
    Rainbow Tables, MD5 collisions
    GPUs can compute billions hashes/sec
    Dictionary attacks, brute-force
  • Architect your JS to only download code needed to render content at a specific time
  • Routes can correspond to different API Gateway Resources.
    Greedy paths are nice here as it means the client code changing doesn’t necessarily mean infra change is needed
    Can also leverage base compute to a VPC if necessary for certain business compliance or legacy needs.
  • Microservices and Serverless

×