Maintainable React

Maintainable React

Who am I

  • Sr. Software Engineer at Double
  • Former Tech lead at Algolia
  • Passionate about web-engineering for 15 years
  • Write on Medium and honest.engineering
  • Speak at meetups and conferences

Charly POLY

Maintainable React

JQuery /Prototype
Cross-browsers API
Animations
 

2010-2020'

2000-2010'

<2000

Backbone
MVP
Component-level
State management
Templating
 
XHR
ES5
Angular / React era
MVV, MV*
Component pattern
(Separation of Concerns)
Application-level
State management
HTML5
ES6-7 (modules, async)

A quick look to front-end history

Modern front-end is complex software

Maintainable React

What is "Maintainable"?

Easy to navigate 🧭

Easy to change 🔧

Easy to test 📏

Stable  🏗

Maintainable React app is about code that is:

Maintainable React

Make your React app easy to navigate 🧭

Maintainable React

React app easy to navigate 🧭

Project:

  • Project chat title
  • Project header
  • Project listing item
  • Project shortlist item
  • Project thumbnail
  • Project actions buttons

Maintainable React

React app easy to navigate 🧭

[Domain]|[Context]|ComponentName|[Type]

Part surrounded by “[]” are optional.

Maintainable React

React app easy to navigate 🧭

  • Domain: "Which product owns this component?"
     
  • Context:
    "what is the parent component?"
    "Which product subpart/page does this component belong to?"
     
  • Component's name:
    “What does this component do?”
     
  • Type: Form (Input, ...), View, Button
    When missing, we assume that a component is a View component by default.
[Domain]|[Context]|ComponentName|[Type]

Part surrounded by “[]” are optional.

Maintainable React

React app easy to navigate 🧭

Maintainable React

React app easy to navigate 🧭

File-based

Folders-based

  • ACommunityAddToShortListButton.tsx
  • Sidebar.tsx
  • SidebarSwitch.tsx
  • ACommunity/AddToShortList/Button/index.tsx
  • Sidebar/index.tsx
  • Sidebar/Switch/index.tsx

Maintainable React

React app easy to navigate 🧭

🧭   Good naming convention will force you to divide your app in meaningful pieces

Maintainable React

Make your React app easy to change 🔧

Maintainable React

React app easy to change 🔧

Reference version

Refactored version

Maintainable React

React app easy to change 🔧

🔧   Avoid coupling: custom hooks + data helpers

🔧   Good decomposition: simplest state + UI element

Maintainable React

Make your React app easy to test 📏

Maintainable React

React app easy to test 📏

  1. Choose a testing strategy

  2. Make your components testable

Tests makes refactoring easier

Maintainable React

React app easy to test 📏

End-to-end tests: whole application

Integration tests: components interactions

Unit tests: component

Unit tests:
Business logic

Cypress

Enzyme

Jest

Choose a testing strategy

Maintainable React

React app easy to test 📏

  1. Test critical business logic

  2. Add test when fixing regression

  3. E2E tests for critical paths

A good testing strategy

Maintainable React

React app easy to test 📏

Make your components testable

An example

Maintainable React

React app easy to test 📏

📏   Make your important logic accessible

📏   Test the critical part of your apps will facilitate refactoring

Maintainable React

Keep your React app stable  🏗

Maintainable React

Keep your React app stable 🏗

1. Staying up-to-date

Maintainable React

2. Having  proper reviews process

Keep your React app stable 🏗

1. Staying up-to-date

Maintainable React

Keep your React app stable 🏗

  • Dependabot 🤖
  • Update, break things often and move fast

Maintainable React

1. Staying up-to-date

Keep your React app stable 🏗

2. Properly reviewing your contributions

Maintainable React

Keep your React app stable 🏗

2. Properly reviewing your contributions

  • Review at most 500 LOC at a time,
    otherwise review fatigue can kick in.

 

  • Well defined components means smaller changes
     
  • Refactors should be done in dedicated branches
     
  • Use Github bots to enforce rules
    (ex: Probot)

Maintainable React

Conclusion

🧭   Naming is a good exercice to help divide your app in meaningful components

🔧   Hooks doesn't mean "fat components", decompose your components wisely

📏   Make your component testable and choose a test strategy to enhance refactoring

🏗   Keep your app stable by stay up-to-date and having code easy to review

Maintainable React

Thank you!

        slides on noti.st/charlypoly
        withdouble.com

        @whereischarly

        @wittydeveloper

Maintainable React

By Charly Poly

Maintainable React

  • 1,689