A novel approach to web applications' state management.

1. State management
with GraphQL
Mikhail Asavkin
@limenutt

3. We all interact with property every
day.
We build, sell, buy, rent, lease,
own, use and admire it.

4. At Skychute
We improve experiences people
have with property.

5. We use technology to provide
tenants, owners, investors, agents,
developers and builders with
greater experience and outcomes.

6. At the heart of our company,
our greatest asset are
brave engineers
passionate about property.

7. Join
our cause
🦸‍♂

8. Disclaimer:
Meanwhile in AU...
@limenutt

16. In Australia...
@limenutt

17. In Australia...
● Dangerous animals
@limenutt

18. In Australia...
● Dangerous animals
● No central heating
@limenutt

19. In Australia...
● Dangerous animals
● No central heating
● Engineers are lazy, don’t like to write a lot of code
@limenutt

20. In Australia...
● Dangerous animals
● No central heating
● Engineers are lazy, don’t like to write a lot of code
● Engineers are much more expensive than hardware
@limenutt

21. In Australia...
● Dangerous animals
● No central heating
● Engineers are lazy, don’t like to write a lot of code
● Engineers are much more expensive than hardware
● Engineers are scarse and precious
@limenutt

22. In Australia...
● Dangerous animals
● No central heating
● Engineers are lazy, don’t like to write a lot of code
● Engineers are much more expensive than hardware
● Engineers are scarse and precious
● IT businesses are mostly product companies,
(not agencies as opposed to CIS).
@limenutt

24. Soup du jour
@limenutt

25. Soup du jour
● Why GraphQL
@limenutt

26. Soup du jour
● Why GraphQL
● Real-time API
@limenutt

27. Soup du jour
● Why GraphQL
● Real-time API
● Real-time GraphQL API
@limenutt

28. Soup du jour
● Why GraphQL
● Real-time API
● Real-time GraphQL API
● Real-time GraphQL API on the Frontend
@limenutt

29. Soup du jour
● Why GraphQL
● Real-time API
● Real-time GraphQL API
● Real-time GraphQL API on the Frontend
● Cloud state management
@limenutt

30. Soup du jour
● Why GraphQL
● Real-time API
● Real-time GraphQL API
● Real-time GraphQL API on the Frontend
● Cloud state management
● Demo
@limenutt

31. Soup du jour
● Why GraphQL
● Real-time API
● Real-time GraphQL API
● Real-time GraphQL API on the Frontend
● Cloud state management
● Demo
● Tips & Tricks
@limenutt

32. The Stack
@limenutt

33. Why GraphQL
@limenutt

34. ● Client decides what fields to fetch from the API
GraphQL features
@limenutt

35. ● Client decides what fields to fetch from the API
● No underfetching, or overfetching
GraphQL features
@limenutt

36. ● 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

37. Demo
@limenutt

38. Realtime API
@limenutt

39. “Pull” API
Client Server
@limenutt

40. “Pull” API
Client Server
What’s the status of task #ZZ942α?
@limenutt

41. “Pull” API
Client Server
What’s the status of task #ZZ942α?
Here is the info for the task #ZZ942α!
@limenutt

42. “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

43. “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

44. “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

45. Real-time API
Server
I’m interested in the task #ZZ942α?
Client
@limenutt

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

47. 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
@limenutt

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

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

50. Real-time API
ServerClient
@limenutt

51. Real-time API
Server
I’m user #XX2104~, something I should know?
Client
@limenutt

52. Real-time API
Server
I’m user #XX2104~, something I should know?
Here is your name in case you forgot.
I’ll let you know if anything happens.
Client
@limenutt

53. Real-time API
Server
I’m user #XX2104~, something I should know?
Here is your name in case you forgot.
I’ll let you know if anything happens.
There is a new task you might interested in
Client
@limenutt

54. Real-time API
Server
I’m user #XX2104~, something I should know?
Here is your name in case you forgot.
I’ll let you know if anything happens.
There is a new task you might interested in
Too late, someone else has grabbed already
Client
@limenutt

