Alexander Mostovenko "'Devide at impera' with GraphQL and SSR"
•
0 likes•208 views
The story is about how and why we decided to separate our frontend from a big python monolith. Why we decided to separate and why we have used Node.js for server rendering? What was the migration strategy (rewrite from scratch - was not an option)? What was the value of GraphQL? What are the results for developers and business?
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Alexander Mostovenko "'Devide at impera' with GraphQL and SSR"
Similar to Alexander Mostovenko "'Devide at impera' with GraphQL and SSR" (20)
More from Fwdays
More from Fwdays (20)
Recently uploaded
Recently uploaded (20)
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
- 7. ~100k companies ~80m products ~5k req/s
- 8. ~400k LoC .js ~500k LoC .py ~100+ devs
- 11. Split back and front?
- 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
- 18. team1
- 26. Different tech stack requirements
- 28. Our story
- 32. Python Backend
- 42. backend -> HTML JSX
- 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
- 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
- 62. Rewrite from scratch or Incremental rewrite
- 63. ~100k companies ~80m products ~5k req/s
- 64. Node.js ? GraphQL ? SSR ?
- 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
- 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 !
- 85. Phase 2 API
- 90. GraphQL
- 93. Schema
- 95. graphiql
- 100. Apollo client
- 101. Transport
- 102. Transport Cache
- 109. Apollo link schema
- 112. SSR
- 120. { ssr: false }
- 121. Dynamic Rendering
- 126. Query batching
- 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>
- 143. <a> -> <Link/>
- 144. React Router ++
- 150. /tv-2;wholesale;discount.html?c=32 /tv-2;discount;wholesale.html?c=32 /tv-2;discount;show.html?c=32
- 157. Phase 4 Direct traffic to Node.js
- 163. Separate tech stack, deploy (repo)
- 164. Lessons
- 165. Local dev setup for SSR is hard
- 168. Monitor and Measure
- 172. Memory limits
- 174. How to lock
- 181. Server GraphQL is not trivial
- 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
- 194. Performance improvements (perf score)
- 195. Performance improvements (perf score)
- 196. Autoscaling k8s
- 197. Autoscaling k8s
- 198. Autoscaling k8s
- 200. No silver bullet