Real-time GraphQL in Angular app
- 1. Real-time GraphQL In Angular app Mikhail Asavkin @limenutt
- 3. 3 Skychute PropTech Development Breaking new ground using software in the property industry.
- 4. 4 Skychute PropTech Development Breaking new ground using software in the property industry. ● 5 B2B Products transforming business of the biggest Property Developers and Agencies in Australia
- 5. 5 Skychute PropTech Development Breaking new ground using software in the property industry. ● 5 B2B Products transforming business of the biggest Property Developers and Agencies in Australia ● $10B worth of property sold
- 6. 6 Skychute PropTech Development Breaking new ground using software in the property industry. ● 5 B2B Products transforming business of the biggest Property Developers and Agencies in Australia ● $10B worth of property sold ● 4 new feature deployments a week with the team of 2 engineers
- 7. 7 Skychute PropTech Development Breaking new ground using software in the property industry. ● 5 B2B Products transforming business of the biggest Property Developers and Agencies in Australia ● $10B worth of property sold ● 4 new feature deployments a week with the team of 2 engineers ● 11 programming languages, 4 technology stacks, all sorts of tests
- 8. Angular Developer with a taste for great UI WANTED
- 10. Soup du jour ● A refresher on GraphQL @limenutt
- 11. Soup du jour ● A refresher on GraphQL ● Real-time API implications @limenutt
- 12. Soup du jour ● A refresher on GraphQL ● Real-time API implications ● Schema-aware applications @limenutt
- 13. Soup du jour ● A refresher on GraphQL ● Real-time API implications ● Schema-aware applications ● Angular toolset @limenutt
- 14. Soup du jour ● A refresher on GraphQL ● Real-time API implications ● Schema-aware applications ● Angular toolset ● Demo! @limenutt
- 15. Is GraphQL for me? @limenutt
- 16. ● Client decides what fields to fetch from the API GraphQL features @limenutt
- 17. ● Client decides what fields to fetch from the API ● No underfetching, or overfetching GraphQL features @limenutt
- 18. ● Client decides what fields to fetch from the API ● No underfetching, or overfetching ● Allows to combine multiple data sources (database and 3rd party APIs) under a single facade GraphQL features @limenutt
- 19. ● Multiple data sources (databases, other APIs) When to use GraphQL @limenutt
- 20. ● Multiple data sources (databases, other APIs) ● Fullstack team When to use GraphQL @limenutt
- 21. When to use GraphQL ● Multiple data sources (databases, other APIs) ● Fullstack team ● Tired of adding all these different response flavours to your REST API @limenutt
- 22. When not to use GraphQL ● API that doesn’t change often @limenutt
- 23. When not to use GraphQL ● API that doesn’t change often ● Legacy API clients that wouldn’t update to a new API @limenutt
- 25. “Pull” API Client Server What’s the status of task #ZZ942α? @limenutt
- 26. “Pull” API Client Server What’s the status of task #ZZ942α? Here is the info for the task #ZZ942α! @limenutt
- 27. “Pull” API Client Server What’s the status of task #ZZ942α? Here is the info for the task #ZZ942α! What’s the status of task #ZZ942α? @limenutt
- 28. “Pull” API Client Server What’s the status of task #ZZ942α? Here is the info for the task #ZZ942α! What’s the status of task #ZZ942α? Here is the info for the task #ZZ942α! @limenutt
- 29. “Pull” API Client Server What’s the status of task #ZZ942α? Here is the info for the task #ZZ942α! What’s the status of task #ZZ942α? Here is the info for the task #ZZ942α! @limenutt
- 31. Real-time API Server I’m interested in the task #ZZ942α? Client @limenutt
- 32. Real-time API Server I’m interested in the task #ZZ942α? Here is the current info for the task. I’ll let you know if something changes. Client @limenutt
- 33. Real-time API Server I’m interested in the task #ZZ942α? Here is the current info for the task. I’ll let you know if something changes. Looks like the progress has been updated. Client
- 34. Real-time API Server I’m interested in the task #ZZ942α? Here is the current info for the task. I’ll let you know if something changes. Looks like the progress has been updated. The task is moved to Backlog. Client @limenutt
- 35. Real-time API Server I’m interested in the task #ZZ942α? Here is the current info for the task. I’ll let you know if something changes. Looks like the progress has been updated. The task is moved to Backlog. You can no longer see the task, sorry. Client @limenutt
- 37. Real-time API Technology ● Long polling @limenutt
- 38. Real-time API Technology ● Long polling ● WebSocket @limenutt
- 39. Real-time API Technology ● Long polling ● WebSocket ● HTTP/2 Bidirectional streaming @limenutt
- 40. Real-time API use cases @limenutt
- 41. Real-time API use cases ● Communication @limenutt
- 42. Real-time API use cases ● Communication ● Collaboration @limenutt
- 43. Real-time API use cases ● Communication ● Collaboration ● Dynamic positioning @limenutt
- 44. Real-time API use cases ● Communication ● Collaboration ● Dynamic positioning ● Analytics / Reporting @limenutt
- 55. GraphQL in Angular Do Use Variables @limenutt
- 56. GraphQL in Angular Do Use GraphQL for VSCode @limenutt
- 57. GraphQL in Angular Do Use GraphQL for VSCode @limenutt
- 58. GraphQL in Angular Do Use GraphQL for VSCode @limenutt
- 59. Useful tools ● GraphQL plugin for VSCode (by Kumar Harsh) for static checks against the API schema ● graphql-tag package for GraphQL syntax ● WebSocketSubject from rxjs for real-time @limenutt
- 60. Legacy state management Page Service data Fetch API Mutate Component A Component B state state state @limenutt
- 61. Fetch Reducer App reducer Page 1 Service data API Mutate Component A Component B store Page 2 Component A Component B @limenutt
- 62. Cloud reducer Page 1 data Component A Component B Page 2 Component A Component B @limenutt
- 63. Cloud reducer Page 1 data Component A Component B state Page 2 Component A Component B Service Observe Mutate Realtime API @limenutt
- 64. Subscriptions Component A Component B Component C Component D Component E @limenutt
- 65. Component A Component B Component C Component D Component E Real-time API @limenutt Subscriptions
- 66. Component A Component B Service Component C Component D Component E Real-time API @limenutt Subscriptions
- 67. Component A Component B ServiceObserve current user Component C Component D Component E Subscription A Real-time API @limenutt Subscriptions
- 68. Component A Component B ServiceObserve current user Observe current user Component C Component D Component E Subscription A Subscription B Real-time API @limenutt Subscriptions
- 69. Component A Component B ServiceObserve current user Observe current user Component C Observe current user Component D Component E Subscription A Subscription B Subscription C Real-time API @limenutt Subscriptions
- 70. Component A Component B ServiceObserve current user Observe current user Component C Observe current user Component D Observe current user Component E Subscription A Subscription B Subscription C Subscription D Real-time API @limenutt Subscriptions
- 71. Component A Component B ServiceObserve current user Observe current user Component C Observe current user Component D Observe current user Component E Observe current user Subscription A Subscription B Subscription C Subscription D Subscription E Real-time API @limenutt Subscriptions
- 72. Don’t Component A Component B ServiceObserve current user Observe current user Component C Observe current user Component D Observe current user Component E Observe current user Subscription A Subscription B Subscription C Subscription D Subscription E Performance loss Real-time API @limenutt
- 73. Do Component A Component B ServiceObserve current user Observe current user Component C Observe current user Component D Observe current user Real-time API Component E Observe current user Current user Subscription Cache @limenutt
- 75. List observing List / table component @limenutt
- 76. List observing List / table component Item 1 Item 2 …... @limenutt
- 77. List observing List / table component Item 1 Item 2 …... Pagination, sorting, filtering @limenutt
- 78. List observing List / table component Service Item 1 Item 2 …... Pagination, sorting, filtering @limenutt
- 79. List observing List / table component Service Observe a list of objects and sub-objects of each object in the list Item 1 Item 2 …... Pagination, sorting, filtering @limenutt
- 80. Don’t List / table component Service Observe a list of objects and sub-objects of each object in the list Substandard UX Item 1 Item 2 …... Pagination, sorting, filtering @limenutt
- 81. Do List / table component Service Observe a list Item 1 Item 2 …... Pagination, sorting, filtering Observe item 1 Observe item 2 @limenutt
- 83. ● An application should be resilient to schema changes Schema awareness @limenutt
- 84. ● An application should be resilient to schema changes ● Changes can be anticipated during development Schema awareness @limenutt
- 85. ● An application should be resilient to schema changes ● Changes can be anticipated during development ● Application could react to the schema changes in real time Allowing to avoid redeployment in many cases Schema awareness @limenutt
- 90. Schema awareness App Schema Observe UI Change @limenutt
- 91. Schema awareness App Schema Observe Update UI UI Change @limenutt
- 94. What about server side? @limenutt
- 95. Platform / feature Prisma.io Hasura.io Schema generation Resolvers Real-time Authentication / Sign up Permissions Validation @limenutt
- 96. Platform / feature Prisma.io Hasura.io Schema generation Automatic Resolvers Automatic Real-time Not so great Authentication / Sign up Manual Permissions Manual Validation Manual @limenutt
- 97. Platform / feature Prisma.io Hasura.io Schema generation Automatic Automatic Resolvers Automatic Automatic Real-time Not so great Great Authentication / Sign up Manual Manual Permissions Manual Pretty good Validation Manual Weak @limenutt
- 98. Platform / feature Prisma.io Hasura.io In your dreams Schema generation Automatic Automatic Automatic Resolvers Automatic Automatic Automatic Real-time Not so great Great Great Authentication / Sign up Manual Manual Included Permissions Manual Pretty good Included Validation Manual Weak Included
- 99. Platform / feature Prisma.io Hasura.io In your dreams Schema generation Automatic Automatic Automatic Resolvers Automatic Automatic Automatic Real-time Not so great Great Great Authentication / Sign up Manual Manual Included Permissions Manual Pretty good Included Validation Manual Weak Included
- 101. RRAA
- 102. RRAA
- 103. RRAA
- 104. RRAA
- 105. ● Complex filtering, sorting, pagination, search RRAA
- 106. ● Complex filtering, sorting, pagination, search ● Efficient Real-time support RRAA
- 107. ● Complex filtering, sorting, pagination, search ● Efficient Real-time support ● it’s a BAAS! RRAA
- 108. ● Complex filtering, sorting, pagination, search ● Efficient Real-time support ● it’s a BAAS! ● Strongly typed client libraries respecting your schema RRAA
- 109. ● Complex filtering, sorting, pagination, search ● Efficient Real-time support ● it’s a BAAS! ● Strongly typed client libraries respecting your schema ● Extensive permission and validation rules RRAA
- 110. ● Complex filtering, sorting, pagination, search ● Efficient Real-time support ● it’s a BAAS! ● Strongly typed client libraries respecting your schema ● Extensive permission and validation rules ● BYO MongoDB Database RRAA
- 111. ● Complex filtering, sorting, pagination, search ● Efficient Real-time support ● it’s a BAAS! ● Strongly typed client libraries respecting your schema ● Extensive permission and validation rules ● BYO MongoDB Database ● Real-time schema awareness RRAA
- 112. ● Complex filtering, sorting, pagination, search ● Efficient Real-time support ● it’s a BAAS! ● Strongly typed client libraries respecting your schema ● Extensive permission and validation rules ● BYO MongoDB Database ● Real-time schema awareness RRAA
- 113. Demo app @limenutt
- 114. Book me 1h/week free code-level help @limenutt