55. Real-time API
Server
I’m user #XX2104~, something I should know?
Here is your name in case you forgot.
I’ll let you know if anything happens.
There is a new task you might interested in
Too late, someone else has grabbed already
There is a new message for you, sir
Client
@limenutt

56. Real-time API
Server
I’m user #XX2104~, something I should know?
Here is your name in case you forgot.
I’ll let you know if anything happens.
There is a new task you might interested in
Too late, someone else has grabbed already
There is a new message for you, sir
Client
@limenutt

57. Real-time API Summary
@limenutt

58. Real-time API Summary
● Client subscribes to the information of interest
@limenutt

59. Real-time API Summary
● Client subscribes to the information of interest
● Server sends updates based on the clients’ subscriptions
@limenutt

60. Real-time API Summary
● Client subscribes to the information of interest
● Server sends updates based on the clients’ subscriptions
● If nothing changes, there are no updates.
@limenutt

61. Real-time API Summary
● Client subscribes to the information of interest
● Server sends updates based on the clients’ subscriptions
● If nothing changes, there are no updates.
● Client may have many different subscriptions at the same time
@limenutt

62. Real-time API Summary
● Client subscribes to the information of interest
● Server sends updates based on the clients’ subscriptions
● If nothing changes, there are no updates.
● Client may have many different subscriptions at the same time
● In 2020 we expect everything to be realtime and up-to-date.
@limenutt

63. Real-time API Technology
● Short polling (send requests every X seconds)
● Long polling
● WebSocket
● Server-Sent Events
● HTTP/2 Bidirectional streaming
@limenutt

64. Real-time API use cases
@limenutt

65. Real-time API use cases
● Communication
@limenutt

66. Real-time API use cases
● Communication
● Collaboration
@limenutt

67. Real-time API use cases
● Communication
● Collaboration
● Dynamic positioning
@limenutt

68. Real-time API use cases
● Communication
● Collaboration
● Dynamic positioning
● Analytics / Reporting
@limenutt

69. Real-time API use cases
● Communication
● Collaboration
● Dynamic positioning
● Analytics / Reporting
Any
PWA
@limenutt

70. Real-time API providers
socket.io SignalR
Comet
Eventsource
DYI BAAS
@limenutt

71. Why go with Backend-as-a-service
@limenutt

72. ● Focus effort where your revenue is — PWA / mobile apps
Why go with Backend-as-a-service
@limenutt

73. ● Focus effort where your revenue is — PWA / mobile apps
● Cut the costs of having an additional layer to maintain
Why go with Backend-as-a-service
@limenutt

74. ● Focus effort where your revenue is — PWA / mobile apps
● Cut the costs of having an additional layer to maintain
● Highly scalable and secure backend
Why go with Backend-as-a-service
@limenutt

75. ● Focus effort where your revenue is — PWA / mobile apps
● Cut the costs of having an additional layer to maintain
● Highly scalable and secure backend
● Less code to change when the data structure changes
Why go with Backend-as-a-service
@limenutt

76. Real-time BAAS quick comparison
@limenutt

77. ● Firebase: no search, very limited filtering/sorting, slooow
Real-time BAAS quick comparison
@limenutt

78. ● Firebase: no search, very limited filtering/sorting, slooow
● Firestore: same, less slow
Real-time BAAS quick comparison
@limenutt

79. ● Firebase: no search, very limited filtering/sorting, slooow
● Firestore: same, less slow
● Realm: offline first, cloud service, $$$
Real-time BAAS quick comparison
@limenutt

80. ● Firebase: no search, very limited filtering/sorting, slooow
● Firestore: same, less slow
● Realm: offline first, cloud service, $$$
● Prisma: too DIY, a lot of boilerplate to write still
Real-time BAAS quick comparison
@limenutt

81. ● Firebase: no search, very limited filtering/sorting, slooow
● Firestore: same, less slow
● Realm: offline first, cloud service, $$$
● Prisma: too DIY, a lot of boilerplate to write still
● AWS AppSync: still a lot of backend work to do
Real-time BAAS quick comparison
@limenutt

