Recently, I came across a ReactJS project in which there were a lot of bugs encountered by the Product Owner and Testing team, I was added to the project and given code access. I noticed some major flaws while architecting the app.
I thought of sharing my thoughts on what not to do when starting a new project for better scalability and maintainability. This will be applicable with any framework.
1. Have a clear vision of designs
Analyze the designs thoroughly before starting UI project with any framework. You should keep DRY (Do Not Repeat) principles in mind which means you should see what all features or components you could reuse in the application.
This will help you in determining which UI Library would be suitable for the application. There are lot-of options like Bootstrap, Tailwind or some full ready-made component libraries like Mantine UI, MaterialUI, AntD etc.
2. Do not overuse 3rd Party libraries
I have seen in some projects there are multiple UI component libraries are used and it the same case with State Managers. I have seen in some of the projects dev has added 3 different Component libraries and for State Management Redux, Mobx and React Query which is in my opinion is overusing.
Stick to one UI Library and State Manager. If you want to use Features like Global State and Query Caching, Revalidating etc., go ahead with Redux Toolkit which gives you best of both world. If you have requirement of only API Queries you can go ahead with React Query.
If you need some small functionality, create yourself instead of finding 3rd party library for every small thing. This will keep your code independent on multiple packages and will save from some issues from 3rd party libraries.
I prefer to create my own instead of using 3rd party library, I even have created a complete drag and drop functionality of my own to keep my code not dependent on others code and that helped me keep bundle smaller, as I have only kept the functionality I needed, where a library will give you more code as it has to support vast use cases.
3. Follow any design pattern
Design pattern should be followed to keep your code highly maintainable and reduce redundancy. I prefer to follow Atomic Design Pattern with React Apps as you can have Atoms (Single Component), Molecules (Grouping of Atoms), Organisms (Combining molecules), Templates and Pages. You can check details of atomic design pattern here.
You can choose any design pattern you like, you can refer to this site for more info on patterns
4. Set Coding Guidelines and Follow it!
There should be some coding guidelines set, and it should be followed by the team religiously. Some guidelines you can find below:
- Components should have single responsibility.
- Break components into smaller pieces if file length is increasing 100 lines, this will increase code readability and maintainability.
You can check this article for more clean code concepts
5. Do not ignore Lint issues
We should not ignore linting issues, even if those are just warnings we should try to fix all the lint issues as it will keep our code safe from unknown or unexpected errors.
Conclusion
In conclusion, starting a new ReactJS project with scalability and maintainability in mind is crucial for its long-term success. By adhering to the best practices discussed in this article, developers can avoid common pitfalls and ensure a smoother development process. Having a clear vision of designs, being mindful of third-party library usage, following a design pattern, setting coding guidelines, and addressing linting issues are all fundamental steps in building a robust and sustainable application.
Remember, each project is unique, and while these best practices serve as a solid foundation, developers should adapt and tailor them to suit their specific requirements. By continuously learning and improving their coding practices, developers can deliver high-quality applications that stand the test of time. Happy coding!
