Sviluppare Applicazioni Real Time con AppSync Deck.pptx
•Télécharger en tant que PPTX, PDF•
1 j'aime•734 vues
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à Sviluppare Applicazioni Real Time con AppSync Deck.pptx
Similaire à Sviluppare Applicazioni Real Time con AppSync Deck.pptx (20)
Plus de Amazon Web Services
Plus de Amazon Web Services (20)
Sviluppare Applicazioni Real Time con AppSync Deck.pptx
- 1. Luca Serpietri, lucaserp@amazon.co.uk 14 Settembre 2018 Sviluppare Applicazioni Real Time con AWS AppSync
- 2. What is needed to build an App? Data management • Content (images/videos) • Lists, records, text (Strings, Integers, etc.) Privacy controls • User registration and Sign-In • Federation (Social channels) • MFA Tracking and Engagement • Session metrics • Analytics on custom attributes • Targeted messaging Workflows • API access UX controls • Multilanguage support • Multi-form factor Platforms • Mobile Web • Native • Hybrid
- 3. How do we want apps to operate? Information must be realtime • Banking alerts • News stories • Multi-player games • Chat applications • Shared whiteboards • AR/VR experiences • Document collaboration Interaction must work online or offline • Financial transactions • News articles • Games • Messaging (pending chat) • Document collaboration
- 4. How do people interact with data? Question Specific question Filter answer to question Add/Update my data Notify me when data changes Query() Query(name:”Nadia”) Select “name”, “address” UpdateInfo(address:”1234”) Subscribe newPost(author:”Shaggy”)
- 5. Tools for the job: The Backend
- 6. Developer Challenges With App Data 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
- 7. I have a web and mobile app, and a data source Data API Gateway Lambda Using API Gateway and Lambda is one approach for performing DB operations
- 8. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. What is GraphQL? Open, declarative data-fetching specification != Graph database Use NoSQL, Relational, HTTP, etc. Traditional data-fetching GraphQL /posts /postInfo /postJustTitle /postsByAuthor /postNameStartsWithX /commentsOnPost © 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
- 9. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
- 10. What is Graph QL?
- 11. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
- 13. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
- 14. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
- 15. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
- 16. What are the GraphQL benefits? Rapid prototyping and iteration Introspection Co-location of data requirements & application views - Implementations aren’t encoded in the server Data behavior control - Batching, request/response and real-time Bandwidth optimization (N+1 problem)
- 17. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
- 18. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. AWS AppSync
- 19. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. How does AWS AppSync work?
- 21. Demo
- 22. AWS AppSync DynamoDB Table Lambda Function Elasticsearch Service GraphQL Schema GraphQL Query Mutation Subscription Real-time Offline AppSync API Cognito User Pool Legacy Application RDS Autogenerate Schema Real-time Online/Offline Upload Schema
- 23. AWS AppSync - GA features (April 2018) Test/Debug resolver flows CloudWatch (Logs and Metrics) CloudFormation Subscription Resolvers AWS Amplify GraphQL Batch Delete/Read/Put HIPPA compliance BYO OIDC Authorization
- 24. Optmistic UI const AllPostsWithData = compose( graphql(AllPostsQuery, { options: { fetchPolicy: 'cache-and-network’ }, props: (props) => ({ posts: props.data.allPost && props.data.allPost.posts, }) }), graphql(DeletePostMutation, { props: (props) => ({ onDelete: (post) => props.mutate({ variables: { id: post.id, expectedVersion: post.version }, optimisticResponse: () => ({ deletePost: { ...post, __typename: 'Post' } }), })
- 27. GraphQL Subscriptions Near Realtime updates of data Event based mode, triggered by Mutations - Scalable model, designed as a platform for common use-cases - Data Synchronization with MQTT over WebSockets - Automated catch-up snapshots Can be used with ANY data source in AppSync - Lambda, DynamoDB, Elasticsearch mutation addPost( id:123 title:”New post!” author:”Nadia”){ id title author } data: [{ id:123, title:”New Post!” author:”Nadia” }]
- 31. Demo
- 32. Offline mutations 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
- 33. Conflict Resolution and synchronization Conflict resolution in the cloud 1. Server wins 2. Silent reject 3. Custom logic (AWS Lambda) - Optimistic version check - Extend with your own checks Optional • Client callback for Conflict Resolution is still available as a fallback { "version" : "2017-02-28", "operation" : "PutItem", "key" : { "id" : { "S" : "1" } }, "condition" : { "expression" : "attribute_not_exists(id)" } } Example: Check that an ID doesn’t already exist: "condition" : { "expression" : "someExpression" "conditionalCheckFailedHandler" : { "strategy" : "Custom", "lambdaArn" : "arn:..." } } Run Lambda if version wrong:
- 34. Test/Debug/Log GraphQL request logs, metrics, and auditing - Verbose or Errors - Type & Field - Overall Execution Summary “Stream” logs to query editor “Unit test” with mock context - Arguments, Identity, Parent - Single or List results
- 36. Offline data rendering const client = new AWSAppSyncClient({ url: awsconfig.ENDPOINT, region: AWS.config.region, auth: { type: AUTH_TYPE.AWS_IAM, credentials: Auth.currentCredentials() } }); const WithProvider = () => ( <ApolloProvider client={client}> <Rehydrated> <AppWithData /> </Rehydrated> </ApolloProvider> ); That’s it! Data is automatically available offline! https://aws.github.io/aws-amplify/
- 40. Tools for the job: The Frontend
- 41. AWS Amplify • JavaScript Library for frontend development • JavaScript & TypeScript • React + React Native • Angular, Vue • Ionic • Declarative interface across different categories • Open Source (Apache) github.com/aws/aws-amplify
- 42. AWS Amplify • Categories • Analytics • API • Authentication • Storage • Interactions • PubSub • Notifications • Utilities • Cache • Hub • i18n • Logger • Service Worker
- 43. AWS Amplify – React / React Native
- 44. withAuthenticator(App) React HOC 100% Scaffold UI State Management MFA / SMS / Email Credential Management Import { withAuthenticator } from ‘aws-amplify-react’ … export default withAuthenticator(App);
- 45. <Authenticator /> Scaffold UI Custom UI State Management MFA / SMS / Email Credential Management import { Authenticator } from ‘aws-amplify-react’ import Config from ‘./aws-exports’ … render( <div> <Authenticator> <MyApp /> </Authenticator> </div> )
- 46. <PhotoPicker /> Scaffold UI Customizable UI State Events Credential Management import { PhotoPicker } from ‘aws-amplify-react’ render( <PhotoPicker onPick={ data => doSomething(data) } /> )
- 47. <S3Album /> Scaffold UI Customizable UI State Events Credential Management import { PhotoPicker } from ‘aws-amplify-react’ render( <PhotoPicker onPick={ data => doSomething(data) } /> )
- 48. <S3Image /> Renders an Image Supports Public/Private Supports Upload Supports Picker import { S3Image, S3Text } from ‘aws-amplify-react’ render( <div> <S3Image level="private" path={path} /> <S3Text level="private" path={path} /> </div> ) <S3Text /> Renders Text from Amazon S3 Supports Public/Private Supports Upload Supports Picker
- 49. How to use AWS AppSync • Integrates with Apollo GraphQL Client • https://github.com/apollographql • Available for Android, iOS, JavaScript & Others • Offline Support • Automatically persisted for queries • Write-through for mutations • Conflict resolution in the cloud, optional client callback • Real-time Support • Event driven model • Automatic Websocket connection
- 50. Client-side Tools • Clients • Apollo GraphQL: https://github.com/apollographql • Data Browsers • The AWS AppSync Console • GraphiQL: https://github.com/graphql/graphiql • GraphQL IDE: https://github.com/andev-software/graphql-ide • Plugins • Chrome Plugin: https://chrome.google.com/webstore/detail/graphql-network
Notes de l'éditeur
- When building a web and mobile apps, developers face challenges in managing application data Data requirements vary across different devices and become exponentially harder when multiple users share data. Users want instant access to their content Low/No connectivity causes issues for apps Complex but increasingly common use cases such as leaderboards, chat, location, search, posts & comments… data modelling and querying… DynamoDB is performance and scale… how so we solve both these problems… Web, mobile, watch – have different UI and therefore different data requirements Many users talk to the same data I am a client or frontend engineer – don’t want to learn backend or distributed systems concepts just to store and retrieve data
- /URI/posts -> returns a list { 1, 2, …, 10} Now I want to get all data for a post: /URI/post/1, /URI/post/2, …, /URI/post/10 Now I want to get just the title /URI/postTitle/1, /URI/postTitle/2, …. Now I want to do field level access controls per user, you’d need to model this for each individual resource What about nested structures? Posts {author} and I want posts by a particular author or posts starting with an author name… this is an exponential resource creation problem and repetition of Authorization controls If I want to do relation, for example co-authors of a post -> this will require separate API calls and then joining them on the client.
- GraphQL is an open source data query and manipulation language, and a runtime for fulfilling queries with existing data.[2]GraphQL was developed internally by Facebook in 2012 before being publicly released in 2015.[3] It provides a more efficient, powerful and flexible alternative to REST and ad-hoc web service architectures.[2][4] It allows clients to define the structure of the data required, and exactly the same structure of the data is returned from the server, therefore preventing excessively large amounts of data from being returned. Not a GraphDB
- Single RTT to fetch your data
- SDL – Schema definition language ! = required field
- N+1 problem resolved also on the backend, not only for the frontend
- AppSync solves these challenges by proving a managed service for application data using GraphQL with real-time capabilities and an offline programming model Make your data services real-time – WebSockets, Many users and many devices, being respectful of the battery life and CPU cycles for mobile devices Offline, automatic sync, conflict resolution in the cloud - Customers consider offline to be important but also common place enough to where they don’t want to implement it themselves on every platform. They feel offline features should be default in the SDKs for data services they’re using. When you combine offline features + multiple users on multiple devices updating shared data, you inevitably end up with conflicts in the system. Customers have asked for a way to resolve these conflicts in the cloud, rather than having to code specific implementations in the client app which is difficult and leads to friction whenever your logic changes and you need to redeploy to the AppStore. Use AWS services with GraphQL – Only get back the data that you asked for Own your data - AppSync works with DynamoDB, Lambda and Elasticsearch resources that customers have control of in their own AWS account. Enterprise-level security features
- fetchPolicy: This option enables you to specify how a query interacts with the network versus local in-memory caching. AWS AppSync persists this cache to a platform-specific storage medium. If you are using the AWS AppSync client in offline scenarios (disableOffline:false), you MUST set this value to cache-and-networkas follows: optimisticResponse: This option enables you to pass a function or an object to a mutation for updating your UI before the server responds with the result. You need this for offline scenarios (and for slower networks) to ensure that the UI is updated when the device has no connectivity. Optionally, you can also use this if you have setdisableOffline:true. Optimistic UI The user clicks a button. The visual state of the button is triggered into success mode instantly. The call is sent to the server. The response from the server is sent back to the page. In 97 to 99% of cases, we know that the response will be success, and so we don’t need to bother the user. Only in the case of a failed request will the system speak up. Don’t worry about this for now — we will get to this point later in the article.
- Cache-and-network for offline support optimisticResponse: This option enables you to pass a function or an object to a mutation for updating your UI before the server responds with the result. This is needed in offline scenarios (and for slower networks) to ensure that the UI is updated when the device has no connectivity. Optionally, you can use this if you have set disableOffline:true.
- HandOver Rich->karthik
- Your AWS AppSync application can monitor changes to any data source using the @aws_subscribe GraphQL schema directive and defining a Subscription type. The AWS AppSync client SDK connects to AWS AppSync using MQTT over Websockets and the application is notified after each mutation. You can now attach resolvers (which convert GraphQL payloads into the protocol needed by the underlying storage system) to your subscription fields and perform authorization checks when clients attempt to connect. You configure this with a Subscription type and @aws_subscribe() directive in the schema to denote which mutations will trigger a notification for a subscription Whenever a mutation happens, this subscription will fire a notification (native to AppSync) Persist it until the client goes offline
- Server Wins:- When a conflict arises data on the server always supersedes the data on the client. Silent Reject:- The server makes the client think that the update went through. This is useful in scenario’s where the data sent between client and service are identical but are of different versions. Custom Resolution:- Call a lambda function and run some business logic to resolve the conflict. talk about mapping template Client side conflict resolution:
- AWS Appsync Client is an extension of the ApolloClient, which can handle Offline caching, subscriptions etc.,
- Declarative style Opinionated Implementations Covering the most common use cases Best Practices implemented programmatically Cascading Service interaction Familiar for front end developers to get started Don’t leak infrastructure details Simple Standard Data Objects Convention over configuration Pluggable implementations
- AWS Amplify currently provides one base core library for JavaScript applications. Amplify also currently provides two supporting packages for React and React Native Frameworks. Currently the aws-amplify-react package provides HOC (Higher Order Components) for React based applications. The aws-amplify-react-native package currently provides a copy of the aws-amplify library with React Native specific code and support for native signing of the API requests. Amplify contains the following AWS service feature support: Authentication using Amazon Cognito User Pools and Federated Identities Analytics using Amazon Pinpoint API using API Gateway Storage using Amazon S3 Amplify also provides modules to assist in common front-end programming tasks: Cache The Amplify Cache module provides a generic LRU cache to JavaScript developers for storing data with priority and expiration settings. Utilities I18n - A lightweight internationalization solution. Logger – A simple logger for the browser. Hub - A Lightweight Pub-Sub system used to share events between modules and components.
- The withAuthenticator HOC gives you some nice default authentication screens out-of-box. If you want to use your own components rather then provided default components, you can pass the list of customized components to withAuthenticator withAuthenticator automatically detects the authentication state and updates the UI. If the user is signed in, the underlying component (typically your app’s main component) is displayed otherwise signing/signup controls is displayed Now, your app has complete flows for user sign-in and registration. Since you have wrapped your Appwith withAuthenticator, only signed in users can access your app. The routing for login pages and giving access to your App Component will be managed automatically
- The withAuthenticator HOC essentially just wraps Authenticator component. Using Authenticator directly gives you more customization options for your UI. - signIn - signUp - confirmSignIn - confirmSignUp - forgotPassword - verifyContact - signedIn
- ANGULAR Add a photo picker to your components template:
- ANGULAR Add an S3 album component to your template:
- S3Image component renders an Amazon S3 object key as an image: S3Text is similar to S3Image. The only difference is S3Text is used for text content.