Leadership Session: Developing Mobile & Web Apps on AWS (MOB202-L) - AWS re:Invent 2018

© 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Developing Mobile and Web Apps
on AWS
M O B 2 0 2 - L
Amit Patel
GM, AWS Mobile
Tom Bray
Chief Architect
TicketMaster
Michael Paris
Engineer, AWS

Industry Trends
App downloads
forecast:
continued growth
258B
+45% by 2022
Source: AppAnnie
Enterprises expect
to invest in native
and web apps
80%+
Source: AWS
GraphQL
popularity
increasing
4X
Source: 2018.stateofjs.com
JavaScript
popularity
increasing
71.5%
Source: Stack Overflow

Developer Asks
Tools for building,
testing, deploying,
and hosting the
entire app – frontend
and backend
Secure and scalable
apps
Offline data,
network-optimized
sync, and real-time
updates
Centralized config,
cloud provisioning,
and team workflow
Code generation to
eliminate boilerplate
Frontend support for
multiple platforms
and frameworks

Delivering on Developer Asks
New product and feature launches in the last 12 months…
AWS Amplify
Launched
AWS Amplify
Open source
JavaScript library
Launched
AWS AppSync
Offline and real-time
data
Added support for
Ionic, Angular, and
Vue to Amplify
Added a CLI toolchain
& UI components to
Amplify
Added no-code,
GraphQL API builder,
HTTP data source,
GraphQL scalar types
to AWS AppSync
iOS & Android SDKs –
Simplified
programming model
for authentication

An Integrated Developer Experience
Developer Tools
Amplify Framework, an open source client
framework, includes libraries,
Cloud Services

Amplify Framework: Library, UI Components, & CLI
Libraries focused on
frontend developers
Support for native apps
with iOS and Android
SDKs
Support for JavaScript
incl. React, React Native,
Angular, Ionic, and Vue
Category-based
opinionated
implementations: Auth,
Analytics, API, Storage,
Interactions, XR, PubSub
‘Escape’ hatches for all
AWS services
UI components for React,
React Native, Angular,
and Ionic
Support for drop-in auth,
photo pickers, and
chatbots
CLI toolchain for rapidly
integrating AWS services
to projects
Iterative code & type
generation for GraphQL
APIs throughout the
development cycle

$amplify add api
type Post
@model
@auth(
rules: [
{allow: owner, ownerField: "owner",
mutations: [create, update, delete],
queries: [get, list]},
])
{
id: ID!
title: String!
content: String!
rating: Int
owner: String
}
appSyncClient?.fetch(query: ListPostsQuery()) {
(result, error) in
if error != nil {
print(error?.localizedDescription ?? "")
return
}
result?.data?.listTodos?.items!.forEach {
print(($0?.title)! + " " + ($0?.content)!)
}
}
Step 1 - Edit & push schema Step 2 – Write app code
GraphQL backend and client types auto-generated

NEW: Multi-Environments and Team Workflow (Beta)
- Git-style interaction & project switching
- Share backends between team members or clone for isolated development
User Users

Breadth of Cloud Services for Mobile and Web Apps
Auth Analytics
Core
Experiences
API Storage Interactions AR & VR PubSub
API: Data
HTTP Data
Source

AWS AppSync: Realtime and offline data with
GraphQL
Real-time
collaboration
Fine-grained access
control
Offline
programming model
with sync
Multiple data
sources
HTTP Data
Source

Why GraphQL with AppSync?
Data
Aggregation
Bandwidth
Optimization
Rapid
Prototyping
Easily evolve
APIs
Client-defined
Data Selection

NEW: AppSync Features
Aurora Serverless
Data Source
(Beta)
Pipeline
Resolvers
Delta Sync

Productivity with Serverless / IoT
Implement new features rapidly,
scalable without manual operation
No two “aibo” are the same
“aibo” identifies the owner, learns from environment and
creates relationships with people through AI
Be more attractive
Feature enhancement with AppSync,
Kinesis Video Streams and more
- 16:40 on 27th Nov (Tue)
- 11:40 on 29th Nov (Thu)
- 15:10 on 29th Nov (Thu)
AI-enabled companion robot
built using Serverless / IoT.
See more at Expo theater (at the Venetian)
How we made "aibo" smart:
A journey through Serverless and IoT on AWS
©️ 2018 Sony Corporation
“aibo” and
My aibo
Application
aibo
MQTT protocol
are trademarks of Sony Corporation.

