- Use Typescript
- Replace Callbacks with Async
- Code formatting and style
- Add comments in code and documentation:
- Writing meaningful test cases
- Do not depend on NPM for everything: Most of the simplest libraries are easy to implement by yourself. It will save your project from having a regular updates of packages and test compatibility.
- Analyse your bundle size impact: You don't need to load the whole Lodash library for a single _.omit call. Loading a huge bundle slows your app's initial loading time.
It provides various other features like interfaces, type aliases, abstract classes, function overloading, etc.
Consider seeing these examples without any context:
The problem which this approach is,
What does getPicture return, what if you want to add a function to create a post – how do you define the structure of data in an object? Now take a look at,
The key difference is transparency. Now you can understand the code and your IDE or tsc will assist you with it. When you call the TS version of getPicture, you will get useful information now.
Replace Callbacks with Async
In the beginning, callbacks were used to create asynchronous methods in Node JS, but when nested continuously, they tended to get out of control.
It is at this point that the code becomes unreadable. With the introduction of async/await, developers have noticed a lessening of this problem. You can easily avoid this bad callback scenario by replacing it with async and await calls.
Code Formatting and Style
This is a very important aspect of development. Regardless of working individually or in a team, it always helps to enforce some rules.
- Use ESLint and Prettier: If we use both, you can focus on what your code does. Imagine never again failing an automated test because of a missing trailing comma. By using prettier by defaults, you can end code-style arguments once and for all.
- Use descriptive naming for variables: You need to understand what these variables or functions will do, consider these variables, for example, buttonDomElem vs btnDomEl or loading vs isUserDataLoading, which is easier to understand. Prefix boolean variables with a verb like is or has and don’t be afraid of longer variable names.
Add Comments in Code and Documentation
When you write complex parts of code, always aim to write your code for other developers who can easily understand it. There are some sets of libraries that will generate code documentation from the inline comments you mentioned during development.
Use JSdoc in your project, it is very helpful because it will generate documents based on the methods and parameters we are using in our project. All we need to do is, write an inline comment in whatever places we need. The JSDoc will automatically take that as a keyword and generate a new API document for us.
Writing Meaningful Test Cases
When you are developing a crucial backend feature based on thorough specification, you will benefit from test driven development. But if you are creating a front-end dashboard app, using TDD can slow you down dramatically. Consider these points,
- Unit Testing: It is the go-to testing method for most use cases. Unit testing your frontend app can evaluate complex components like layouts, modal dialogues, wizards, multi-step client-side validated forms, etc. In backend development, you can verify whether the endpoints handle good and bad cases the way you expect them to.