Maintainable React
photo by Matías Santana
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 📏
-
Choose a testing strategy
-
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 📏
-
Test critical business logic
-
Add test when fixing regression
-
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!
