Leadership session: Innovations in mobile

© 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.