Interactive live cooking service
• Live cooking with
professionals/TV stars
Internet TV broadcasting via
AWS Elemental MediaLive
• React interactively
Audience can react and/or comment
interactively with AWS AppSync
• All data centralized into AWS
Better for data analysis and
can utilize many AWS services

Improving App Quality with AWS Device Farm
Automated
testing
Remote
access
Remote
debugging

NEW: AWS Amplify Console

Tom Bray
Chief Architect
Ticketmaster

Our GraphQL Journey
Why?
Where did we start?
How will we achieve our GraphQL
vision?

Time to Wow in 5 seconds or less
Name: Sara Connor
Occupation: Rockstar React
Developer
Hobbies: Avid musical theater
fan
Objectives: Buy Aladdin tickets
Get a great job using
Next.js & GraphQL

Delivering just the data fans need in a single request
100,000
Live events per year
+
1,000,000,000
Fans
=
A massive amount of data

Pushing seat availability in real-time
500,000,000
Tickets per year

Our vision: a single, comprehensive schema, end to end
Find Events Shop for Seats Purchase Transfer/Sell Attend

Time to productivity measured in minutes

The Opportunity Cost of Complexity
Every minute a developer spends wrestling with complexity
is a minute she could have spent creating something
awesome.

Over-fetching, under-fetching, and client-side complexity

You might use a BFF to transform your data
BFF REST API

And you might use a BFF to aggregate your data
BFF
REST API
REST API

We’re replacing our BFFs and REST APIs with AWS AppSync
Perform aggregation and transformation in one place.
Deliver just the data you need in a single request.

Understand the Technology Adoption Curve
Innovators Early
Adopters
Early Majority Late Majority Laggards
We’re marketing a disruptive technology to internal
customers

Crossing the Chasms
Innovators Early
Adopters
What does it take to cross the two GraphQL chasms?
Small
Chasm
Big
Chasm

Crossing the Chasms
Innovators Early
Adopters
The innovators see the value of GraphQL immediately and start
creating APIs.
Big
Chasm

Crossing the Chasms
Innovators Early
Adopters
The early adopters are looking for a strategic leap forward.
Big
Chasm
Small
Chasm

Crossing the Chasms
Innovators Early
Adopters
To cross the first chasm, the Early Adopters need answers to their FAQs.
Big
Chasm
How do we solve the N+1 problem?
What about caching?
How do we support WebSockets at scale?
Small
Chasm

Crossing the Chasms
Innovators Early
Adopters
The early majority are pragmatists looking for an increase in productivity.
Big
Chasm
Does GraphQL make them more productive?
What are we really asking the Early Majority to do?
Small
Chasm

Collaboration Models
Team
A
Team
B
Team
C
How will teams collaborate to deliver the comprehensive schema?

Collaboration Models
Monolithic API AWS AppSync + serverlessvs.
The AppSync + serverless model enables collaboration across
disparate teams.
(x)
Team
A
(x)
(x)
Team
B
Team
C
(x)
Team
A
(x)
(x)
Team
B
Team
C

Adopting Event-Driven Serverless Architectures
Once you adopt the serverless mindset, AWS AppSync becomes the
obvious choice.
Subscription Mutation
Pro Tip: Use AWS AppSync Local Resolvers
and Lambda to push real-time data from any
source

Michael Paris
Engineer, AWS

What do we need?
Development
User management & Authorization
Real-time APIs
Client SDKs and tooling
Deployment
Multiple environments
Hosting
CI / CD
Analytics

How do we get there?
User management & Authorization
Amazon Cognito User Pools
Real-time APIs
AWS AppSync
Client SDKs and tooling
Amplify Framework
Multiple environments
Amplify CLI
Hosting & CI / CD
AWS Amplify Console
Analytics
Amazon Pinpoint

Amplify CLI makes project setup easy
$ amplify init
$ amplify add auth
$ amplify add analytics
$ amplify add api
$ amplify push
Initialize a project and environment
Add an Amazon Cognito User Pool
Create an Amazon Pinpoint endpoint
Provision an API and data infrastructure
Deploy via AWS CloudFormation

Rapidly build scalable, data-driven applications
Declaratively define your app’s data model using GraphQL SDL and have it
transformed into a fully descriptive AWS CloudFormation stack
Powered by GraphQL directives
@model, @auth, @connection, @versioned, and @searchable
The GraphQL Transform

