leadership session: innovations in mobile
TRANSCRIPT
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Leadership session: Innovations in mobile & web app development
Mohit Srivastava
M O B 3 0 6 - L
Senior Manager, PM
Amazon Web Services
Richard Threlkeld
Senior Engineer
Amazon Web Services
Frank Sconzo
Distinguished Software Engineer
Dow Jones
Alexander Graebe
Head of DX
HyperTrack
The market is growing. How will you innovate?
Mobile internetusers by 2025
Apps abandonedafter first use
Apps publishedto global app stores
you need to competewith for mindshare
Monthly mobile datausage per subscriber
by 2024
Daily time onmobile per user
Source: GSMASource: GSMA Source: Mary Meeker’sInternet Trends 2019
To meet and exceed user expectations, the modern mobile/web app must solve numerous challenges
Platform(s)
Native mobile and web app?
Differentiation
Innovative & new ways to interact
How can your app stand out?
Screen & mobility
Responsive & progressive
Always available, even offline
Security
AuthN and AuthZ by default
Data layer
Instantaneous, with real-time feedback
Network friendly (less calls / more data / just right)
Time to market
Iterative, full stack development
Developer productivity & team workflows
AWS provides developers the capabilities to exceed user expectations
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS Amplify overview
Broad support for the most popular OS platforms and frameworks
Developer tools for building, testing, deploying, and hosting the entire app –frontend and backend
The Amplify Framework, an open-source client framework, includes libraries, a CLI toolchain, and UI components
The CLI toolchain enables easy integration with AWS services such as Amazon Cognito, AWS AppSync, and Amazon Pinpoint
Amplify Framework
✓ Open-source(top 5 fastest growing project on GitHub)
✓ Opinionated
✓ Categories-based high-level abstractions
✓ Declarative
✓ Best practices built-in
✓ Escape hatches
Amplify Framework
Analytics
Track user sessions, custom
user attributes and in-app
metrics
API
HTTP requests using REST
and GraphQL with support
for real-time data
Auth
AuthN + AuthZ library with
prebuilt UI components for
your app
DataStore
On-device persistent storage
that automatically
synchronizes data between
you apps and the cloud
Interactions
Conversational bots
powered by deep learning
technologies
PubSub
Connect your app to
message-oriented
middleware on the cloud
Notifications
Push notifications with
campaign analytics and
targeting
XR
Work with augmented
reality and virtual reality
content in your apps
Predictions
Add MI/ML capabilities to
your app powered by cloud
services
Storage
Manage user content securely
in public, protected, and
private storage
Lau
nch
ing
th
is w
eek
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Amplify Clients
Use-case centric
Declarative abstractions
Xcode/Android Studio integration
(E.g., Storage.put())
AWS Mobile SDKs
AWS service-centric
Low-level generated
(E.g., AWSS3TransferUtilityUploadExpression)
Both can be used in the same app
What’s new?
import Amplify
let storagePlugin = AWSS3StoragePlugin()try! Amplify.add(plugin: storagePlugin)
Amplify.Storage.putData(key: filename, data: uploadData, options: options)
pod ‘amplify-tools’
pod ’Amplify’
pod 'AmplifyPlugins/AWSS3StoragePlugin'
Setup (Cocoapods)
Usage
Amplify iOS
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
✓ Easily add AI/ML use cases powered by Amazon AI/ML services
✓ No machine learning experience required
✓ Few lines of code
✓ Support for custom models through Amazon SageMaker
✓ Apple CoreML Vision Framework support for iOS
✓ @predictions to orchestrate multiple AI/ML actions using GraphQL
Predictions category
Amplify iOS
Predictions category use cases
✓ Translating text
✓ Text to speech
✓ Text recognition
✓ Entities recognition
✓ Label real-world objects
✓ Interpretation of text
✓ Uploading images for automatic training
✓ Transcribing text
Amplify iOS
CoreML Models
Pre-trained Models
Amplify iOS: Predictions
Union of result sets that have the highest accuracy
Network connectivity detection seamlessly switches between online and offline inferences
Amplify iOS: Predictions
Amplify Framework: Other recent launches
• New “amplify pull” for pulling down backend updates
• Local mocking
• Create sandboxes or share your Amplify project with multiple teams using environments
• Easily set up fine-grained permissions on groups and add user management to your app
• New authentication features for iOS- and Android-native apps
• Add Lambda functions or custom indexes for your Amazon DynamoDB tables with the @function and @key directives in the GraphQL Transform
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS Amplify Console
AWS Amplify Console
Amplify Console: Full-stack deployments (new)
Amplify Console: Full-stack deployments (new)
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS AppSync: Real-time and offline data with GraphQL
Real-time
collaboration
Fine-grained access
control
Offline
programming model
with sync
Multiple data
sources
HTTP Data Source
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Modern app requirements
Low-latency messages
- Banking alerts
- News stories
- Multi-player games
- Chat applications
- Shared whiteboards
- AR/VR experiences
- Document collaboration
Offline sync
- Financial transactions
- New articles
- Games
- Chat
- Document collaboration
Mental model: App data
Amplify DataStoreIntroducing
Multi-platform (iOS/Android/React Native/Web) on-device persistent
storage engine that automatically synchronizes data between
mobile/web apps and the cloud using GraphQL
Data modeling with GraphQL
Amplify DataStore API
Amplify DataStore architecture
DataStore provisioning workflow
GraphQL powers Amplify DataStore
“Sync-enabled Resolvers”
Conflict Detection
Conflict Resolutiona) Optimistic Concurrency
b) Lambda
c) Automerge
ds_pk ds_sk Name Title … _lastChangedAt _TTL
Post-xxx2019 02:12:07.123:1 Nadia Hello World 1541884315162 1541884320
Post-yyy2019 24:11:07.2:1 Pancho I’m Sleepy 1541884359527 1541884364
Post-zzz2019 24:11:07.3:3 Shaggy Running in the
park
1541884404015 1541884409
ID Name Title …
123 Nadia Hello World
2 Pancho I’m Sleepy
3 Shaggy Running in
the park
Sync-enabled resolver
createPost(input: CreatePostInput!): Post
GraphQL schema
DataStore.save(new Post(Name:”Nadia” Title:“Hello World” )
);
Automerge
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Richard Threlkeld
Senior Engineer
Amazon Web Services
AWS AppSync: Other recent launches
• Server-side caching (new) capabilities for any supported data source, improving the performance of latency-sensitive and high-throughput applications
• Local mocking, run AppSync in your laptop using the Amplify CLI
• Multi-authorization, define multiple authorization providers for fields, types and operations directly from the GraphQL schema
• Visualize your API activity (latency, frequently invoked resolvers, top requests, etc.) with the CloudWatch Log Insights integration
• Generate a GraphQL schema based on an Aurora Serverless SQL database
• Invoke any AWS service from AWS AppSync using HTTP resolvers
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Frank Sconzo
Distinguished Software Engineer
Dow Jones
Agenda
Business overview
• Introduction
• News planning
• Design sprints
• NewsGrid demo
Technical implementation
• Why AWS AppSync?
• Technology stack
• Architecture diagram
• Authentication/authorization
• Summary
News planning
News planning: personas
News Planning – A Wider View
EdGeorge
Isabel
Carol
Joanna
Fran
AthensNY
Helen
Dave Bob
Alice
News staff communication
Design sprint summary
Notify me when something changes
Maintain tight control at first Find “what I’ve worked on”
Who has touched “stuff I’ve worked on”?
Design sprint summary
Notify others and collaborate Work from my mobile device
Organize media in one tool
+++
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Why AWS AppSync?
Helpful toolingBuild quickly
Scale as needed
Lightweight payloads
Support unique client use cases
us-west-2 (Oregon)
us-east-1 (Virginia)
Amazon Simple
Storage Service
Amazon EC2
Auto Scaling
Amazon Cognito
Elastic Load
Balancing
ReactJS
Application
Amazon
Route 53
Amazon EC2
Amazon EC2
Amazon
DynamoDB
AWS Lambda AWS Lambda
AWS Lambda
AWS Lambda
Amazon Elasticsearch
Service
AWS AppSync
subscription events mutationsqueries
searches
reorder
clearEvent
synchronize
events & history
validate jwt
crea
teH
isto
ry m
uta
tio
n
up
da
teS
tory
mu
tati
on
clea
rEven
t m
uta
tio
n
Dow Jones APIs
NewsCorp Okta
global table replication
Architecture
Authentication: AWS AppSync
Types of authorization
• API_KEY
• AWS_IAM
• OPENID_CONNECT
• AMAZON_COGNITO_USER_POOLS
NewsGrid default authorization mode
• Amazon Cognito user pool
• AWS AppSync pool Id matches AWS ALB pool Id
• Leverages JWT set by AWS ALB
Additional authorization mode
• AWS Identity and Access Management for AWS Lambda
Authentication: additional providers
Schema annotations
Lambda execution role
type Story @aws_iam @aws_cognito_user_pools {
storyId: ID
slug: String!
}
type Query @aws_iam @aws_cognito_user_pools {
getStory(storyId: ID!): Story
}
{
"Effect": "Allow",
"Action": [ "appsync:GraphQL” ],
"Resource": ["arn:aws:appsync:<region>:<accountId>:apis/<apiId>/types/Query/fields/getStory" ]
}
Authentication: AWS AppSync resolver
{
“version”: “2018-05-29”
“operation”: “PutItem”
#if ( $ctx.identity )
#set ( $parts = $ctx.identity.username.toLowerCase().split("_", 2) )
#set ( $userName = $parts[1] )
#set ( $providerName = $parts[0] )
#else
$util.unauthorized()
#end
}
Summary
AWS AppSync: New real-time features
• Pure WebSockets support for GraphQL subscriptions
• Higher maximum payload size (240 KB vs. 128 KB)
• Enhanced connection and broadcast rates
• CloudWatch Metrics
• Selection set filtering
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Alexander Graebe
Head of Developer Experiences
HyperTrack
Live location as a service
RedBus built ride-sharing with HyperTrack
Seven Lakes built Just-in-Time Resourcing with HyperTrack
A&B Courier-Built Delivery Management with HyperTrack
Real-time, serverless, and multi-tenant
Views Components SDKs
Event stream ingestion
Day in the life of a live location
HyperTrack
SDK JWT authGateway Event stream ConsumeRaw events
Core processing
Process SnapshotProcessed events
Snapshots
1 2
3
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
“I took a bite off the falafel wrap with my left hand and searched Google for ‘connect dynamodb with react graphql’ with my right. Out came AWS AppSync.”
Alexander Kishinevsky
VP of Engineering
REST APIs
Day in the life of a live location (continued)
Basic authGateway Transformation
Consumer
backend
Notification
Components
GraphQL APIs
AWS AppSync
4
5
Amazon
Cognito
Snapshots
3
SDKs
Focus on what you do best, let AWS do the rest
Thank you!
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Mohit Srivastava
Twitter: @mohit
Richard Threlkeld
Twitter: @undef_obj
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.