Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Rescuing a SPAghetti React project

14f2b7db383dec76a490bae09596e96c?s=47 Last9
April 27, 2021

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.

14f2b7db383dec76a490bae09596e96c?s=128

Last9

April 27, 2021
Tweet

Transcript

  1. @_cha1tanya Rescuing a SPAghetti React project Prathamesh Sonpatki Last9

  2. None
  3. Build mode

  4. None
  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

  27. None
  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

  45. None
  46. Thank you! last9.io prathamesh.tech