Alexander Mostovenko "'Devide at impera' with GraphQL and SSR"

1. ‘Devide at impera’ With GraphQL and SSR Oleksandr Mostovenko EVO. Company

2. About me Software Engineer at EVO. Company Github https://github.com/AlexMost Twitter https://twitter.com/MostovenkoA

3. ttag https://ttag.js.org/

7. ~100k companies ~80m products ~5k req/s

8. ~400k LoC .js ~500k LoC .py ~100+ devs

11. Split back and front?

12. Backend Frontend Monolith Frontend

13. Separate: ● Deploy ● Tech stack ● Teams ● Release cycle

14. Team -> Teams

15. Backend Frontend B F R O N T A C K

16. Backend Frontend B F R O N T A C K

17. Separate release cycle

18. team1

19. team1 team2 team3 team4

20. Different scale requirements

26. Different tech stack requirements

27. js/ts Build process SSR/PWA

28. Our story

32. Python Backend

33. Python Backend .mako .CSS .JS Backend

34. Python Backend .CSS .JS .JSX .mako .CSS .JS HTML Backend Frontend

38. Duplicate UI ecosystem

42. backend -> HTML JSX

45. Backend HTML React JSX SPA

46. Routing on the server - Full page reload on navigation

47. Backend

49. ● Single UI ecosystem

50. ● Single UI ecosystem ● UI Components

51. ● Single UI ecosystem ● UI Components ● Client Routing

52. ● Single UI ecosystem ● UI Components ● Client Routing ● API

53. ● Single UI ecosystem ● UI Components ● Client Routing ● API SPA

54. Python API .CSS .JS .JSX .mako .CSS .JS HTML Backend Frontend

55. Python API .CSS .JS .JSX .mako .CSS .JS HTML Backend Frontend

56. SEO ?

57. ● Single UI ecosystem ● UI Components ● Client Routing ● API SPA

58. ● Single UI ecosystem ● UI Components ● Client Routing ● API ● Server Side Rendering (SSR) SPA SSR

59. API Browser HTML Backend Frontend Node.js

60. API Backend Frontend

62. Rewrite from scratch or Incremental rewrite

63. ~100k companies ~80m products ~5k req/s

64. Node.js ? GraphQL ? SSR ?

65. Incremental rewrite

66. Phase 1 Phase 2 Phase N

67. Phase 1 (Deployed) Phase 2 (Deployed) Phase N (Deployed)

68. Phase 1 UI -> JSX Setup SSR server

70. SSR server

71. SSR server props HTML

72. python Browsermako

73. python Browsermako

74. python Browsermako Node SSR props

75. python Browsermako Node SSR props HTML

76. python Browsermako HTML Node SSR props HTML Hydration

77. Node.js - works

78. Scaling

79. React render is quite fast

80. 5ms

81. 5ms -> 18ms !!!

82. 5ms -> 18ms !!! Minified Non Minified

83. Ouch !

84. Non Minified Minified

85. Phase 2 API

86. <html> <head>...</head> <body> </body> </html> SSR props HTML

87. <html> <head>...</head> <body> </body> </html> SSR props HTML

88. SSR server props HTML

89. SSR server API ? HTML

90. GraphQL

93. Schema

95. graphiql

100. Apollo client

101. Transport

102. Transport Cache

103. Transport Cache SSR support

109. Apollo link schema

112. SSR

120. { ssr: false }

121. Dynamic Rendering

125. Real user (dynamic) Search Crawler (bot)

126. Query batching

129. <Base> <ProductGroups/> <ShowRoom/> <Footer/> </Base>

130. <Base> <ProductGroups/> <ShowRoom/> <Footer/> </Base> Query 1

131. <Base> <ProductGroups/> <ShowRoom/> <Footer/> </Base> Query 1 Query 2 Query 3 Query 4

132. <Base> <ProductGroups/> <ShowRoom/> <Footer/> </Base> Query 1 Query 2 Query 3 Query 4 Batch

133. 4 Graphql Queries 2 Network requests

134. DNS CONNECT SSL DATA 72ms 90ms 180ms

136. Phase 3 Client side navigation

137. React Router

138. Used <a> instead of <Link/>

140. <Router> </Router>

141. <Router> <Router> <Link/>

142. <Router> <Router> <Link/> <a/>

143. <a> -> <Link/>

144. React Router ++

145. /tv-2;wholesale;discount.html?c=32

149. /tv-2;wholesale;discount.html?c=32 /tv-2;discount;wholesale.html?c=32

150. /tv-2;wholesale;discount.html?c=32 /tv-2;discount;wholesale.html?c=32 /tv-2;discount;show.html?c=32

151. /tv-2;wholesale;discount.html?c=32 /tv-2;discount;wholesale.html?c=32 /tv-2;discount;show.html?c=32 /tv-2;show.html

152. /tv-2;wholesale;discount.html?c=32 /tv-2;discount;wholesale.html?c=32 /tv-2;discount;show.html?c=32 /tv-2;show.html ….

153. Python routes js https://pypi.org/project/Routes/

157. Phase 4 Direct traffic to Node.js

158. API python mako HTML Node SSR props HTML Browser

159. API python Browser mako HTML Node SSR props HTML SSR Browser

160. python Browser mako HTML Node SSR props HTML SSR Browser BrowserSSR

161. API BrowserSSR BrowserSSR BrowserSSR BrowserSSR

162. API BrowserSSR BrowserSSR BrowserSSR Native

163. Separate tech stack, deploy (repo)

164. Lessons

165. Local dev setup for SSR is hard

166. webpack.server.js webpack.client.js

168. Monitor and Measure

171. CPU Memory Per page load

172. Memory limits

174. How to lock

175. py Worker1 SSR Worker1

176. py Worker1 SSR Worker1 py Worker2 py Worker3 SSR Worker1

179. py Worker1 SSR Worker1 py Worker2 py Worker3 SSR Worker1 LOCK

181. Server GraphQL is not trivial

182. Hiku http://hiku.readthedocs.io

183. N+1 Performance

186. SEO -> SSR

187. So?

189. SPA decreased bounce rate

190. SPA decreased bounce rate

191. SPA increased avg session duration

192. SPA increased avg session duration

193. Performance improvement possibility

194. Performance improvements (perf score)

195. Performance improvements (perf score)

196. Autoscaling k8s

199. Try, iterate, measuer

200. No silver bullet

201. Thanks :D Be healthy!!!

Alexander Mostovenko "'Devide at impera' with GraphQL and SSR"

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Alexander Mostovenko "'Devide at impera' with GraphQL and SSR"

Similaire à Alexander Mostovenko "'Devide at impera' with GraphQL and SSR" (20)

Plus de Fwdays

Plus de Fwdays (20)

Dernier

Dernier (20)

Alexander Mostovenko "'Devide at impera' with GraphQL and SSR"