Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
© 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Developing Mobile and Web Apps
on AWS
M O B 2 0 ...
© 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Industry Trends
App downloads
forecast:
continue...
© 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Developer Asks
Tools for building,
testing, depl...
© 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Delivering on Developer Asks
New product and fea...
© 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
An Integrated Developer Experience
Developer Too...
© 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
© 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Amplify Framework: Library, UI Components, & CLI...
© 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
$amplify add api
type Post
@model
@auth(
rules: ...
© 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
NEW: Multi-Environments and Team Workflow (Beta)...
© 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
© 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Breadth of Cloud Services for Mobile and Web App...
© 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS AppSync: Realtime and offline data with
Grap...
© 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Why GraphQL with AppSync?
Data
Aggregation
Bandw...
© 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
NEW: AppSync Features
Aurora Serverless
Data Sou...
© 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Productivity with Serverless / IoT
Implement new features rapidly,
scalable without manual operation
No two “aibo” are the...
Interactive live cooking service
• Live cooking with
professionals/TV stars
Internet TV broadcasting via
AWS Elemental Med...
© 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
© 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Improving App Quality with AWS Device Farm
Autom...
© 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
NEW: AWS Amplify Console
© 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
© 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Tom Bray
Chief Architect
Ticketmaster
© 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Our GraphQL Journey
Why?
Where did we start?
How...
© 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
© 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Time to Wow in 5 seconds or less
Name: Sara Conn...
© 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Delivering just the data fans need in a single r...
© 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Pushing seat availability in real-time
500,000,0...
© 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Our vision: a single, comprehensive schema, end ...
© 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Time to productivity measured in minutes
© 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
The Opportunity Cost of Complexity
Every minute ...
© 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
© 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Over-fetching, under-fetching, and client-side c...
© 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
You might use a BFF to transform your data
BFF R...
© 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
And you might use a BFF to aggregate your data
B...
© 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
We’re replacing our BFFs and REST APIs with AWS ...
© 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
© 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Understand the Technology Adoption Curve
Innovat...
© 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Crossing the Chasms
Innovators Early
Adopters
Ea...
© 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Crossing the Chasms
Innovators Early
Adopters
Ea...
© 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Crossing the Chasms
Innovators Early
Adopters
Ea...
© 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Crossing the Chasms
Innovators Early
Adopters
Ea...
© 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Crossing the Chasms
Innovators Early
Adopters
Ea...
© 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Collaboration Models
Team
A
Team
B
Team
C
How wi...
© 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Collaboration Models
Monolithic API AWS AppSync ...
© 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Adopting Event-Driven Serverless Architectures
O...
© 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Michael Paris
Engineer, AWS
What do we need?
Development
User management & Authorization
Real-time APIs
Client SDKs and tooling
Deployment
Multiple en...
How do we get there?
User management & Authorization
Amazon Cognito User Pools
Real-time APIs
AWS AppSync
Client SDKs and ...
Amplify CLI makes project setup easy
$ amplify init
$ amplify add auth
$ amplify add analytics
$ amplify add api
$ amplify...
Rapidly build scalable, data-driven applications
Declaratively define your app’s data model using GraphQL SDL and have it
...
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 scop...
What can we do with it?
© 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
List users
query ListUsers($limit: Int!, $nextToken: String!) {
listUsers(limit: $limit, nextToken: $nextToken) {
items {
...
Get a user and their conversations
query GetUserConversations($username: String!) {
getUser(id: $username) {
id
username
c...
Get a conversation and its messages
query GetConvo($id: ID!) {
getConvo(id: $id) {
id
name
members
messages {
items {
id
c...
Subscribe to new messages in conversations
subscription OnCreateMessage($conversationId: ID!) {
onCreateMessage(
messageCo...
Create conversations
mutation CreateConversation($conversation: CreateMessageInput!) {
createConvo(input: $ conversation) ...
Create messages
mutation CreateMessages($message: CreateMessageInput!) {
createMessage(input: $message) {
id
content
messa...
Add users to conversations
mutation CreateConvoLink($link: CreateConvoLinkInput!) {
createConvoLink(input: $link) {
id
con...
Time to build our application
© 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Configure the Amplify library
import Amplify from 'aws-amplify';
import aws_exports from './aws-exports';
Amplify.configur...
Add the <Authenticator /> component
import React, { Component } from 'react';
import { Authenticator } from 'aws-amplify-r...
Provide data with <Connect />
<Connect
query={gql(queries.GetConvo, { id: this.props.conversation.id })}
subscription={gql...
Call mutations with API
import * as mutations from './graphql/mutations';
import { graphqlOperation, Analytics, API } from...
Instrument analytics
import React, { Component } from 'react';
import { Analytics } from 'aws-amplify’;
class App extends ...
Now let’s make a few branches and push to GitHub
© 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
And finally, let’s deploy our app to the cloud
© 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
© 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
An Integrated Developer Experience
Thank you!
© 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Amit Patel
Tom Bray
Michael Paris
© 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Leadership Session: Developing Mobile & Web Apps on AWS (MOB202-L) - AWS re:Invent 2018
Leadership Session: Developing Mobile & Web Apps on AWS (MOB202-L) - AWS re:Invent 2018
Leadership Session: Developing Mobile & Web Apps on AWS (MOB202-L) - AWS re:Invent 2018
Leadership Session: Developing Mobile & Web Apps on AWS (MOB202-L) - AWS re:Invent 2018
Leadership Session: Developing Mobile & Web Apps on AWS (MOB202-L) - AWS re:Invent 2018
Leadership Session: Developing Mobile & Web Apps on AWS (MOB202-L) - AWS re:Invent 2018
Leadership Session: Developing Mobile & Web Apps on AWS (MOB202-L) - AWS re:Invent 2018
Leadership Session: Developing Mobile & Web Apps on AWS (MOB202-L) - AWS re:Invent 2018
Leadership Session: Developing Mobile & Web Apps on AWS (MOB202-L) - AWS re:Invent 2018
Leadership Session: Developing Mobile & Web Apps on AWS (MOB202-L) - AWS re:Invent 2018
Leadership Session: Developing Mobile & Web Apps on AWS (MOB202-L) - AWS re:Invent 2018
Leadership Session: Developing Mobile & Web Apps on AWS (MOB202-L) - AWS re:Invent 2018
Leadership Session: Developing Mobile & Web Apps on AWS (MOB202-L) - AWS re:Invent 2018
Leadership Session: Developing Mobile & Web Apps on AWS (MOB202-L) - AWS re:Invent 2018
Prochain SlideShare
Chargement dans…5
×

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

7 009 vues

Publié le

Do you wonder what AWS thinks about mobile development? In this session, learn the very latest about the many AWS services that web and mobile developers can leverage to make cloud-enabled development possible, and hear what might be in store for the future.

  • Login to see the comments

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

  1. 1. © 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
  2. 2. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. 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
  3. 3. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. 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
  4. 4. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. 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
  5. 5. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. An Integrated Developer Experience Developer Tools Amplify Framework, an open source client framework, includes libraries, Cloud Services
  6. 6. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
  7. 7. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. 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
  8. 8. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. $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
  9. 9. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. NEW: Multi-Environments and Team Workflow (Beta) - Git-style interaction & project switching - Share backends between team members or clone for isolated development User Users
  10. 10. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
  11. 11. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Breadth of Cloud Services for Mobile and Web Apps Auth Analytics Core Experiences API Storage Interactions AR & VR PubSub API: Data HTTP Data Source
  12. 12. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. 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
  13. 13. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Why GraphQL with AppSync? Data Aggregation Bandwidth Optimization Rapid Prototyping Easily evolve APIs Client-defined Data Selection
  14. 14. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. NEW: AppSync Features Aurora Serverless Data Source (Beta) Pipeline Resolvers Delta Sync
  15. 15. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
  16. 16. 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.
  17. 17. 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
  18. 18. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
  19. 19. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Improving App Quality with AWS Device Farm Automated testing Remote access Remote debugging
  20. 20. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. NEW: AWS Amplify Console
  21. 21. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
  22. 22. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Tom Bray Chief Architect Ticketmaster
  23. 23. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Our GraphQL Journey Why? Where did we start? How will we achieve our GraphQL vision?
  24. 24. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
  25. 25. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. 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
  26. 26. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. 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
  27. 27. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Pushing seat availability in real-time 500,000,000 Tickets per year
  28. 28. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Our vision: a single, comprehensive schema, end to end Find Events Shop for Seats Purchase Transfer/Sell Attend
  29. 29. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Time to productivity measured in minutes
  30. 30. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. The Opportunity Cost of Complexity Every minute a developer spends wrestling with complexity is a minute she could have spent creating something awesome.
  31. 31. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
  32. 32. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Over-fetching, under-fetching, and client-side complexity
  33. 33. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. You might use a BFF to transform your data BFF REST API
  34. 34. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. And you might use a BFF to aggregate your data BFF REST API REST API
  35. 35. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. 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.
  36. 36. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
  37. 37. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Understand the Technology Adoption Curve Innovators Early Adopters Early Majority Late Majority Laggards We’re marketing a disruptive technology to internal customers
  38. 38. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Crossing the Chasms Innovators Early Adopters Early Majority Late Majority Laggards What does it take to cross the two GraphQL chasms? Small Chasm Big Chasm
  39. 39. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Crossing the Chasms Innovators Early Adopters Early Majority Late Majority Laggards The innovators see the value of GraphQL immediately and start creating APIs. Big Chasm
  40. 40. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Crossing the Chasms Innovators Early Adopters Early Majority Late Majority Laggards The early adopters are looking for a strategic leap forward. Big Chasm Small Chasm
  41. 41. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Crossing the Chasms Innovators Early Adopters Early Majority Late Majority Laggards 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
  42. 42. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Crossing the Chasms Innovators Early Adopters Early Majority Late Majority Laggards 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
  43. 43. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Collaboration Models Team A Team B Team C How will teams collaborate to deliver the comprehensive schema?
  44. 44. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. 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
  45. 45. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. 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
  46. 46. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Michael Paris Engineer, AWS
  47. 47. What do we need? Development User management & Authorization Real-time APIs Client SDKs and tooling Deployment Multiple environments Hosting CI / CD Analytics
  48. 48. 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
  49. 49. 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
  50. 50. 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
  51. 51. User Conversation Message ConvoLink Our Data Model
  52. 52. 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 © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
  53. 53. What can we do with it? © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
  54. 54. List users query ListUsers($limit: Int!, $nextToken: String!) { listUsers(limit: $limit, nextToken: $nextToken) { items { id username } } } © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
  55. 55. Get a user and their conversations query GetUserConversations($username: String!) { getUser(id: $username) { id username conversations { items { id conversation { id name } } } } } © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
  56. 56. 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.
  57. 57. Subscribe to new messages in conversations subscription OnCreateMessage($conversationId: ID!) { onCreateMessage( messageConversationId: $conversationId ) { id content messageConversationId createdAt } } © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
  58. 58. Create conversations mutation CreateConversation($conversation: CreateMessageInput!) { createConvo(input: $ conversation) { id name members } } © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
  59. 59. Create messages mutation CreateMessages($message: CreateMessageInput!) { createMessage(input: $message) { id content messageConversationId createdAt } } © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
  60. 60. Add users to conversations mutation CreateConvoLink($link: CreateConvoLinkInput!) { createConvoLink(input: $link) { id convoLinkUserId user { username } convoLinkConversationId conversation { id name } } } © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
  61. 61. Time to build our application © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
  62. 62. Configure the Amplify library import Amplify from 'aws-amplify'; import aws_exports from './aws-exports'; Amplify.configure(aws_exports); © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
  63. 63. 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> ); } } © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
  64. 64. 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> © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
  65. 65. 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; } © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
  66. 66. Instrument analytics import React, { Component } from 'react'; import { Analytics } from 'aws-amplify’; class App extends Component { componentDidMount() { Analytics.startSession(); window.addEventListener('beforeunload', () => { Analytics.stopSession(); }) } ... } © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
  67. 67. Now let’s make a few branches and push to GitHub © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
  68. 68. And finally, let’s deploy our app to the cloud © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
  69. 69. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. An Integrated Developer Experience
  70. 70. Thank you! © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amit Patel Tom Bray Michael Paris
  71. 71. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.

×