DEV Community

Robbie Cahill
Robbie Cahill

Posted on

Six Ways To Drastically Boost Your Productivity As A Node developer

Introduction

These five productivity tips will supercharge your productivity as a Node developer. You'll save hours of time which you can then invest in other activities.

Its not a complete list of everything you should be doing, but these things alone will drastically improve your productivity if you are not already doing them.

Use the fuzzy finder

Many of us are still working with large monolithic codebases that sometimes have thousands of files.

How are you supposed to find employee.js, hidden in /src/authentication/userTypes/employee.js amongst the thousands of .js files and hundreds of folders in your project? Manually go looking for the file through the directory tree? Ask another developer who is more familiar with the codebase?

Nope, just use the fuzzy finder and type in employee.js and you'll have found your file in seconds.

Heres how it works. In vscode, press Alt+P and then type in the name of the file you are looking for. The result will appear instantly.

The fuzzy finder in vscode
the fuzzy finder in vscode

If you are using IntelliJ or WebStorm, press shift twice quickly (aka double shift) instead of pressing Alt+P.

Use a real debugger instead of console.log()

Back when I was a mid level engineer, learning how to use a debugger was one thing by itself that supercharged my productivity. I could do in a couple of hours work that might have taken me a day to do. Fixing bugs and building out features was much easier.

I've found debugging especially useful when exploring unfamiliar codebases that I didn't write. You can easily see the results of even the most complex logic written in weird ways. Its much easier to reason out complex, convoluted logic when you can run it line by line and see how things change.

If you've ever used console.log() to print a value to the console, you might know how tedious it can get if you are trying to debug something complex. It prints one value at a time and you need to write a new console.log() statement for each value you want to see. If the value you are looking at changes, you need to console.log() it again. Its a bit like poking around with a blindfold or in the dark.

Human working memory is limited so once you've manually printed enough variables, the values will start to disappear from your mind and then you'll have to print them again or write them down somewhere. Trying to keep it all in working memory takes valuable brain resources that you could redirect towards making your code work the way you want it to.

Enter the debugger - set a breakpoint in your code then run your app. When your app reaches the line you set a breakpoint on, you'll be able to see all variables in scope in the debug tab.

There is no more need to juggle lots of values in your working memory. With just one action, you can now see everything instead of just one value at a time.

I started with just debugging my own application code but as time went by and I became more senior, I found I could get great insights by debugging framework code (such as the code for express). I was able to find answers to questions that weren't even listed in the documentation.

If you want to learn how to set up your debugger, see my other article Supercharge Your Node Productivity With Debugging.

Use async/await and avoid "callback hell"

Consider the following examples with and without async/await.

Without async/await:

function addFavoriteProduct(favoriteProduct) {
    const user = userRepository.get(userId).then((user) => {
        const userProfile = profileRepository.get(user.profileId).then((userProfile)) => {
            const favoriteProducts = productsRepository.getFavoriteProducts(userProfile.favoriteProductsId).then((favoriteProducts) => {
                favoriteProducts.add(favoriteProduct);
            }).catch((error) => {
                // Handle error
            })
        }).catch((error) => {
            //Handle error
        });
    }).catch((error) => {
        // Handle error
    });
}
Enter fullscreen mode Exit fullscreen mode

This is an example of "callback hell". Its contains many nested operations and is hard to maintain. If you had any more nested operations you'd be heading towards the Pyramid Of Doom anti pattern.

I wouldn't be surprised if there is a bug in there I didn't notice, because the code is way more complicated than it needs to be!. I'm not even going to try to get it working, because there is a better way.

This used to be the standard way to do this type of operation in NodeJS up until very recently. Because of this, many older examples and tutorials online still teach this style, so be careful about what you read online in places like Stackoverflow. If you see this style of code you should be aware that its no longer best practice. Find a different example elsewhere or try to refactor it to be better, like the example below.

With async/await:

async function addFavoriteProduct(favoriteProduct) {
    try {
        const user = await userProfile.get(userId);
        const userProfile = await profileRepository.get(user.profileId);
        const favoriteProducts = await  productsRepository.getFavoriteProducts(userProfile.favoriteProductsId);
        await favoriteProducts.add(favoriteProduct);
    } catch (error) {
        // Handle error
    }
}
Enter fullscreen mode Exit fullscreen mode

As you can see, this example much cleaner and easier to understand. Its way less likely to have bugs hidden in it because its simpler.