User Conversation
Message
ConvoLink
Our Data Model

What was just created
1 AWS AppSync API
4 AWS AppSync data sources
20 AWS AppSync resolvers
4 Amazon DynamoDB Table
6 scoped AWS Identity and Access
Management (IAM) roles
1 Amazon Pinpoint project
1 Amazon Cognito User Pool
1 Amazon Cognito Identity Pool

What can we do with it?

List users
query ListUsers($limit: Int!, $nextToken: String!) {
listUsers(limit: $limit, nextToken: $nextToken) {
items {
id
username
}
}
}

Get a user and their conversations
query GetUserConversations($username: String!) {
getUser(id: $username) {
id
username
conversations {
items {
id
conversation {
id
name
}
}
}
}
}

Get a conversation and its messages
query GetConvo($id: ID!) {
getConvo(id: $id) {
id
name
members
messages {
items {
id
content
messageConversationId
createdAt
}
}
}
} © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.

Subscribe to new messages in conversations
subscription OnCreateMessage($conversationId: ID!) {
onCreateMessage(
messageConversationId: $conversationId
) {
id
content
createdAt
}
}

Create conversations
mutation CreateConversation($conversation: CreateMessageInput!) {
createConvo(input: $ conversation) {
id
name
members
}
}

Create messages
mutation CreateMessages($message: CreateMessageInput!) {
createMessage(input: $message) {
id
content
createdAt
}
}

Add users to conversations
mutation CreateConvoLink($link: CreateConvoLinkInput!) {
createConvoLink(input: $link) {
id
convoLinkUserId
user {
username
}
convoLinkConversationId
conversation {
id
name
}
}
}

Time to build our application

Configure the Amplify library
import Amplify from 'aws-amplify';
import aws_exports from './aws-exports';
Amplify.configure(aws_exports);

Add the <Authenticator /> component
import React, { Component } from 'react';
import { Authenticator } from 'aws-amplify-react';
class Home extends Component {
render() {
return (
<div className="container home">
...
<Authenticator
onStateChange={this.handleAuthStateChange}
amplifyConfig={awsExports}
errorMessage={authErrorMessageMapper}
/>
...
</div>
);
}
}

Provide data with <Connect />
<Connect
query={gql(queries.GetConvo, { id: this.props.conversation.id })}
subscription={gql(subscriptions.OnCreateMessage, { conversationId: this.props.conversation.id})}
onSubscriptionMsg={(prev, { onCreateMessage }) => {
addToEnd(prev.getConvo.messages.items, onCreateMessage)
return prev;
}}
>
{({ data, loading, error }) => { // Uses render props to provide data to child components
if (error) return (<h3>Error: {error}</h3>);
if (loading) return (<h3>Loading...</h3>);
const messages = getIn(data, “getConvo.messages.items”);
return (
<div>
{
messages.map((message, i) => (
<ChatMessage key={i} message={message} isFromMe={message.authorId === me.username} />
))
}
</div>
)}}
</Connect>

Call mutations with API
import * as mutations from './graphql/mutations';
import { graphqlOperation, Analytics, API } from 'aws-amplify’;
async function createMessage(message) {
const response = await API.graphql(
graphqlOperation(mutations.CreateMessage, { input: message })
);
return response.data.createMessage;
}

Instrument analytics
import React, { Component } from 'react';
import { Analytics } from 'aws-amplify’;
class App extends Component {
componentDidMount() {
Analytics.startSession();
window.addEventListener('beforeunload', () => {
Analytics.stopSession();
})
}
...
}

Now let’s make a few branches and push to GitHub

And finally, let’s deploy our app to the cloud

An Integrated Developer Experience

Thank you!
Amit Patel
Tom Bray
Michael Paris

Leadership Session: Developing Mobile & Web Apps on AWS (MOB202-L) - AWS re:Invent 2018

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Leadership Session: Developing Mobile & Web Apps on AWS (MOB202-L) - AWS re:Invent 2018

Similar to Leadership Session: Developing Mobile & Web Apps on AWS (MOB202-L) - AWS re:Invent 2018 (20)

More from Amazon Web Services

More from Amazon Web Services (20)

Leadership Session: Developing Mobile & Web Apps on AWS (MOB202-L) - AWS re:Invent 2018