Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Taking your Progressive Web App to the Next Level - AWS Summit Sydney 2018

727 views

Published on

Taking your Progressive Web App to the Next Level with GraphQL and AWS AppSync

Progressive Web Apps (PWAs) are the future of web development and combine the best of web and native apps. In this session you will learn how to build PWAs on AWS then take your app to the next level with AWS AppSync. We will cover how AWS AppSync allows you to query your data using GraphQL and how it handles mutations, subscriptions, offline access, realtime communications, conflict resolution, and efficient data fetching.

Ed Lima, Associate Solutions Architect, Amazon Web Services

  • Be the first to comment

Taking your Progressive Web App to the Next Level - AWS Summit Sydney 2018

  1. 1. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Ed Lima Solutions Architect, Amazon Web Services Taking Your Progressive Web App To The Next Level With GraphQL And AWS Appsync
  2. 2. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
  3. 3. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Digital Media 50% 34% 9% 7% 1 2 3 4 Time spent comScore Media Metrix Multi-Platform & Mobile Metrix, U.S., Total Audience, June 2017
  4. 4. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. comScore Media Metrix Multi-Platform & Mobile Metrix, U.S., Total Audience, June 2017 0 5 11 16 21 1 Series1 Series2 Average Monthly Unique Visitors 2.2x Mobile App
  5. 5. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Progress To Progressive
  6. 6. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Progressive Web Apps (PWA) Responsive web application Defined by manifest.json Discoverable and installable A Progressive Web App uses modern web capabilities to deliver an app-like user experience
  7. 7. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Why Progressive Web Apps Secure ShareableNetwork Agnostic Always up-to-date
  8. 8. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
  9. 9. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Core Components Application shell Service worker Storage and cache
  10. 10. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Toolchain And Production Scale • Web framework (Ember.js, Angular.js, Ionic, React, etc.) • CLI/build system (Workbox, Ionic, Grunt/Gulp, AWS CLI) • Libraries/utilities (Local Forage, Handlebars) • Deployment (CloudFront, S3, AWS Mobile CLI, Mobile Hub)
  11. 11. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. What About The Backend?
  12. 12. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Traditional Data Fetching Data  Trivial to set up  Standard HTTP Calls ❌ Relationships ❌ Lists with reduced information ❌ Query support ❌ Ordering and pagination ❌ Notifications /posts /postInfo /postJustTitle /postsByAuthor /postNameStartsX /postByTag /commentsOnPost REST Endpoints
  13. 13. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Is There A Better Way
  14. 14. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. GraphQL
  15. 15. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. What Is GraphQL? Describe what’s possible with a type system Uniform API across data stores and APIs Network optimised requests and responses Powerful developer tools Integrated documentation and introspection Query language for your API and a runtime for fulfilling queries with existing data
  16. 16. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. What Is GraphQL? /posts /comments /authors REST API /posts /comments /authors GraphQL API
  17. 17. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. How To Use GraphQL type Query { listEvents: [Event] } type Event { id: ID! name: String! when: String! where: String! } query { listEvents { id name } } { "id": "1", "name": "React Meet Up" }, { "id": "2", "name": "GraphQL Party" }, { “id”: “3”, “name”: “Angular Sesh” } ... Define your data (Schema) Invoke Operation Get EXACTLY what you asked for
  18. 18. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. How To Use GraphQL type Query { listEvents: [Event] } type Event { id: ID! name: String! when: String! where: String! } query { listEvents { id name when } } { "id": "1”, "name": "React Meet Up”, “when”: “Tomorrow” }, { "id": "2", "name": "GraphQL Party", “when”: “Saturday” }, { “id”: “3”, “name”: “Angular Sesh”, “when”: “Next Friday” } ... Define your data (Schema) Invoke Operation Get EXACTLY what you asked for
  19. 19. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. GraphQL sounds legit! I want to run my own GraphQL server!!
  20. 20. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Introducing AWS AppSync
  21. 21. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. AWS AppSync Managed Serverless GraphQL service Connect to data sources in your account Add data sync, real-time and offline capabilities for any data source or API GraphQL façade for any AWS service Conflict detection and resolution in the cloud Enterprise security features (IAM, Cognito, API keys)
  22. 22. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. How Does AppSync Work? Create, Import or Upload GraphQL Schema Amazon Elasticsearch Amazon DynamoDB AWS Lambda Connect Data Sources AppSync Updates Data in Real Time and Manages Data when Offline __________ ______________ ___________ _________ ___________ ____________ __________
  23. 23. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Mutations Write Data mutation { createEvent(name:”MeetUp”){ id } } GraphQL Operations Queries Read Data query { getEvent(id: 1){ id name } } Subscriptions Receive Data in Real-Time subscription { onCreateComment { id } } Queries Read Data Mutations Write Data Subscriptions Receive Data in Real-Time
  24. 24. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Building Data-Driven Apps With AWS Appsync Robust, scalable storage capable of handling millions of events a day Geospatial search Real-time updates for both mobile and web Mobile and Web clients
  25. 25. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Clients receive the data they ask for. Nothing more, nothing less Get many resources from many data sources with a single request Self-documenting APIs with Introspection React Native, Android, iOS, and Web (JS) using the Apollo GraphQL client Data persistence across application restarts Write-through mutations with optimistic UI AWS AppSync Benefits
  26. 26. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Real-Time Updates • GraphQL subscriptions • Event stream of mutation results • Data synchronisation with MQTT + WebSockets • Client managed WebSocket connection • Automatic catch-up snapshots
  27. 27. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon Elasticsearch Amazon DynamoDB Browser Mobile device WebSocket servers Web servers PubSub servers Subscription /search /taps /taps/:id /m_search AWS Lambda Third-party service … Real-Time App Before AppSync
  28. 28. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. /graphql AWS AppSync Subscription Amazon Elasticsearch Amazon DynamoDB AWS Lambda Third-party service Real-Time App After AppSync
  29. 29. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Data Conflicts Jane Version : 2 Updated Document Jane Version : 2 Updated Document Version : 3 Updated Document Version : 1 New Document Time John John Jane goes offline Jane comes back online Version : 4 Updated Document John Jane
  30. 30. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Handle Data Conflicts In The Cloud • Conflict detection with optimistic version check • Conflict resolution strategies: A. Client wins B. Server wins C. Silent reject D. Custom logic in AWS Lambda • Client callback for conflict resolution is available "condition" : { "expression" : "someExpression" "conditionalCheckFailedHandler" : { "strategy" : "Custom", "lambdaArn" : "arn:..." } }
  31. 31. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Offline Capabilities - AppSync Client Storage • Offline is a write-through "Store" • Persistent storage mediums back the Apollo normalised cache • Local Storage for web • AsyncStorage for React Native • SQLite on native platforms • Database can be preloaded • Offline client can be configured • WiFi only • WiFi and cellular
  32. 32. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon API Gateway AWS AppSync
  33. 33. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon API Gateway AWS AppSync vs
  34. 34. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon API Gateway AWS AppSync vs
  35. 35. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon API Gateway AWS AppSync &
  36. 36. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon API Gateway AWS AppSync &
  37. 37. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Enough Talking… https://github.com/aws-samples/aws-mobile-appsync-chat-starter-angular
  38. 38. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
  39. 39. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon Cognito User Pools JWT Token GraphQL Schema ChatQL Conversations Table Messages Table User Conversations Table Users Table Amazon DynamoDB Queries and Mutations Subscriptions AppSync Resolvers User AWS AppSync AppSync Data Sources
  40. 40. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. User 1..1 1..n 1..1 1..n 1..n User Conversation Conversation Messages GraphQL Relations between NoSQL DynamoDB Tables
  41. 41. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Demo Time!
  42. 42. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Takeaways Don’t boil the ocean. Start small and iterate on Offline (cache-and- network), Real-time and Conflict Resolution Use UI cues with Optimistic UI when Offline Take advantage of built-in GraphQL powerful features such as Connections (Pagination) and Relations (NoSQL) It’s all about the User Experience: PWAs + AppSync = 
  43. 43. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. It’s all about the User Experience ! https://secure.i.telegraph.co.uk/multimedia/archive/02884/babies_2884567b.jpg
  44. 44. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Thank You

×