To use async/await you need to be on Node 8 or higher, so recent versions of Node will support it. You'll need to use it inside an async function. Declare one by adding async, e.g. async function get().

Share your work early with a public URL

Did you know you can get a public URL for a Node application being served from localhost or 127.0.0.1 on your local machine, even if its behind a firewall or corporate network? It doesn't require any networking config and you can do it in a single command with expose, for example expose 80 as myapi.expose.sh.

This lets you share your work early with your collaborators - such as other engineers, customers or product managers and get fast feedback without needing to set up a full deployment pipeline.

You could be writing a back end API, share a public URL for that and then do live debugging as the React front end developer you are collaborating with sends a request from their application to your API.

Why not do live debugging while webhook providers send you webhook requests, instead of spending hours reading their (often not so great) documentation?

If you are on Linux, run this to install expose

curl -s https://expose.sh/sh/install-linux.sh | sudo bash
Enter fullscreen mode Exit fullscreen mode

If you are on a Mac, run

curl -s https://expose.sh/sh/install-mac.sh --output install-mac.sh && sudo bash install-mac.sh`
Enter fullscreen mode Exit fullscreen mode

For Windows head over to the Installation Page and download the exe file.

Then you can run expose <port> where <port> is the port number your app is running on. More instructions are available in the Documentation.

Use npm scripts to automate repetitive tasks

Need to compile your JavaScript, run a linter or your unit tests? instead of remembering the commands to run each of these, you can add NPM scripts to your package.json file to run them.

{
  "name": "myapp",
  "main": "app.js",
  "scripts": {
    "build": "tsc -p ./",
    "watch": "tsc -p ./ -w",
    "test": "jest",
    "lint": "eslint",
    "start": "nodemon app.js"
  },
  "dependencies": {
    .....
  }
}
Enter fullscreen mode Exit fullscreen mode

This example uses TypeScript, the superset of JavaScript that adds type safety. I run my app I first need to compile my code into plain JavaScript that node can run.

To run the script, run npm run <script_name>. Here I can run npm run build to compile my code and npm run watch to compile in watch mode, automatically recompiling for each change.

test and start are a special scripts and you can just run these as npm test and npm start.

Start your app with nodemon to get fast feedback

If you make a change to your code after starting your app with node (e.g. node app.js) you need to press ctrl+c to stop your app and then start it again to get the new change. While it might not sound like much and only takes a few seconds to do, doing this repeatedly over time will add up. Lets say it takes you five seconds and you do this on average 1000 times in a week. That's 5000 seconds, or about an extra 1.3 hours of work that you didn't need to do per week.

The difference with nodemon is that when you update your code, your application automatically restarts.

Before you use nodemon you need to install it, so run npm install -g nodemon.

To start your app with nodemon is almost the same as using node. Just replace node with nodemon, for example you might run nodemon app.js instead of node app.js.

Here's what it looks like:

$ nodemon app.js
[nodemon] 1.18.9
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `node app.js`
Example app listening at http://localhost:3000 # My app has started up

#####
# Here, I make a change to app.js
#####

[nodemon] restarting due to changes...
[nodemon] starting `node app.js`
Example app listening at http://localhost:3000 # Now, my app automatically restarts and picks up the change
Enter fullscreen mode Exit fullscreen mode

Now when I make changes, the application automatically restarts saving me lots of time which I can then invest in other things.

Pro tip: Combine this with a start npm script, like in the example in the previous section.

Conclusion

This isn't a complete list of things you can do to increase your productivity as a Node developer, but its a good starting point.

These simple things can save you lots of hours of unnecessary work.

If you found this article useful, please consider sharing around it to help others.

Happy Coding!

Discussion (6)

Collapse
xiaoeyun profile image
Xiao_e_yun • Edited on

TIPS. nodemon support typescript
npm install --dev ts-node nodemon
then nodemon FILE.ts

Collapse
eichgi profile image
Hiram

I tried the expose thing but after entering the exposed url I always receive this:

This site can’t be reachedThe webpage at sarrty.expose.sh/ might be temporarily down or it may have moved permanently to a new web address.
ERR_INVALID_RESPONSE

any suggestion?

Collapse
robbiecahill profile image
Robbie Cahill Author

Can you copy and paste the command you ran?

Collapse
andrewbaisden profile image
Andrew Baisden

Great tips!

Collapse
vpgcode profile image
Mackan

Thanks so much!!

Collapse
edweird profile image
Edweird

Cool stuff thanks