82. ● Firebase: no search, very limited filtering/sorting, slooow
● Firestore: same, less slow
● Realm: offline first, cloud service, $$$
● Prisma: too DIY, a lot of boilerplate to write still
● AWS AppSync: still a lot of backend work to do
● Hasura: great, open-source, run on your servers
Real-time BAAS quick comparison
@limenutt

83. Real-time
GraphQL API
@limenutt

89. Frontend architecture
@limenutt

90. Current state management
Container Service
API
Component A
Component B
state
state
state
data
@limenutt

91. Current state management
Container Service
Fetch
API
Component A
Component B
state
state
state
data
@limenutt

92. Current state management
Container Service
Fetch
API
Mutate
Component A
Component B
state
state
state
data
@limenutt

93. Reducer
App reducer
Container 1
Service API
Component A
Component B
Container 2
Component A
Component B
data
@limenutt

94. Reducer
App reducer
Container 1
Service API
Component A
Component B
store
Container 2
Component A
Component B
data
@limenutt

95. Reducer
App reducer
Container 1
Service API
Component A
Component B
store
Container 2
Component A
Component B
data
Observe
@limenutt

96. Reducer
App reducer
Container 1
Service API
Component A
Component B
store
Container 2
Component A
Component B
data
Observe
@limenutt
Fetch

97. Fetch
Reducer
App reducer
Container 1
Service API
Component A
Component B
store
Container 2
Component A
Component B
data
Observe
Mutate
@limenutt

98. Reducer
App reducer
Container 1
Service API
Mutate
Component A
Component B
store
Container 2
Component A
Component B
data
Observe
Mutate
Fetch
@limenutt

99. State management with Realtime API
Container 1
data
Component A
Component B
Page 2
Component A
Component B
Service
@limenutt

100. State management with Realtime API
Container 1
data
Component A
Component B
state
Page 2
Component A
Component B
Service
@limenutt

101. State management with Realtime API
Container 1
data
Component A
Component B
state
Page 2
Component A
Component B
Service Realtime API
@limenutt

102. State management with Realtime API
Container 1
data
Component A
Component B
state
Page 2
Component A
Component B
Service Realtime API
Mutate
@limenutt

103. State management with Realtime API
Container 1
data
Component A
Component B
state
Page 2
Component A
Component B
Service
Observe
Mutate
Realtime API

104. Smart components
@limenutt

105. Smart components
@limenutt

106. ● Receive minimal inputs from the parent or environment
Smart components
@limenutt

107. ● Receive minimal inputs from the parent or environment
● Define their own GraphQL subscriptions and mutations
Smart components
@limenutt

108. ● Receive minimal inputs from the parent or environment
● Define their own GraphQL subscriptions and mutations
● Rely on data models derived from GraphQL Schema (codegen)
Smart components
@limenutt

109. ● Receive minimal inputs from the parent or environment
● Define their own GraphQL subscriptions and mutations
● Rely on data models derived from GraphQL Schema (codegen)
● Use Rx to observe the state from the cloud
Smart components
@limenutt

110. ● Receive minimal inputs from the parent or environment
● Define their own GraphQL subscriptions and mutations
● Rely on data models derived from GraphQL Schema (codegen)
● Use Rx to observe the state from the cloud
● Mutate state directly in the cloud
Smart components
@limenutt

111. ● Receive minimal inputs from the parent or environment
● Define their own GraphQL subscriptions and mutations
● Rely on data models derived from GraphQL Schema (codegen)
● Use Rx to observe the state from the cloud
● Mutate state directly in the cloud
● DRY, single responsibility, responsive, etc.
Smart components
@limenutt

112. Smart components vs Dumb components
Container 1
state
Component A Component B
actions
Container 2
state
Component A
actions
@limenutt

113. Smart components vs Dumb components
Container 1
Component A
Container 2
Component B Component A
@limenutt

114. Smart components vs Dumb components
Container 1
Component A
Container 2
Component B Component A
Component AComponent A
@limenutt

