5 product development tools to use in your JavaScript project
EPAM’s Senior Software Engineer Oleksii Sydorenko picks his top five tools for product development that can make your engineering job easier.
JavaScript developers
When building any product, having the right tools is a requirement for success. Product development tools can help streamline and automate various tasks in your project, from code testing to product deployment. In this article, I'll review five tools that can be particularly useful for JavaScript developers looking to optimize their project flow.
Types of must-have tools for product development
Code testing tools: one of the most important aspects of product development is code testing, where you verify that your code meets the requirements and performs as expected.
Product deployment tools: Once your code is ready to go, you'll need a way to deploy it to your servers. There are a number of product deployment tools available that can help you get your product up and running quickly and easily.
Logging and monitoring tools: Once your product is live, it's important to keep an eye on how it's performing. Logging and monitoring tools can help you do just that.
Debugging tools: Debugging tools can be incredibly useful when something goes wrong with your product. They can help you identify the cause of the problem and fix it quickly.
Now let’s move on to my top five product development tools that I recommend for keeping your project in check.
Prettier
The main advantage to using Prettier in your project is that it'll make formatting easier for everyone. All developers share the same structure and this makes things more consistent, which means less time spent on fixing issues related to input or output formats.
With Prettier, it's easy to get into a groove with the formatting, configuration and style choices that are made for all developers on an application — which means less time reviewing code base details when collaborating between teams or people who have different skill sets. Additionally, it can be helpful in catching errors related to typos or syntax.
Installing Prettier is straightforward also. Simply copy the .prettierrc file and place it in your project's root directory. You can create your own file as well, with the following contents:
WebStorm comes with Prettier baked in, so you don't need to install any extra packages or plugins to get it to work.
Import aliases
As with most things in programming, there are pros and cons to using relative imports. Some developers find them more convenient, while others have a difficult time convincing themselves that they should replace all the references within their projects, even though this only requires launching a couple of commands in WebStorm.
Importing modules can be a tedious process, especially if you are using aliases. When this occurs, it'll give an error that some of the required library files couldn't be found and needs to stop immediately because there may remain other alias names in use which would lead to more problems later down the line. In this case, your project manager will have the responsibility for explaining why they wasted time and resources with no benefit gained from it all.
The idea of "perfectionism" is something that many people aspire to, but it's not always worth the effort. In this case, you should know your limitations and accept what cannot be changed or improved upon if need be — even though there may seem like an endless list of things which could use some work. The business value of such imports is almost zero, and development won't be much faster.
Import aliases is a useful tool that improves JavaScript code readability. Instead of specifying the absolute or a relative path, you can specify the alias:
Doesn’t it look much better than the code below?
You can configure import aliases by editing the tsconfig.json file with the following configurations, for example:
ESLint
ESLint is a tool that we all must have in our belts. A developer who makes mistakes in writing code, whether in JavaScript or TypeScript, cannot guarantee that their code will cover non-functional requirements, so the help of linters is invaluable. ESLint contributes towards helping spot mistakes like unused variables or incorrect code style formatting, which could lead to more serious errors when left unfixed.
WebStorm has several features to help you be more productive, such as automatic correction of errors. But what's really going on under the hood? Web developers should pay attention because ESLint isn't just correcting spelling mistakes — it also helps improve your code by suggesting improvements that'll make it easier for other people (or programs) to read through.
Linting catches errors, syntax and typing mistakes that'd otherwise be missed by human code readers or editors — and it does so without fail every time! You don't have to do anything extra; just install this tool once and let it do its work.
You can install the ESLint package locally and globally.
Install it locally with the following command:
Next, configure the linting rules and create the .eslintrc file. Its contents will vary depending on your tasks. Let's review the most minimalistic config variant:
You can select and configure the config file yourself. There are many good examples of configurations available online, with the common goal of maintaining projects in good condition.
Pre-commit
Process automation is a great way to save time and increase productivity. You can create scripts that do your job for you. One such script called Pre-commit makes sure all tests are green before each commit, so there's no need to do routine work or run them manually every single day.
If you’ve ever forgotten to check your code before committing and pushed it to a branch, you’re not alone. The code goes to the branch, the pipelines get launched, and the builds get carried out. These same builds can fail for trivial reasons, like a failed eslint check, missed commas, or wrong quotation marks entered. You can foresee these issues with the help of Pre-commit so that you won't waste your precious time on launching builds.
You can install Pre-commit both locally and globally. The directions below are for local installation:
Then add configuration to package.json and you’re all set:
Yarn
What is Yarn and why was it necessary to invent another package manager? The most significant features of Yarn (yet another resource negotiator) are, of course, the speed of downloading packages and their security. So why is Yarn better than everyone's favorite npm? Unlike npm, which downloads and checks each package one after the other, Yarn does it in parallel, which increases performance and security.
It's up to you to choose either npm or Yarn. However, the most important and significant advantage of Yarn over npm is the parallel execution which increases the speed of installing packages. While the choice is yours, I’d still strongly recommend going for Yarn.
How to make the right choice
The choice of configuration for the project depends on the qualifications of the team. Of course, in an ideal world, we'd like to use everything that exists and makes our code truly beautiful. But we live in a world where quality, speed, and price cannot always fit in a single basket.
Therefore, choices need to be made to get the results you’re aiming for. It all depends on the situation that has developed on the project. It isn't necessary to install all the linters at once, and starting Prettier and pre-committing can be done later, but collecting the basic package for a good start is simply vital.
I've reviewed five product development tools that can help you significantly improve the software development process. Indeed, there are more tools out there; however, I focused on the most effective ones that require configuration only once and then they’ll be available for the whole project, which is time-efficient and straightforward.
Looking for new career opportunities? Explore our JavaScript engineer jobs and apply to join EPAM’s global team of top frontend engineers.