AWS AppSync Powers Mobile Apps with Real-time and Offline Data

© 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Mobile State of the Union
AMIT PATEL
G e n e r a l M a n a g e r , A W S M o b i l e
AWS re:INVENT
N o v e m b e r 2 8 , 2 0 1 7

MOBILE INDUSTRY TRENDS
Time spent in apps
and growing
1.6T
hours
Source: AppAnnie
New enterprise apps
built with web
technologies
50%+
Source: AWS
JavaScript – most
commonly used
programming
language
66.7%▲
Source: Stack Overflow

Building High Quality,
Cloud-Enabled Apps

THREE SIMPLE STEPS
1. Pick a Platform
Mobile Hub
2. Set Up Cloud Services
Native SDKs
3. Connect Your App
Mobile CLI AWS Amplify

MOBILE CLI: SETTING UP CLOUD SERVICES
> awsmobile init
> awsmobile user-signin enable
Initialize your app
Enable User Sign-in
Supported services:
• user-signin (Amazon Cognito)
• analytics (Amazon Pinpoint)
• database (Amazon DynamoDB)
• user-files (Amazon S3)
• cloud-api (API GW & AWS
Lambda)
Web app deployment support:
• hosting (Amazon S3 and
Amazon CloudFront)

THE AWS AMPLIFY LIBRARY
JavaScript Library
- Declarative interfaces
- Convention over configuration
Categories for application
programming with Cloud services
- Auth, Analytics, Storage, API
- Caching, i18n, logging,
message bus
React/React Native extensions
- Higher-order components
- Native bridging for
mathematical operations
(Amazon Cognito User Pools)
- Open sourced – Apache 2.0
- Implemented with AWS
services, open for external
contribution

USING AMPLIFY TO CONNECT YOUR APP
Higher-order components
enable a functional sign-in
UI with just two lines of code

TESTING AND DEPLOYING YOUR WEB APP
Test your web app on real devices
for performance insights
Host your web app on S3 (served
through CloudFront)
> awsmobile publish --test

THE MOBILE HUB CONSOLE
Use the Mobile Hub console to add more platforms and features
> awsmobile console

APP DATA: HARD PROBLEMS REMAIN
Data requirements
vary across devices
and become harder
when multiple
users share data
Users want instant
access to data
Building scalable
data-driven apps
without learning
distributed systems
concepts is hard
Users want to
continue using
their apps even
with low or no
connectivity

AWS AppSync

CREATE POWERFUL DATA-DRIVEN APPS
Real-time,
Collaborative
Apps

Real-time,
Collaborative
Apps
Offline
Programming
Model with
Sync

Real-time,
Collaborative
Apps
Offline
Programming
Model with
Sync
Get Only the
Data You Need
with GraphQL

Real-time,
Collaborative
Apps
Offline
Programming
Model with
Sync
Get Only the
Data You Need
with GraphQL
Access Data
from Multiple
Sources

Real-time,
Collaborative
Apps
Offline
Programming
Model with
Sync
Get Only the
Data You Need
with GraphQL
Access Data
from Multiple
Sources
Fine-grained
Access Control

APPS YOU CAN BUILD WITH APPSYNC
Collaboration Apps
- Dashboards
- Leaderboards
- Whiteboards
- …
Social Media, Chat,
and Dating Apps
Apps with Complex
Data Structures
and Types
Geo Apps

START BUILDING FAST

EASY ACCESS TO RICH DATA
{
"id": "1",
"name": "Get Milk",
"priority": "1"
},
"id": "2",
"name": "Go to gym",
"priority": "5"
},…
type Query {
getTodos: [Todo]
}
type Todo {
id: ID!
name: String
description: String
priority: Int
duedate: String
}
query {
getTodos {
id
name
priority
}
}
Model data with
application schema
Client requests what it
needs
Only that data is
returned

Getting Started with AWS AppSync
MICHAEL PARIS
Software Development Engineer, AWS Mobile

EVENT APPLICATION

AWS AppSync helps you build applications
faster

DEPLOY AN API

INTEGRATE WITH YOUR APPLICATION

RECAP
• Deployed two Amazon DynamoDB tables to hold Event and Comment
records
• Created two AWS IAM service roles giving AWS AppSync access to data
operations on those tables
• Deployed a scalable GraphQL API
• Ran a single GraphQL query that interacted with data from multiple Amazon
DynamoDB tables
• Integrated AWS AppSync with our front-end application and enabled offline
and real-time support

AWS AppSync helps you build global scale and
powerful applications

GOING DEEPER

MAPTAP WITH AWS APPSYNC
Elasticsearch
DynamoDB
Browser
Mobile
device
AWS Lambda
Third-party service
Resolvers
AWS AppSync
/graphql
Subscriptions
Data Sources

Musixmatch
FRANCESCO DELFINO
CTO & Co-Founder, Musixmatch

Founded in 2010. Head quarters in Bologna, Italy
Lyrics API available to third-party music services and
websites
Mobile apps for Android and iOS
Desktop widget (Floating Lyrics) running on
Windows, Mac, and Linux
A new way to enjoy music

