Rescuing a SPAghetti React project

Every project starts with good code but if care is not taken after few months realization sinks in that the code is not maintainable at all. Everyone scares to touch the code. How do you come out of this? Well, you go back to drawing board and improve one thing at a time. With Confidence, safety toolkit and shared mental model it becomes easier to enforce correctness into the codebase and that's what we did to rescue our frontend app at Last9.

Transcript

1. @_cha1tanya Rescuing a SPAghetti React project Prathamesh Sonpatki Last9
3. Build mode
5. Reality sinks in
6. Bad code
7. Bad code • Hard to extend
8. Bad code • Hard to extend • Duplication
9. Bad code • Hard to understand
10. Bad code • Hard to understand • Lacks consistency
11. Bad code • Hard to understand • Lacks consistency • Cascading failures
12. Bad code to Good code
13. Bad code to Good code Confidence Safety Shared mental model
14. Confidence
15. Doing one thing well
16. function validateTimestamp(atTimestamp) { if (atTimestamp > 0) { return true; } return false; }
17. function validateTimestamp(atTimestamp) { if (atTimestamp > 0) { dispatch(); return true; } return false; }
18. function validateTimestamp(atTimestamp, currentUser) { if (atTimestamp > 0) { if (currentUser.admin) { dispatch() } return true; } return false; }
19. function validateTimestamp(atTimestamp) { if (atTimestamp > 0) { return true; } return false; } validTs = validateTimestamp(atTimestamp); if (validTs && currentUser.admin) { dispatch() }
20. Tests
21. Cypress
22. Hooks
23. function useDidUpdateEffect(fn, inputs) { const fncRef = useRef(); fncRef.current = fn; const didMountRef = useRef(false); useEffect(() => { if (!didMountRef.current) { didMountRef.current = true; } else { return fncRef.current(); } // eslint-disable-next-line react-hooks/exhaustive-deps }, inputs); } useDidUpdateEffect
24. useCallback true === true // true false === false // true 1 === 1 // true 'a' === 'a' // true {} === {} // false [] === [] // false () => {} === () => {} // false const z = {} z === z // true
25. useCallback const isSelected = useCallback((item) => selectedItems.includes(item), [selectedItems]); return ( <List classes={{ root: classes.listRoot }}> {listItems.map((item) => ( <ListItem key={item} onClick={() => onSelect(item)} disableGutters classes={{ root: classes.listItemRoot, selected: classes.listItemSelected }} selected={isSelected(item)} button > <ListItemText classes={{ primary: classes.listItemTextPrimary }}> {item} </ListItemText> </ListItem> ))} </List> );
26. react-hooks/exhaustive-deps
28. useEffect(() => { if (graphType === GraphType.Custom && views.length === 0) { setSelectedNodeIdents([]); } }, [views.length]);
29. useEffect(() => { if (graphType === GraphType.Custom && views.length === 0) { setSelectedNodeIdents([]); } }, [views.length, graphType]);
30. Safety Toolkit
31. TypeScript
32. export type Timestamp = number; export type MaybeTimestamp = Timestamp| null | undefined; export interface TimeRange { from: Timestamp; to: Timestamp; } export enum ViewType { Custom = 'custom', Automatic = 'automatic', }
33. function validateTimestamp(atTimestamp: Timestamp): boolean { .... }
34. export interface Query { where?: { name: string }; select?: { type: 'custom' | ‘automatic' }; } export interface QueryWithLimit extends Query { limit: number; }
35. Code reusability
36. No surprises
37. ESLint & Prettier
38. eslint --fix --ext .js,.jsx,.ts,.tsx src --color --max-warnings 0
39. Shared mental model
40. knowledge structure(s) held by each member of a team that enables them to form accurate explanations and expectations
41. Sequence diagrams
42. Flowcharts
43. Comments
44. Bad code to Good code Confidence Safety Shared mental model
46. Thank you! last9.io prathamesh.tech