A journey through a slow react app.
- 1. A Journey through a slow React application ⛵ ❤ _
- 5. issue view https://www.page1.com/browse/issue-1 My Project My Project/issue-1 Burning task, please complete! Customer is really pissed about this, find a way to fix this. There’s really no legit way to reproduce this yet, but you gotta try more. ASSIGNEE PK LAUNCH DATE 29/02/2019 ESTIMATE 200 BOARD BACKLOG ISSUES REPORTS ASSUMPTIONS @PKodmad
- 6. Backlog https://www.page1.com/projectkey/backlog My Project BOARD BACKLOG ISSUES REPORTS BACKLOG ISSUE 1 - Fix this first ISSUE 2 - Fix this next ISSUE 3 - Fix this later ISSUE 4 - Fix this never ASSUMPTIONS @PKodmad
- 7. Board https://www.page1.com/projectkey/board My Project BOARD BACKLOG ISSUES REPORTS BOARD TO DO Fix this never Issue - 4 Fix this if possible Issue - 3 WIP Fix this next Issue - 2 DONE Fix this first Issue - 1 ASSUMPTIONS @PKodmad
- 8. ASSUMPTIONS Client Side Rendering = React.render() issue view https://www.page1.com/browse/issue-1 My Project My Project/issue-1 Burning task, please complete! Customer is really pissed about this, find a way to fix this. There’s really no legit way to reproduce this yet, but you gotta try more. ASSIGNEE PK LAUNCH DATE 29/02/2019 ESTIMATE 200 BOARD BACKLOG ISSUES REPORTS Fix fast! Can’t wait COMMENTS @PKodmad
- 9. ASSUMPTIONS Server Side Rendering = React.renderToString() issue view https://www.page1.com/browse/issue-1 My Project My Project/issue-1 Burning task, please complete! Customer is really pissed about this, find a way to fix this. There’s really no legit way to reproduce this yet, but you gotta try more. ASSIGNEE PK LAUNCH DATE 29/02/2019 ESTIMATE 200 BOARD BACKLOG ISSUES REPORTS Fix fast! Can’t wait COMMENTS @PKodmad
- 10. ASSUMPTIONS SPA - Single Page Application @PKodmad
- 11. ASSUMPTIONS TTR - Time to render TTI - Time to Interactive @PKodmad
- 13. Do you really have a problem with performance though? @PKodmad
- 15. The data fetching duality ACT 1 @PKodmad
- 16. @PKodmad DATA IN SSR data = fetch() store = createStore() state = store.getState() window.SSR_DATA = state
- 17. @PKodmad DATA IN SPA initialState = window.SSR_DATA store = createStore(initialState)
- 18. @PKodmad Router
- 19. @PKodmad ❌
- 20. <Router> {children} <Router/> <PrefetchCacheProvider> <PrefetchCacheProvider/> Powered by react context @PKodmad
- 21. { (data, loading) => <PartofApp data={data} /> } <PrefetchQuery resolve={}> <PrefetchQuery/> Only to be used in case of SSR @PKodmad
- 22. Route? @PKodmad
- 23. Double rendering strategy 👍 for reuse 🤒 for performance @PKodmad
- 24. treewalk +TTR = fetch + render @PKodmad
- 25. treewalk +TTR = fetch + render @PKodmad
- 28. The loading page congruence ACT 2 @PKodmad
- 29. @PKodmad SSR HTML ❌= Client HTML 1. Analytics HOC 2. Logging Infra 3. In product help
- 31. @PKodmad issue view https://www.page1.com/browse/issue-1 My Project My Project/issue-1 Burning task, please complete! Customer is really pissed about this, find a way to fix this. There’s really no legit way to reproduce this yet, but you gotta try more. ASSIGNEE PK LAUNCH DATE 29/02/2019 ESTIMATE 200 BOARD BACKLOG ISSUES REPORTS
- 32. If you intentionally need to render something different on the server and the client, you can do a two-pass rendering. @PKodmad Double render? https://reactjs.org/docs/react-dom.html#hydrate
- 33. @PKodmad const html = saveSSRHTML() React.render(<App />) if (loading) { }if (loading) { <div dangerouslySetInnerHTML={html} /> }
- 35. The state management formulation ACT 3 @PKodmad
- 36. @PKodmad
- 37. @PKodmad
- 43. Scaling perf issues Lack of selectors Debugging workflow Provider hell @PKodmad
- 45. Honorable mentions • React.memo() • Lighter SSR components • Page Ready indicator @PKodmad
- 46. Thanks for the dev tools @PKodmad
- 47. @PKodmad “All good things happen just outside of your comfort zone”
- 48. @PKodmad
- 49. If you send some props Its so lovely.. If you set the state Its okay.. If you send some props Its so lovely.. If you set the state Its okay.. @PKodmad
- 50. You sync the DOM By next tick tick tick By next tick tick tick Reeeact.. 😂 @PKodmad
- 51. Million providers with no owners Million memoized functions I write Million components I create Million renders squeeze my thread Time for some hooks.. Tick tick tick @PKodmad
- 52. @PKodmad Thank you for all the ❤