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.
© 2016, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Richard Threlkeld, AWS
12/1/2016
Real-World Deep...
Agenda
• Common Concerns
• Overlapping Patterns
• Emerging Patterns
• Platforms
• Native Apps
• Hybrid Apps
• Mobile Web
Great Mobile Apps Run on AWS
Table Stakes
- AuthN/AuthZ
- Fine-grained access control
- Static asset download/refresh
- File uploads (images, video, et...
Architecture Concerns
1. System
1. Scale
2. Costs
3. Security
2. App
1. Performance
• Network latency
• UX
• CPU
• Battery...
Architecture: System
Token exchange
Session storage
Dataset sync
Amazon
CloudFront
Amazon
S3 Amazon
DynamoDB
Amazon
RDS
Am...
Granular Auth Controls
IAM Roles
• Fine-grained API access
• Enterprise SAML Federation
User Pool Lambda Triggers
Cognito ...
Amazon Cognito Identity and AWS Identity and Access
Management Variables
Amazon Cognito Points to Remember
Unique Identity
- DDB indexes
Short-Term Credentials
• Credentials object triple
• Token...
Native Apps
Background vs. Real-time
https://d0.awsstatic.com/whitepapers/lambda-architecure-on-for-batch-aws.pdf
Analytics Lifecycle
SDK/REST API
(Android, iOS, JavaScript, Unity, Xamarin)
Amazon
MobileAnalytics
Daily/Monthly Active Us...
Assume a Role with Cognito
Create an instance of your
Mobile Analytics Application
Create->Record->Submit Events
Submittin...
Mutations
API
Gateway
AWS
Lambda
API Gateway-Generated SDK
- Signed Requests
Amazon Cognito:
User Pools + Identity Amazon
...
API Gateway-Generated SDK
Provider
(APNS, GCM, MPNS,…)
Token Request
Amazon
SNS
SNS Platform Application
“Token”
Platform Endpoint
- Upload Certific...
Fine-grained Control
Send to Mobile Analytics
Sync datasets across devices
Add token to SNS
Add email/phone to SNS
Provider
(APNS, GCM, MPNS,…)
Amazon
SNS
Platform Application
“Token”
Platform Endpoint
Upload Token
- AKA “Create Platform...
State Management
Cognito Datasets
• onSuccess()
• onFailure()
• onConflict()
• onDatasetDeleted()
• onDatasetsMerged()
State and User Preferences – Amazon Cognito Option
Amazon
Cognito
<k1,v1>
…
<kn,vn>
Administrator
AWS
Lambda
Amazon
Kinesi...
DynamoDB
Access via Cognito assigned Role
Databases
Relational
Create interfaces
- REST/GraphQL/JSON-API
- API Gateway, EL...
State & User Preferences – DynamoDB Option
Administrator
Push Notification
AWS
Lambda
Amazon
Kinesis
Hash String Map
Hash ...
Network Management
Polling & connection setup are expensive
- Battery, CPU
- Wake devices via push then choose medium
- AP...
Xhr, Websocket,
etc.
Optional user
notification
Websockets
Application
Load Balancing
Amazon
ECS/EC2
AWS IoT
var connection = new WebSocket('ws://alb-XXXX.us-
east-1.elb....
Hybrid Apps
Cordova
Formerly known as PhoneGap
Create mobile apps with HTML, CSS,
JavaScript
Extended via plugins
WebView intermediary...
Using AWS Services from Cordova
1. Download and include aws-sdk.min.js.
2. Reference in Cordova’s index.html:
3. Grant AWS...
Cognito and Cordova
Push Notifications and Cordova
Yes you can initiate SNS-based Push to Cordova!
ANDROID:
$cordova plugin add phonegap-plugi...
React Native
AWS Published SDK available:
• AWSLABS https://github.com/awslabs/aws-sdk-react-
native
Can easily add in AWS...
React Native with AWS SDKs
1. Import Native AWS SDK & Bridging Modules
2. Create Singleton
React Native with AWS SDKs
3. Initialize in JavaScript
3. Add/Invoke methods
Demo: React Native with
Websockets using AWS IoT
Mobile Web
SDK Generation
- Native/Hybrid have SDKs bundled
- JavaScript SDK
- Builder: https://sdk.amazonaws.com/builder/js/
- Can u...
Common Mobile Web Requirements
• Reactive design for different form factors
• Non-blocking HTTP actions
• Auto refreshing
...
Mobile Web by Example
• React/Angular
• Component-based design, minimize round-trips
• State updates and dynamic page refr...
Angular + API Gateway
Toolbox
Webpack
- Code split on API Gateway
resources
- deferred loading, bundling
React Router
• Match routes with Servic...
Web Server Configuration
• S3 bucket
• Enable “Static Website” on bucket properties
• Creates: BUCKETNAME.s3-website-us-ea...
Serverless Mobile Web Zoom-In
Amazon
CloudFront
Amazon
S3
API
Gateway
Mobile apps
1. Optional
CDN hosting
of content
2. We...
Demo: Serverless Mobile Web
Mobile Web Analytics
Native
Interrogates app lifecycle
- Background queue filled with
session and custom events
- Session events batched & sent...
Enhancing JavaScript Sessions
Debate: Apples vs. oranges?
Modern browsers offer visibilitychange() event:
https://develope...
Mobile Engagement
Emerging consumer pattern:
1. Mobile users making requests
2. Mobile users fulfilling requests
Needs:
1....
Emerging Pattern: Request Tracking
Amazon API
Gateway
Amazon
SQS
Amazon
SNS
Amazon
DynamoDB
AWS
Lambda
Amazon
SQS
Lambda #...
Final Thoughts
Think Big & apply known patterns to new industries
Tools designed for one domain can be used in others
You ...
Thank you!
Remember to complete
your evaluations!
Upcoming SlideShare
Loading in …5
×

AWS re:Invent 2016: Deep-Dive: Native, Hybrid and Web patterns with Serverless and AWS Mobile Services (MBL404)

1,194 views

Published on

In this deep-dive session, we outline how to leverage the appropriate AWS services for sending different types and sizes of data, such as images or streaming video. We'll cover common real-world scenarios related to authentication/authorization, access patterns, data transfer and caching for more performant Mobile Apps. You learn when you should access services such as Amazon Cognito, Amazon DynamoDB, Amazon S3, or Amazon Kinesis directly from your mobile app, and when you should route through Amazon API Gateway and AWS Lambda instead. Additionally, we cover coding techniques across the native, hybrid, and mobile web using popular open-source frameworks to perform these actions efficiently, and with a smooth user experience.

Published in: Technology
  • Be the first to comment

AWS re:Invent 2016: Deep-Dive: Native, Hybrid and Web patterns with Serverless and AWS Mobile Services (MBL404)

  1. 1. © 2016, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Richard Threlkeld, AWS 12/1/2016 Real-World Deep Dive: Native, Hybrid, and Web with Serverless and AWS Mobile Services MBL404
  2. 2. Agenda • Common Concerns • Overlapping Patterns • Emerging Patterns • Platforms • Native Apps • Hybrid Apps • Mobile Web
  3. 3. Great Mobile Apps Run on AWS
  4. 4. 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
  5. 5. Architecture Concerns 1. System 1. Scale 2. Costs 3. Security 2. App 1. Performance • Network latency • UX • CPU • Battery 2. Usability • Accessibility 3. Security 4. State Related: Development team speed New-joiner contribution Shared skills
  6. 6. 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/Amazon ECS Session data Custom event attributes Custom metrics Routing API Negotiation Static content Images Video Binary data Uploads
  7. 7. 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 Takeaway: Sort out Identity and Auth; everything else gets easier
  8. 8. Amazon Cognito Identity and AWS Identity and Access Management Variables
  9. 9. Amazon Cognito Points to Remember Unique Identity - DDB indexes Short-Term Credentials • Credentials object triple • Token, access key, secret key • Pass to AWS SDKs • Sigv4 auto-signing Amazon Cognito User Pools - SRP - Passwords never travel over wire - Verifier calculated and stored http://srp.stanford.edu/ndss.html - Developer-only attributes - API Gateway back-end calls - Don’t send outside infra
  10. 10. Native Apps
  11. 11. Background vs. Real-time https://d0.awsstatic.com/whitepapers/lambda-architecure-on-for-batch-aws.pdf
  12. 12. Analytics Lifecycle SDK/REST API (Android, iOS, JavaScript, Unity, Xamarin) Amazon MobileAnalytics Daily/Monthly Active Users Sessions Sticky Factor In-app Revenue Lifetime Value (LTV) Retention …. and more (Pre-defined metrics with a few lines of code) Amazon S3 Amazon Redshift Amazon DynamoDB Amazon EMR Amazon Machine Learning Amazon API Gateway Amazon Elasticsearch Service Amazon RDS Submit Query
  13. 13. Assume a Role with Cognito Create an instance of your Mobile Analytics Application Create->Record->Submit Events Submitting Events: Android
  14. 14. Mutations API Gateway AWS Lambda API Gateway-Generated SDK - Signed Requests Amazon Cognito: User Pools + Identity Amazon Kinesis Amazon DynamoDB POST GET Service Proxy arn:aws:iam::ACCOUNT:*:user/*
  15. 15. API Gateway-Generated SDK
  16. 16. Provider (APNS, GCM, MPNS,…) Token Request Amazon SNS SNS Platform Application “Token” Platform Endpoint - Upload Certificates, API Keys, etc. Upload Token - AKA “Create Platform Endpoint” - Client code in App Delegate, etc. Client Push Token Management
  17. 17. Fine-grained Control Send to Mobile Analytics Sync datasets across devices Add token to SNS Add email/phone to SNS
  18. 18. Provider (APNS, GCM, MPNS,…) Amazon SNS Platform Application “Token” Platform Endpoint Upload Token - AKA “Create Platform Endpoint” Add Email to Topic Add Phone to Topic Alternative Options Amazon API Gateway Amazon Cognito User Pool AWS Lambda Topic Workflow Triggers /myapi/register Custom Authorizers
  19. 19. State Management
  20. 20. Cognito Datasets • onSuccess() • onFailure() • onConflict() • onDatasetDeleted() • onDatasetsMerged()
  21. 21. State and User Preferences – Amazon Cognito Option Amazon Cognito <k1,v1> … <kn,vn> Administrator AWS Lambda Amazon Kinesis Cognito Events Cognito Streams Push Synchronization
  22. 22. DynamoDB Access via Cognito assigned Role Databases Relational Create interfaces - REST/GraphQL/JSON-API - API Gateway, ELB/ALB - Common: ASG behind ELB using RDS Multi-AZ - Platform HTTP calls - iOS: NSURLConnection, NSURLSession, etc. - Android: HttpClient(), HttpGet(),etc.
  23. 23. State & User Preferences – DynamoDB Option Administrator Push Notification AWS Lambda Amazon Kinesis Hash String Map Hash String Map Hash String Map Amazon DynamoDB Amazon SNS Trigger Amazon Aurora
  24. 24. Network Management Polling & connection setup are expensive - Battery, CPU - Wake devices via push then choose medium - API Gateway GET/POST, Long Polling, Websocket, HTTP/2, Amazon Cognito Sync, MQTT, etc. Aggregate inbound/outbound messages Re-use connections where possible
  25. 25. Xhr, Websocket, etc. Optional user notification
  26. 26. Websockets Application Load Balancing Amazon ECS/EC2 AWS IoT var connection = new WebSocket('ws://alb-XXXX.us- east-1.elb.amazonaws.com:443/Livestream'); wss://<endpoint>.iot.<region>.amazonaws.com/mqtt Websocket over MQTT - Subscribe - Publish
  27. 27. Hybrid Apps
  28. 28. Cordova Formerly known as PhoneGap Create mobile apps with HTML, CSS, JavaScript Extended via plugins WebView intermediary for rendering/communicating with platform Ionic • UI framework built on Cordova using Angular
  29. 29. Using AWS Services from Cordova 1. Download and include aws-sdk.min.js. 2. Reference in Cordova’s index.html: 3. Grant AWS endpoints access: 4. Call AWS SDK functions from index.js: • Start with Amazon Cognito in onDevice
  30. 30. Cognito and Cordova
  31. 31. Push Notifications and Cordova Yes you can initiate SNS-based Push to Cordova! ANDROID: $cordova plugin add phonegap-plugin-push –variable SENDER_ID="YOURID" iOS: $cordova plugin add phonegap-plugin-push
  32. 32. React Native AWS Published SDK available: • AWSLABS https://github.com/awslabs/aws-sdk-react- native Can easily add in AWS Native SDKs
  33. 33. React Native with AWS SDKs 1. Import Native AWS SDK & Bridging Modules 2. Create Singleton
  34. 34. React Native with AWS SDKs 3. Initialize in JavaScript 3. Add/Invoke methods
  35. 35. Demo: React Native with Websockets using AWS IoT
  36. 36. Mobile Web
  37. 37. SDK 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
  38. 38. Common Mobile Web 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
  39. 39. Mobile Web by Example • React/Angular • Component-based design, minimize round-trips • State updates and 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
  40. 40. Angular + API Gateway
  41. 41. Toolbox Webpack - Code split on API Gateway resources - deferred loading, bundling React Router • Match routes with Services - /Login  Cognito - Alternative: API Gateway or ALB - /*  API Gateway {proxy+} Infrastructure matters too! - Core rendering as needed - Homepage code shouldn’t block login page or crypto libs - Async load state when necessary - User interactions - Pagination - Lazy load extra branches
  42. 42. Web Server 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
  43. 43. 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 critical libs first, lazy load others 5. Script libraries use XHR browser requests to API Gateway stage endpoints 4. Cognito AuthN/AuthZ: User Pools + Identity Serverless Express wrapper
  44. 44. Demo: Serverless Mobile Web
  45. 45. Mobile Web Analytics
  46. 46. Native Interrogates app lifecycle - Background queue filled with session and custom events - Session events batched & sent Backgrounded time > AWSValueSessionResumeDelay - Custom events sent anytime - Best practice: use onPause, onStop, onResume SDK Session Management Web Configure default session length Force event submission anytime Window.localStorage ensures persistence through browser/tab exiting
  47. 47. Enhancing JavaScript Sessions Debate: Apples vs. oranges? Modern browsers offer visibilitychange() event: https://developer.mozilla.org/en-US/docs/Web/Events/visibilitychange extendSession() stopSession()
  48. 48. Mobile Engagement Emerging consumer pattern: 1. Mobile users making requests 2. Mobile users fulfilling requests Needs: 1. Order tracking 2. Notifications (two-way) 3. SLA management
  49. 49. Emerging Pattern: Request Tracking Amazon API Gateway Amazon SQS Amazon SNS Amazon DynamoDB AWS Lambda Amazon SQS Lambda #1 TimeStamp CognitoID Acknowledged DelaySeconds = 15 mins Lambda #2 SLA:TimeStamp+30min = expTimeStamp remaining = expTimeStamp – Time.Now() IF remaining >0 { //Resubmit to SQS w/ //visibility timeout remaining }ELSE{ //Business escalation logic } Poll for new messages Amazon MobileAnalytics
  50. 50. Final Thoughts Think Big & apply known patterns to new industries Tools designed for one domain can be used in others You can optimize and enhance on all platforms - Hire to build a good culture Focus on client & infrastructure end-to-end interactions
  51. 51. Thank you!
  52. 52. Remember to complete your evaluations!

×