Angular being one of the popular frameworks for frontend development, it’s used at a huge scale, especially in projects with large team members. But this might at times, get difficult to maintain the code quality as well as difficult to provide maintenance for those projects.
So, after careful thought on it, I have collated a few points which can be used in maintaining the quality of Angular projects or any other projects
Important points that should be followed:
Using many small reusable components instead of one component
The component as a list-items can be further divided into add-list, edit-list, list-item, list-submit, etc. This will make it clear and maintainable at the same time
Using only display logic in the component and complex logic in the services
Having a complex logic of the components can make it difficult to understand and debug at the same time. While if you move it to services, we can it reusable across components, making components less inter-dependent and depend only on services
Using higher-order functions instead of traditional loops
Instead of using traditional loops like for, while, etc, we can use higher-order functions like map, forEach, reduce, filter. It helps us in coding a more functional way rather than the traditional way.
Using purposeful names instead of literal names for variables or functions
People most still give functions or variables like i,j or item, enabled, etc. This makes it difficult to understand the code in the future when we revisit the code for debugging or refactoring. So, we have functions or variables names which are self-explanatory like isSubmitEnabled, isResultLoaded, getResultsList, checkIfResultsAreValid. This will help us understand the code and debug quickly
Using data structures and polymorphism instead of conditional coding
We as developers tend to use the if-else or switch statements that we were taught in the schools. Though we fail to understand that using the data structure and polymorphism can help you more. Like switch statements can be replaced with JSON objects, so in the future, you would just have to modify the keys and values of the object rather than adding and removing switch cases.
Using lint-rules in the codebase (or add it in git-hooks)
If we are working with a big team of developers, it’s difficult to have the same coding or linting styles maintained amongst all the developers. But if you add linters in the git hooks (using husky or prettier), it will lint or prettify your code while making any commits or pushing the code. It will take care of maintaining the same standards across the developers.
Using trackBy function for rendering only part not whole
When you have a list of items displayed in your template. And with some external action, only one or a few of all the items are updated. But when you update the array of data, it might re-render the entire list of items. So, to avoid that we can add trackBy functionality. It will re-render if certain items have changed a condition or flag. So, it helps in better performance.
Other points that can be used:
- Avoid using long methods
- Proper use of smart and dummy components
- Avoid using logic in the template
- Avoid using any type in the code
- Avoid using subscription inside subscription instead use rxjs (withlatestfrom)
I hope this article was helpful to you. Let me know if you have other tips and tricks, I would be glad to hear from you. Till then Happy coding …!