Like any kind of apps, JavaScript apps also have to be written well.
Otherwise, we run into all kinds of issues later on.
In this article, we’ll look at some best practices we should follow when writing JavaScript code.
Event Delegation
We can listen to the events from all the child elements with one event listener attached to the parent.
For example, we can write:
document.addEventListener('click', (event) => {
const {
currentTarget
} = event;
let {
target
} = event;
if (currentTarget && target) {
if (target.nodeName !== 'LI') {
while (currentTarget.contains(target)) {
target = target.parentNode;
}
}
}
});
We can check which element emitted the event in the event listener.
All the data is in the event object.
currentTarget has the element that now propagates the event.
target has the original element that emits the event.
Debounce, Throttle, and requestAnimationFrame
Debouncing a function prevents it from being called again until a given amount of time has passed.
We can do this easily with Lodash’s debounce method.
Throttling only causes the function to be called a max number of times.
Lodash also has a throttle method.
requestAnimationFrame lets us throttle to 60fps when we run animation.
Client-Side Data
We can get data on the client-side with the Fetch API.
It’s a promise-based API that lets us make HTTP requests on client-side apps.
If it’s not available, we can add a polyfill for it.
When to Use a Client-side Data Request Library
We can use a client-side request library to make cancelable requests, add timeouts, or get request progress.
They’re all made easier with 3rd party libraries like Axios.
They also have transformers, interceptors, and XSRF protection that can be applied to all requests.
We can also make helper functions that add error handling, cookie, CORS, etc.
Concatenating Requests
GraphQL is an alternative way to make HTTP requests which don’t send JSON.
Instead, it has its own query language to make requests via HTTP.
It’s an alternative worth considering since it has type checks and lets us selectively get data by field.
This means the calls ate more targeted and it’s more efficient.
Unit and Integration Testing
Automated testing makes our lives easier.
We can write unit tests to test some under the surface functionality.
Integration tests test more functionality.
However, visual checks still need to be done manually.
Libraries
We need to update our libraries often to keep them up to date.
They often have security fixes and new features to make our lives easier.
Also, utility libraries make our lives easier. They have many helper functions to help us.
For instance, Lodash and Underscore have many things like clone , each , chunk and more.
Frameworks
Frameworks help us with developing faster.
We can use popular ones like React and Vue which have lots of libraries that work with them to help build apps faster.
Cookies
We can use local storage with a unique identifier in addition to cookies to make sure users that has the cookie is actually the user that should have it.
Conclusion
There’re many things we may have not considered.
We can secure cookies with more tracking.
Many libraries make our lives easier.