115. Example
@limenutt

116. @limenutt

117. Product
@limenutt

118. Cart
Product
@limenutt

119. Cart@Input()
orderId: string
@limenutt

120. Cart
Products
currently
selected
@Input()
orderId: string
@limenutt

121. Cart
Products
currently
selected
Remove
from cart
@Input()
orderId: string
@limenutt

122. Cart
Products
currently
selected
Remove
from cart
Current
total
@Input()
orderId: string
@limenutt

123. Cart
Products
currently
selected
Remove
from cart
Current
total
Product
quantity
@Input()
orderId: string
@limenutt

124. Product
@Input()
productId: string
@Input()
orderId: string
@limenutt

126. Product @limenutt

127. Product
Add/remove
from cart
@limenutt

128. Product
Add/remove
from cart Update
quantity
@limenutt

129. Product
Add/remove
from cart Update
quantityUnavailable
@limenutt

130. @limenutt

131. State management with Realtime API
Container 1
data
Component A
Component B
state
Page 2
Component A
Component B
Service
Observe
Mutate
Realtime API
@limenutt

132. @limenutt

133. State
@limenutt

134. State
GraphQL
Mutation
@limenutt

135. State
GraphQL
Mutation GraphQL
subscription
@limenutt

136. State
GraphQL
Mutation GraphQL
subscription
@limenutt

137. State
@limenutt

138. State

139. Demo?...

140. What about pure UI state?
@limenutt

141. State
GraphQL
subscription

142. State
GraphQL
subscription

143. State
GraphQL
subscription

144. State
GraphQL
subscription

145. State

146. State

147. Data state
persistence regimes
@limenutt

148. Server
State
Local
State
@limenutt

149. Server
State
Local
State
@limenutt

150. Server
State
Local
State
@limenutt

151. Server
State
Local
State
@limenutt

152. Server only
Local first
Local only
Server first
Offline support
Dataconsistency @limenutt

153. Server only
Local first
Local only
Server first
Offline support
Dataconsistency @limenutt

154. Server only
Local first
Local only
Server first
Offline support
Dataconsistency @limenutt

155. Server only
Local first
Local only
Server first
Offline support
Dataconsistency @limenutt

156. Server only
Local first
Local only
Server first
Offline support
Dataconsistency @limenutt

157. Tips and Tricks
@limenutt

158. Don’t
List / table component Service
Observe a list of objects
and sub-objects of each
object in the list
in one subscription
Substandard UX
Item 1
Item 2
…...
Pagination, sorting, filtering
@limenutt

159. Do
List / table component Service
Observe a list of IDs
Item 1
Item 2
…...
Pagination, sorting, filtering
@limenutt

160. Do
List / table component Service
Observe a list of IDs
Item 1
Item 2
…...
Pagination, sorting, filtering
Observe item 1
Observe item 2
@limenutt

161. Track by
@limenutt

162. Track by
@limenutt

163. Async pipe + as
@limenutt

164. Async pipe + as
@limenutt

165. Async pipe + as
@limenutt

166. Tools
@limenutt

167. Tools
@limenutt

168. Takeaways
@limenutt

169. Whatever you do, there is a
person who is doing it better.
@limenutt

170. Whatever you do, there is a
person who is doing it better.
Because they are using
GraphQL
@limenutt

171. You can build complex apps
without stress
@limenutt

172. You can build complex apps
without stress
and without redux
@limenutt

173. There is no technology that
matches every use case
@limenutt

174. There is no technology that
matches every use case
But it’s not the reason the
reinvent the wheel
@limenutt

175. Boilerplate is great
for job security
@limenutt

176. Boilerplate is great
for job security
Unless you are building your
own product
@limenutt

177. Australia is full
of dangerous animals, so…
@limenutt

178. Australia is full
of dangerous animals, so…
Come visit us once we
reopen the borders
@limenutt

179. Yes, you have
questions.
@limenutt
@limenutt

180. Thank you!
@limenutt