by John Burry, Sr. Manager of Solution Architecture, AWS

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. Great Mobile Apps Run on AWS

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. 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. 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. 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. Cognito Identity & IAM variables

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. Mobile Web

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. 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. 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. Angular + API Gateway

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. App: API
Amazon
RDS
Amazon API
Gateway
virtual private cloud
Amazon
EC2/ECS
Routing
API Negotiation

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. 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. 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. Mobile Web Analytics

20. Mobile Web SDK Session Management
Configure default session length
Force event submission anytime
Window.localStorage ensures
persistence through browser/tab
exiting

21. Thank You!