善用 GraphQL 與 AWS AppSync 讓您的 Progressive Web App (PWA) 加速進化 (Level 200)

1. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Jayson Hsieh Solutions Architect, Amazon Web Services Taking Your Progressive Web App To The Next Level With GraphQL And AWS Appsync

3. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. Digital Media 50% 34% 9% 7% Mobile App Desktop Mobile Web Tablet App Time spent comScore Media Metrix Multi-Platform & Mobile Metrix, U.S., Total Audience, June 2017

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 Unique Visitors Mobile Web Mobile App Average Monthly Unique Visitors 2.2x Mobile App

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

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)

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

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

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

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. © 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 with GraphQL Resolvers AppSync Updates Data in Real Time and Manages Data when Offline __________ ______________ ___________ _________ ___________ ____________ __________

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

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

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

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 = J

善用 GraphQL 與 AWS AppSync 讓您的 Progressive Web App (PWA) 加速進化 (Level 200)

Du liest eine Vorschau.

Hier ansehen

善用 GraphQL 與 AWS AppSync 讓您的 Progressive Web App (PWA) 加速進化 (Level 200)

Weitere Verwandte Inhalte

Diashows für Sie (20)

Ähnlich wie 善用 GraphQL 與 AWS AppSync 讓您的 Progressive Web App (PWA) 加速進化 (Level 200) (20)

Weitere von Amazon Web Services (20)