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.

Building Interactive Data Driven Apps for Mobile & Web with GraphQL: AWS Developer Workshop at Web Summit 2018

817 views

Published on

Building Interactive Data Driven Apps for Mobile & Web with GraphQL: AWS Developer Workshop at Web Summit 2018

Developing mobile applications that capture customer attention in today’s marketplace is extremely competitive. Applications must be responsive, real-time, secure, and usable when no network is available. In this session, you’ll learn about the latest features from AWS Mobile to build secure, scalable mobile and web applications. We'll demonstrate the latest techniques for automatic mobile backend provisioning along with new capabilities for advanced querying and connecting to different data sources.
Speaker: Dennis Hills - Developer Advocate, AWS Mobile Applications

  • Be the first to comment

  • Be the first to like this

Building Interactive Data Driven Apps for Mobile & Web with GraphQL: AWS Developer Workshop at Web Summit 2018

  1. 1. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark Dennis Hills – Mobile Developer Advocate November 6, 2018 Building interactive data driven apps for mobile and web with GraphQL @dmennis
  2. 2. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. A New Philosophy for Backend APIs
  3. 3. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. App Data Challenges 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
  4. 4. © 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
  5. 5. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Is There A Better Way
  6. 6. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. GraphQL
  7. 7. © 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 optimized requests and responses Powerful developer tools Integrated documentation and introspection Query language for your API and a runtime for fulfilling queries with existing data
  8. 8. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. What Is GraphQL? /posts /comments /authors REST API posts comments authors GraphQL API
  9. 9. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. subscription { onCreateComment{ id } } mutation { createEvent(name:”Dinner”){ id } } query { getEvent(id: 1){ id name } } Queries Read Data Mutations Write Data Subscriptions Receive Data in Real-Time GraphQL Operations
  10. 10. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. 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 How To Use GraphQL
  11. 11. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. 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 How To Use GraphQL
  12. 12. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. GraphQL sounds legit! I want to run my own GraphQL server!!
  13. 13. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Focus on Apps Not Infrastructure
  14. 14. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS AppSync
  15. 15. © 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, OIDC, API keys
  16. 16. © 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 Mobile and Web clients
  17. 17. © 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 AWS AppSync Benefits React Native, Android, iOS, and Web (JS) using the Apollo GraphQL client Data persistence across application restarts Write-through mutations with Optimistic UI
  18. 18. © 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 __________ ______________ ___________ _________ ___________ ____________ __________ NEW
  19. 19. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. GraphQL Data Flow in AWS AppSync Request Template Response Template Data Sources 1 2 3 4 5
  20. 20. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AppSync Integrations Internet Mobile Apps Websites Services AWS Lambda functions Amazon DynamoDB Amazon CloudWatch Monitoring AWS AppSync All publicly HTTP/S accessible endpoints Amazon Elasticsearch Amazon RDS Amazon EC2 Any other AWS service
  21. 21. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Mix/Match Data Sources on GraphQL Types Amazon DynamoDB type Query { listPosts: [Post] searchPosts: [Post] } type Mutation { addPost: Post } type Post { id: ID! content: String description: String ups: Int downs: Int } Amazon Elasticsearch listPosts searchPosts addPost
  22. 22. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Real-Time and Offline
  23. 23. © 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
  24. 24. © 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
  25. 25. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Real-Time Updates o GraphQL subscriptions o Event stream of mutation results o Data synchronisation with MQTT + WebSockets o Client managed WebSocket connection
  26. 26. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Fine Grained Access Controls
  27. 27. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. type Mutation { updatePhoto(profilePicInput: S3ObjectInput!): Profile } input S3ObjectInput { bucket: String! key: String! region: String! localUri: String! } type Profile { name: String! profilePic: S3Object! } type S3Object { bucket: String! key: String! region: String! } Amazon S3 Amazon DynamoDB Images and Rich Content https://github.com/aws-samples/aws-amplify-graphql
  28. 28. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Offline Capabilities - AppSync Client Storage o Offline is a write-through "Store" o Persistent storage mediums back the Apollo normalised cache o Local Storage for web o AsyncStorage for React Native o SQLite on native platforms o Database can be preloaded o Offline client can be configured o WiFi only o WiFi and cellular
  29. 29. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Developer Tools
  30. 30. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Amplify CLI
  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. App Details Credentials Credentials
  33. 33. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Use GraphQL Use REST When data drives UI • Structured Data • Complex Data • Query-driven • Real-time/Offline Client-driven development Pros: Contract-driven, Introspection, Relations, Types Conns: Not as ubiquitous as REST When you leverage HTTP • Caching • Content Types • Hypermedia (HATEOAS) For Resources (e.g. Kinesis) Pros: HTTP Client, Golden Standard, HTTP/2 Performance gains Conns: Over fetching/Under fetching GraphQL or REST?
  34. 34. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Bottom Line: It depends on the use case and, most importantly… GraphQL or REST? Good API Design!
  35. 35. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. 1. REST and GraphQL are totally different 2. GraphQL isn't a magic bullet, nor is it "better" 3. You can definitely use both at the same time 4. GraphQL is dope if used for the right thing https://philsturgeon.uk/api/2017/01/24/graphql-vs-rest-overview/ “ ” GraphQL or REST?
  36. 36. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Amplify https://aws-amplify.github.io/ AWS AppSync https://aws.amazon.com/appsync/
  37. 37. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Go Build with AWS AppSync and GraphQL!
  38. 38. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. @dmennis Dennis Hills

×