World’s largest lyrics catalog
Worldwide coverage with more than 60 different languages
67,11% 6,15% 5,7% 2,65% 2,62% 2,39% 2,36% 1,84%
0,81% 0,72% 0,68% 0,67% 0,61% 0,52% 0,51%
…

Available for over 90% of the lyrics requested
SYNCED LYRICS

SYNCED LYRICS
TRANSLATIONS

SYNCED LYRICS
TRANSLATIONS
WORD BY WORD SYNC
Available for in beta. GA Q1 2018

Musixmatch plugs in 3rd party music players
(Spotify, iTunes, Youtube etc).
Understanding the music consumption
Over a billion data points processed daily, profile user
musical preferences
Semantic analysis and structural analysis for tailored
recommendation (Q1 2018)

30 million active users per month
0
17,500,000
35,000,000
52,500,000
70,000,000
2010 2012 2014 2016
Monthly Active Visitors Download
ASIA
AMERICAS EUROPE
AFRICA
OCEANIA

Over 400k requests per minute, low at 200k
Total spending lowered over time
10x increase in the same period (sessions)
70% 71%
62%
58%
2014 2015 2016 2017
The split between EC2/PaaS services changed over time

Over 400k requests per minute, low at 200k
Total spending lowered over time
10x increase in the same period (sessions)
70% 71%
62%
58%
2014 2015 2016 2017
The split between EC2 / PaaS services changed over time
Lessons learned: don’t be scared by continuously
re-engineering your product to exploit new
possibilities

Simplifying our app
development and backend

PROS
Vibrant ecosystem
Development tools, e.g. Expo
Leverage web skills
Easily pluggable in existing apps
Multidevice development: React Native
CONS
Too many options
Versioning problems
Development tools sometimes difficult to tweak

PROS
Vibrant ecosystem
Development tools, e.g. Expo
Leverage web skills
Easily pluggable in existing apps
Multidevice development: React Native
CONS
Too many options
Versioning problems
Development tools sometimes difficult to tweak
Our stack: Typescript, ReactXP, NGROK (for creating our own Expo-like experience)

Most users move from mobile to
desktop for editing the lyrics
We already support interprocess
communication (Floating lyrics,
deeplinks)
Enabling multidevice experience 1/2

deeplinks)
What we needed:
Extending to multiple device requires
a real-time messaging hub

deeplinks)
What we needed:
What we tried:
Open Source tools: SignalR or Socket.IO

deeplinks)
What we needed:
What we tried:
Open Source tools: SignalR or Socket.IO
Challenges:
Dealing with mobile connection
reliability is hard

User starts
on mobile

Installs/launch app
on desktop
(Project Rome)
User starts
on mobile

Installs/launch app
on desktop
(Project Rome)
User starts
on mobile
Player state saved
(AppSync)

Installs/launch app
on desktop
(Project Rome)
User starts
on mobile
Player state saved
(AppSync)
State Sync’d to
desktop
(AppSync)

Installs/launch app
on desktop
(Project Rome)
User starts
on mobile
Player state saved
(AppSync)
State Sync’d to
desktop
(AppSync)
Bidirectional in the
future
(AppSync)

Installs/launch app
on desktop
(Project Rome)
User starts
on mobile
Player state saved
(AppSync)
State Sync’d to
desktop
(AppSync)
Bidirectional in the
future
(AppSync)
Type UserNowPlaying {
user_id: ID! UserPlayerState
guid: String!
protocolUri: String!
}
The custom protocol
URI contains
q_track
q_artist
duration
position
start_time

CODE INTEGRATION

APP DEMO

Wrapping Up
AMIT PATEL
General Manager, AWS Mobile

START BUILDING TODAY!
AWS Mobile Hub and CLI available now
• Learn more and get started: https://aws.amazon.com/mobile/
AWS Amplify is also available now
• Find it on GitHub: https://github.com/aws/aws-amplify
AWS AppSync Preview available for registration later today
• Learn more and register: https://aws.amazon.com/appsync/

Thank you!
1 . M B L 3 1 0 ( T u e s @ 1 2 : 1 5 p . m . ) — B u i l d i n g H y b r i d a n d W e b a p p s u s i n g
J a v a S c r i p t w i t h A W S M o b i l e
2 . M B L 4 0 4 ( T u e s @ 1 : 4 5 p . m . ) — R e a l - t i m e a n d O f f l i n e a p p l i c a t i o n
d e v e l o p m e n t u s i n g G r a p h Q L w i t h A W S A p p S y n c
3 . M B L 4 0 2 ( T u e s @ 5 : 3 0 p . m . ) — D a t a D r i v e n A p p s w i t h G r a p h Q L : A W S
A p p S y n c D e e p D i v e

AWS AppSync Powers Mobile Apps with Real-time and Offline Data

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to AWS AppSync Powers Mobile Apps with Real-time and Offline Data

Similar to AWS AppSync Powers Mobile Apps with Real-time and Offline Data (20)

More from Amazon Web Services

More from Amazon Web Services (20)

AWS AppSync Powers Mobile Apps with Real-time and Offline Data