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

Lessons learned: Architecting react apps

Lessons learned: Architecting react apps

Ba0adbbfa699d09f6ee7b4402e4dcf9f?s=128

Ankita Kulkarni

September 15, 2020
Tweet

Transcript

  1. @kulkarniankita9 10 consulting lessons: architecting react apps Ankita Kulkarni, Tech

    Lead, Loblaw Digital
  2. @kulkarniankita9 Hi, I’m Ankita!

  3. @kulkarniankita9 What have I built?

  4. @kulkarniankita9

  5. @kulkarniankita9 Use cases • Monitor your credit score - using

    biometrics • Food delivery app • Reporting
  6. @kulkarniankita9

  7. @kulkarniankita9 1. Project structure

  8. @kulkarniankita9 Directory structure index.js src auth index.js actions/epic/reducer/selector common components

    button primaryButton/secondaryButton/tertiaryButton utils constants store storybook locale Modules
  9. @kulkarniankita9 Challenges • A lot of shared context made it

    difficult to share code Vertical slicing modules eg: auth, biometrics
  10. @kulkarniankita9 2. React context and state management

  11. @kulkarniankita9 Project

  12. @kulkarniankita9 Is Context a state management solution?

  13. @kulkarniankita9 Does Context replace redux?

  14. @kulkarniankita9 Do you need redux?

  15. @kulkarniankita9 We couldn’t get rid of state management library

  16. @kulkarniankita9 Common context examples ✨ • Auth context • Orders

    context
  17. @kulkarniankita9 Challenges • Context was used as a state management

    solution When the app was small, this worked fine but not when it grew Look into a state management solution
 Examples: Redux, Apollo cache
  18. @kulkarniankita9 3. How storybook helped and evolved?

  19. @kulkarniankita9 What is storybook?

  20. @kulkarniankita9 Storybook is

  21. @kulkarniankita9 Design tokens

  22. @kulkarniankita9 Component library

  23. @kulkarniankita9 Examples

  24. @kulkarniankita9 4. With ❤ and without GQL

  25. @kulkarniankita9 What is GQL? • Only get what you ask

    for
  26. @kulkarniankita9 Without GQL

  27. @kulkarniankita9 Without GQL

  28. @kulkarniankita9 With GQL

  29. @kulkarniankita9 With GQL

  30. @kulkarniankita9 Challenges • We were missing data transformation using Apollo

    hooks Added validation on top of this to check for null values
  31. @kulkarniankita9 5. Performance

  32. @kulkarniankita9 Container and presentational components

  33. @kulkarniankita9 • Container and Presentational components • Use memoization •

    Use pure functions • Code splitting
  34. @kulkarniankita9 6. Documentation and on-boarding

  35. @kulkarniankita9 Docs! • Add a task to add some documentation

    to every Jira ticket • Practice what you preach
  36. @kulkarniankita9 7. Accessibility

  37. @kulkarniankita9 React a11y • https://github.com/dequelabs/react-axe • Lighthouse

  38. @kulkarniankita9 Lighthouse

  39. @kulkarniankita9 8. With hooks ⚓

  40. @kulkarniankita9 Common hooks ✨ • Translation hook • Accessibility hook

    for reducing motion • Responsive breakpoints
  41. @kulkarniankita9 9. Testing

  42. @kulkarniankita9 What gave us more confidence?

  43. @kulkarniankita9 Testing • Unit testing • React component testing: react-testing-library

    • API data transformation layer testing • Integration testing • Automation testing
  44. @kulkarniankita9 10. Forms are hard, use a library

  45. @kulkarniankita9

  46. @kulkarniankita9 Libraries used • Formik • redux-form

  47. @kulkarniankita9 Example

  48. @kulkarniankita9 Design pattern • Multi-step sign-up process • JSON form

    builder
  49. @kulkarniankita9 Bonus: Be Empathetic!

  50. @kulkarniankita9 This is pretty much the end.. Questions? Comments? Feedback…make

    it positive— Catch me after!!
  51. @kulkarniankita9 You did it