I Improve My Development Process By Choosing The Right JavaScript Library With These 5 Tips
JavaScript libraries are dominating stacks.
Let’s say there are 3 stack categories which are frontend, backend, and third-party services. The fact is that JavaScript has libraries in all of those stack categories (P.S that’s why I ❤️ JavaScript), it is because JavaScript is a programming language that can be used as both backend and frontend. That's why there are so many options for JavaScript libraries out there. Here are some examples of those libraries:
JavaScript libraries for frontend:
- ReactJS for reactive UI frontend
- VueJS for reactive UI frontend
- Svelte for reactive UI frontend
- Axios for HTTP request
JavaScript libraries for backend:
- Puppeteer for controlling high-level API of Chrome or Chromium
- Prisma for ORM (Object-Relational Mapping) database that type safe
- Node-Redis for Redis client
JavaScript libraries for third-party services:
and the number of JavaScript libraries keeps growing every year. Here the total taken in 2022 from NPM package manager is over 2 millions:
Why we need to choose the right JavaScript library?
The main goals of choosing the right JavaScript libraries is to make your development easier and faster. The number of JavaScript libraries are keep growing, even every year there are new popular JavaScript libraries are born. The Stack Overflow survey says since 2016 until 2022 JavaScript always on top of 5 most favorite programing language, in that case the more popular programing language, more new developers are coming, then more JavaScript developers want to make their libraries, then more variants of libraries are available.
The more variants of JavaScript libraries out there, the more burden we have choosing one that really helps us in development.
⚡ At the end of this article, you will know how to choose JavaScript libraries effectively.
The problem with more variants of JavaScript libraries.
JavaScript libraries are becoming so noisy, so many options making it harder for us to make decision choosing the right one. Every library has advantages and disadvantages if we don’t take a look at it deeply, we don’t know if it really can help speed up our development process or not. We can’t stop the growing numbers of JavaScript libraries, what we can do is just how we get better on choosing it.
The growing JavaScript libraries are unstoppable. Choosing it becoming extra effort. What we need is just improve our choosing it effectively.
Here the example I want to find the date picker for react in yarn package manager it showing 1000+:
Then my questions is:
- Is the first result always the right one?
- Does it really help my development?
- Is it easy to use?
In this article, I'll share my experience on what to do to answer those questions.
The mistake I've made is that grinding every JavaScript library is not helping me get better at choosing the right JavaScript libraries.
Back then, I spent most of my time experimenting with any popular JavaScript libraries.
I tried every new trending JavaScript library because I believe that when I know all of the most trending JavaScript libraries, I might get better at choosing the right one. Indeed, this is a working method, but it makes me exhausted. Slowly, I hate doing this because it takes a lot of effort. Imagine every year there are a lot of new trending JavaScript libraries and trying every one of them becomes ineffective.
Try every trending JavaScript library—it's like betting. The result can sometimes be a waste of my time and sometimes be a good experience.
⚠️ It is acceptable to experiment with the most trending JavaScript libraries for your own learning purposes.
Why is it not enough to try the JavaScript library only once?
Most of the new trending JavaScript libraries are very active in development. That is why trying the JavaScript library only once is not enough for us to form an opinion about the library. When the major changes come, the improvements sometimes make the libraries become more easily to use, less buggy, or the performance gets better.
That's why it forces me to keep up-to-date with the library and I don’t like doing it anymore.
I try to figure out if I can find another way more easily and I enjoy doing it.
Then I found the ultimate solution that is, until now, I keep this tips on my mind. The things is to choose the right JavaScript libraries is not always trying and keep update all of them.
Here the tips:
Tips #1: Focus on what you expert at it
It is better to choose the library you already know well rather than the library you are new to.
Choosing the new library always lead to adding some extra effort to understanding all of the usage. If you are already familiar with a library that has the same functionality, it is better to choose that one. It doesn't matter if the library is old, as long as you know how to use it well, it will still save you time. Never bet on trying new libraries if you want to focus on solving the real problem.
Focusing on solving the real problem will increase your development speed.
The JavaScript library should make your development process easier.
The main purpose of the JavaScript library is to make your development easier, not to force you to learn all functionality in the library or to solve problems in the library. Whatever JavaScript library you know is too old or decreasing in popularity. If you enjoy, know well all functionality set, and feel easy using it then keep choosing that library.
Stay with the JavaScript library you know well to make your development easier.
The JavaScript libraries that you have been using for a long time are the best ones for you to choose.
The old library is less popular, and sometimes it is more mature library. You should choose it because there are less issues with it. As long as the library is not deprecated yet and the maintainer is still active, it should be ok to choose it. Instead of using the new popular JavaScript library, it usually has so many issues and the development is very aggressive. Sometimes they make major changes in the short term.
The old JavaScript library you are familiar with is still the best option rather than new library.
Tips #2: Check the documentation first
Looking at the documentation first can help you make a quicker decision about which one to choose.
The JavaScript library usually has many functions and options, but we developers don’t need to remember all of those. When we use the library, most of our time is spent checking the documentation to see how to use it and what the options are. The documentation has information to answer whether or not what we need is in the library. So it is good to check the documentation before choosing the JavaScript library. Here are some points to help you choose a library by checking the documentation:
-
Understanding the format of the documentation.
The documentation is usually written in a format that can be easily understood and used to explain the functions and options. Every library's documentation is written in a different format, so a quick way to check the documentation is to understand the format first. Once you're familiar with the documentation format, you will be able to easily understand all of the library features.
A library with clear and easy-to-understand documentation is a good sign that you have chosen the right library.
-
The documentation reference
The documentation reference is a resource that explains the details of the functions and options of the library, including what syntax, parameters, and data type to use. Understanding the reference helps us quickly adapt to using the library. This point can be optional when you are using extensions like Intelligent code completion in your IDE it will automatically show you the reference while you code.
This is an example of code reference showing in an IDE. I am using VS code and typescript with the built-in Intelligent code completion. When I call the getFirestore function from the Firestore library, it shows the description, parameters, and event examples.
-
The code examples
This is my favorite thing in the documentation because it can speed up understanding the usage of the library. In my experience, checking the example is the fastest way to find out what I'm looking for. Unfortunately, not all of the documentation in the library has code examples.
The code example in the documentation helps us to understand the library more quickly and easily.
Here's an example of a documentation that has code examples:
Firestore provides a code example of how to add data.
The good documentation provides information that makes it easy to use the library. The written format is easy to follow, the code reference is easy to find, and there are examples of code usage.
Tips #3: Don't bet on low-maintained open source libraries
You should never using low maintained library in your project.
Choosing the low-maintenance open source library, you may have to deal with many unresolved issues and uncovered bugs. I've encountered this before when I chose a low-maintenance library - I got a bug. I tried finding a solution on the internet but no one was discussing it. At the end, I have two options: fix the bug myself or change the library. If I choose a good maintenance library, those efforts should never have happened.
The lower the maintenance on a library, the greater the likelihood you will be stuck on problems.
There are three criteria I use to determine whether a library has a good maintenance track record:
- Check the last commit in the master or main branch. Make sure it is not more than 3 months ago.
- Check the open issues in the repository, make sure there is someone who will respond to it within 3-7 days after the issue is opened.
- At least have dozens of forks on GitHub.
The good open source library is maintained by active contributors.
Tips #4: Avoid changing existing libraries
There's no need to change the library unless you're stuck on a problem with it, or you'll be overwhelmed with unnecessary work.
When you explore JavaScript libraries and find one that is more interesting than the one you are using now, I recommend that you don't immediately decide to change libraries. I’ve been trough this changing the existing library can add extra effort that may not be very effective on what you imagine. I have 3 checklists I usually use before deciding to change libraries to avoid extra effort. Here are the 3 checklists:
- There are no security issues in the existing library.
- The existing library is not deprecated yet.
- There are no recurring problems in the existing library.
As long as your existing library meets the checklist, you should not change it. Save your time and focus on solving the most valuable problems.
Tips #5: Maybe you don’t need the library at all
You don’t need the JavaScript library all the times.
You don't always need to add a new library if it is available in the JavaScript core API. You don't always need to use the Axios library if you can use fetch. You don't always need to use jQuery if you can use the JavaScript DOM API. You don't always need to use Underscore if you know all of the array methods in the JavaScript core API. Reducing the number of JavaScript libraries you use will improve the performance of your app.
If you master the JavaScript core API, you will have less dependence on libraries and your app will run faster.
Key takeaways:
The main purpose of JavaScript libraries is to make your development process easier and faster. Therefore, it is important to choose the right library before you begin using it.
- Choose the library you are most familiar with.
- Check the documentation first to make sure it is easy for you to understand.
- Avoid using libraries that aren't well maintained.
- Do not change the existing library.
- No need for a library if it exists in the JavaScript core API.
At the end, users don't care about the libraries you use, but too much use of libraries can make your app run slowly and give users a bad experience.
