DEV Community: saroj sasmal

Creating your first NodeJs App

saroj sasmal — Mon, 20 Jun 2022 13:34:51 +0000

Introduction

NodeJs is an open-sourced, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser.

If you're looking for an article that gives you basic understanding of NodeJs application, you are at the right spot.

In this article we are going to take a look at the following things.

NodeJs and Node Package Manager.
A very simple server built using NodeJs.
How to use Express framework

NodeJs is a javascript runtime built on top of Chrome's V8 engine that leverages the option of writing javascript code on server. We can think of runtime as similar to an environment which can be used for executing code written on a specific language.

Before the inception of NodeJs, we could only write server side code using languages like Ruby, C# with .NET or Java.

NodeJs made thing easier for developers so that we don't need to know two different languages any more of building a full-stack application.

One of the cool thing about NodeJs is that, it is asynchronous from the ground up, meaning you never ever wait for anything while making I/O operations.

I/O operations are the operations that deal with the input/output system. Here is a few examples.

Operations with Disk
Interaction with Network(http)
Database Operations

Most of the I/O operations are asynchronous by nature and handled by the Operating system pretty well.

For I/O operations, you don't ever wait for those operations to be completed for performing other operations, all you need to do is just attach a callback function, which is basically a function that can be passed into another function and when the I/O operation is done, whatever we put inside that function, gets executed.

Let's take a closer look at following code to understand the I/O operation.

fs.readFile('users.txt', function(err, result) {
// callback function called when the file is read.
  if(err) {
  // handle the error
  } else {
  // perform some operations with the result
  }
});

// other operations
for(i=0;i<5; i++) {
  console.log("i = ", i);
}

fs.readFile may take a bit of time to read the content of the file based on the file size, but when the file reading operation is done, it simply calls that callback function.

Interesting to notice that while the file is being read, the control does not stop here, rather jumps over to the next line of code which is a for loop in this case and starts executing the code. When the file reading operation is finished, it executes whatever is there inside the callback function. This is what we call asynchronous programming.

Let's start building something real, It completely fine if things don't make sense at this moment, things will more easier to understand as you move forward with developing application from the scratch.

NPM(Node Package Manager)

npm is the package manager for NodeJs.

we can use it to download and use package hosted in the npm registry system. There are tons of libraries hosted on npm. We can add the dependencies from here based on our requirements.

To start off an application, we need to run the command npm init. This initialises the application by creating a package.json file in the root directory of the application.

package.json is a configuration file that store meta data about the application for example author, name of the project, dependencies, script to run and build application etc.

How to install a dependency using NPM.

To search for a specific package, visit npm registry, take a look at the npm module, it's number of weekly downloads and last commit etc. But if you know the name of the package, then most of the time you can simply run npm install.

npm install express

What is express ?

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

Let's try to understand why do we need express in the first place. In order to understand that we need to create an http server using Node.

var http = require('http');

// create a server
http.createServer(function (req, res) {
  // http header
  // 200 - is the OK message
  // to respond with html content, 'Content-Type' should be 'text/html'
  res.writeHead(200, {'Content-Type': 'text/html'});
  res.write('Node.js says hello!'); //write a response to the client
  res.end(); //end the response
}).listen(9000);

So with these 5 lines of code, we were able to create an http server and send text response back to the browser. But it becomes really difficult and hard to maintain the code by ourselves, when we start adding complex features like routes, template engines and middleware etc.

To make this thing little easier for us, we have a web framework i.e, express built on top of NodeJs that packages a few necessary modules together like router, middlewares and have features for error handling and debugging etc.

If this terms doesn't make any sense at this point, don't worry! once you start writing applications using NodeJs, You will have a better understanding of it.

Before you go ahead with the following steps, you need make sure that you have NodeJs installed on your machine. I am using an ubuntu machine and have both of them installed already. But if you have not done that yet, please visit here.

Okay Let's start doing some real coding!!

STEP-1:

Create a directory named 'express-app' somewhere on the computer. You can do it from UI or can use command line for doing the same. I use an Ubuntu machine and love working with command line.

mkdir 'express-app'
cd express-app && npm init

and hit enter till the end, it is going to create package.json file in the root directory.

STEP-2:

Create a file that would act as the starting file for this application, usually people name it, server.js or index.js. Let's call it server.js. Open up server.js file with your favourite editor, we are going to write some code here.

const express = require('express');
const app = express();
const port = 3000;

// this is a route
app.get('/', (req, res) => res.send('Hello World!'));

app.listen(port, () => console.log(`server is listening on port ${port}!`));

So we can run the file with node server.js being on the same directory.

node server.js
But wait! we're getting some error here, which looks something like this.

module.js:549
throw err;
^

Error: Cannot find module 'express'
at Function.Module.\_resolveFilename (module.js:547:15)
at Function.Module.\_load (module.js:474:25)
at Module.require (module.js:596:17)
at require (internal/module.js:11:18)

And the reason for this is that fact that we are using a module i.e, express but we haven't installed it yet into our application. Let's do that now.

npm istall express or npm i express
Now run the server.js file with node server.js command. You will see, that something just got printed onto the console.

Hurrah!!, You just created your first server and if you open up a browser tab and hit this URL http://127.0.0.1:3000 . The browser tab says Hello World.

Isn't that cool :). Just 5 lines of code and your server is up and running.

Now let's add a route that will serve an html file or a template from the server.

// server.js

const express = require('express');
const app = express();
const port = 3000;

// this is a route
app.get('/', (req, res) => res.send('Hello World!'));
app.get('/index', (req, res) => {
  res.sendFile(\_\_dirname + '/index.html');
});

app.listen(port, () => console.log(`server is listening on port ${port}!`));

Let's create an html document called index.html inside the root directory of the project.

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
    Hello Express
</body>
</html>

Now pull up a browser tab and hit http://127.0.0.1:3000/index and there we go, we made it serve an html file from our server.

Now let's try something like sending some dynamic data from server that we can pass in into our view. In order to do that we need to integrate a template engine into our application. A template engine is a module that has its own DSL for writing HTML code and it can be compiled within server and sent back to client.

Here is a list of template engines that really plays well with NodeJs

Jade
Vash
EJS
Mustache
Dust.js
Nunjucks
Handlebars
haml

I like Handlebars the most, because it's syntax is pretty much similar to HTML syntaxes but it's my personal preference, if you feel like other templating engine works best for you, feel free to try it out.

If you want to get some more information on this Handlebars package, please visit here. But be sure you return this to this blog post :).

Okay, with all that said, it's time to do some hack with handlebars, let's try to integrate it with our application.

npm install express-handlebars
We need to make some changes to our server.js file to tell the application that we will use handlebars file as template engine.

// server.js

const express = require('express');
const exphbs = require('express-handlebars');
const app = express();

app.engine('handlebars', exphbs());
app.set('view engine', 'handlebars');

const port = 3000;

// this is a route
app.get('/', (req, res) => res.send('Hello World!'));

app.get('/index', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

// render home.handlebars when /home url is requested
app.get('/home', (req, res) => {
  res.render("home");
});

app.listen(port, () => console.log(`server is listening on port ${port}!`));

So first we included the handlebars package and then specified to use express-handlebars module as the app engine, so that whenever a handlebars file is encountered, the handlebars module to take care of compiling that template. Next we set the view engine to handlebars so that the handlebars engine gets to know that whenever a '.handlebars' extension is encountered, it makes that to go through the handlebar engine.

Towards the end just before app.listen, we added another route that says to render home. This means when a request comes with /home, it will try to find a home.handlebars template and whatever is inside it, it will compile and send that to client. But one thing to remember here, that we need to have a views directory in the root directory.

views
--> layouts
--> main.handlebars
home.handlebars

The main.handlebars is the layout file for our application, well, this is not always necessary but most of the cases, you will need it, so that other pages of your application will inherit styles from it for example sidebar, header etc.

// main.handlebars

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>NodeJs App</title>
</head>
<body> 

</body>
</html>

The home.handlebars just need to contain the content that we want to show when someone visit this page. The content will be injected directly to the body of main.handlebars.

//home.handlebars

<div>
  Home sweet home!!
</div>

Now let's try to pass dynamic data to our view. We need to add the following route to your server.js file.

app.get("/user", (req, res) => {
  res.render("user", { layout: false , user : 'john'});
});

We need to create a user.handlebars file inside the views directory.

//views/user.handlebars
Hi {{ user }}, How are you?.

We are simply passing a variable named user and using the double curly brace syntax to render that inside our view. Please checkout this repo for source code.

I think this is it for this article, I hope this blog post was bit helpful to get some basic understanding of NodeJs and Express. I would really appreciate and love to have your comments, questions on this. Till next time, keep exploring.

Understanding Async Await In Javascript

saroj sasmal — Fri, 21 May 2021 05:42:51 +0000

In this article, we are going to explore async/await which is the go-to tool for every javascript developer for async programming. If you're fairly new to javascript, don't worry, this article will help you understand async/await from the ground up.

Introduction

async/await is a pattern in javascript which makes your code execute in a synchronous fashion but without compromising the async behaviour of javascript.

Defining an Async Function

To define an async function, all you need to do just prepend an async keyword before the function definition.

// async function always returns a promise
async function greet() {
  return "hello";
}

Easy-peasy!😎. Using the async keyword before a function name

makes that function return a promise.
resolves when the function returns.
finally rejects when an error is thrown.

It means you don't need to declare the return Promise.new() each time you want to create a promise.

To prove that an async function returns a promise, we can quickly attach a then block to print its value.

async function greet() {
  return "Hello from an async function"
}
greet().then(message => console.log(message));
//Hello from an async function

Using Await and Executing Async Functions

Isn't cool that we can do then() and catch() on an async function ? But that's not the real power of an async function, an async function's real potential lies in await statements.

await makes the function to be executed in a synchronous way while holding the control in that line until the awaiting method has finished its execution.

async function greet() {
  return "Hello from an async function"
}

async function execute() {
  const message = await greet();
  console.log(message)
}

Here are a few rules of thumb that we need to remember.

👉 await can only be used inside an async function

A function must be declared async if we use the await inside it but not the other way around.

Let me put it in this way. If an await statement is used inside a method, that method must be an async method, else the compiler will yell at us.

async function greet() {
  return "Hello from an async function";
}

function execute() {//this function must be async
  const message = await greet();
  console.log(message)
}
/* 
SyntaxError: await is only valid in async function
*/
~~~{% endraw %}

But declaring a function {% raw %}`async`{% endraw %} doesn't necessarily mean we would always use an {% raw %}`await` inside it. Here `greet()` is an `async` method but we don't have any {% raw %}`await`{% endraw %} statements inside it.


 👉 *await makes sense when the function it is called on, returns a promise or is an async function*{% raw %}


~~~javascript
//not an async function
function greet() {
 return "Hello from an async function";
}

async function execute() {
  const message = await greet();
  console.log(message); //Hello from an async function
}
~~~{% endraw %}

Although the code works exactly the same as the previous one, doing an {% raw %}`await`{% endraw %} on a {% raw %}`synchronous`{% endraw %} function does not make any sense. I would like to know what are your thoughts on this ?🤔🤔.

One important aspect of using await is the fact that it blocks the execution of the next lines of code until the await block is executed.
{% raw %}


```javascript
const asyncGreet = () => new Promise(resolve => setTimeout(resolve, 2000));

(async function execute() {
  console.log("before executing");
  await asyncGreet(); //blocks execution here
  // 👇 executed once await is finished
  console.log("I will be executed after 2000ms");
})();
```
{% endraw %}


Now you must be wondering if *await* makes the code synchronous, why should we use it? NodeJs or browser Javascript are single-threaded environments and execute one task at a time and widely used because of their asynchronous behaviour, which we're losing. So what is the point?

Yes, you're right that but if you observe in most of the cases, we need to perform a task in relation to others.
{% raw %}


```javascript
async function subscribeToNewsLetter() {
  const user  = await findUser(id);
  //👇methods need user email to execute
  await subscribe(user.email)
  await sendNotification(user.email)
}
```
{% endraw %}


That's correct. but what about code that is not related to each other? Well, there is an alternative for that as well i.e. (`Promise.all`).



```javascript
const asyncGreet = (name) =>  new Promise((resolve) => setTimeout(resolve(`Hello ${name}`), 2000));

const names = ['john', 'jane', 'david'];

(async function() {
  const greetingPromises = names.map(name => asyncGreet(name));
  console.log(await Promise.all(greetingPromises));
})();

```


I know the above code is a contrived example, what is important here is that we are using the power of `Promise.all` to execute all the promises 

#### Handling Errors in `Async/Await`.

Dealing with errors is pretty easy with *async/await*, we can use our old friend the *try/catch* block for achieving this.



```javascript
async function subscribeToNewsLetter() {
  try {
    const user  = await findUser(id);
    await subscribe(user.email)
    await sendNotification(user.email)
  } catch(err) {
    //handle error
  }
}
```



There is also another version where we can attach a *catch* handler directly to the *await* block. I don't use it personally but you can give it a try if you want👍.
{% raw %}


```javascript
  await asyncGreet().catch(err => console.log(err);
```
{% endraw %}

####  2x Readability, Easy Debugging

The following code uses a *Promise* to find the user by *id*, assigns the profile information, and then finds the user's subscription.



```javascript
function getUser(id, profile) {
  return new Promise((resolve, reject) => {
    User
      .find(id)
      .then((user) => {
        if(_.isEmpty(user)) return {};
        user.profile = profile;
        return user;
      })
      .then((user) => Subscription.find(user.id))
      .then(subscription => {
        if(_.isEmpty(subscription)) {
          user.subscription = null;
        } else {
          user.subscription = subscription;
        }
        return resolve(user)
      })
      .catch(err => reject(err))
  })
}
```



The above code works perfectly fine, but we could definitely make it more readable, concise, and easier to debug with `async`/`await`. Let's give it a go.
{% raw %}



```javascript
async function getUser(id, profile) {
  try {
    const user = await User.find(id);
    if(_.isEmpty(user)) return {};
    user.profile = profile;
    const subscription = await Subscription.find(user.id);
    user.subscription = subscription
    return user;
  } catch(err) {
    console.log(err);
  }
}
```
{% endraw %}



#### Callbacks and {% raw %}`Async/Await`{% endraw %} are Enemies

As we already saw in our previous example, promises play really well with {% raw %}`async`{% endraw %}/`await`. Any function that returns a promise can be used with `await` statement.

But when it comes to callbacks, it’s totally the opposite, callbacks can’t be directly used with {% raw %}`async`{% endraw %}/`await`, they must be converted to a promise.


let's consider the following function which asynchronously tests if a value is even or not(raise an error).



```javascript
function asyncEven(id, cb){
  setTimeout(() => {
    const even = id%2 === 0;
    if (even) return cb(null, "even");
    else return cb("not even");
  }, 2000);
}
```


We know await is not permissible on callback but still, let's give it a try.
{% raw %}


```javascript
(async function() {
  //🐶👹 Wrong way
  const even = await asyncEven(2);
  console.log("isEven ", even); //undefined
})();

```
{% endraw %}

You must be thinking, that we didn't attach a callback that's the reason it printed {% raw %}`undefined`{% endraw %}.

Let's attach a callback, which is super weird but let's have patience.
{% raw %}

```javascript
(async function() {
  //this is also wrong 🐶👹
  const even = await asyncEven(2, (err, data) => { console.log("inside await on callback", err, data)});
  console.log("isEven ", even);
})();
/*
output:
even  undefined
inside await on callback even null
*/ 
```
{% endraw %}

It seems like the callback was called and we also got values from the asyncEven function. That's correct but still, it is a wrong approach.

`await` has no impact on callback. it similar to doing an await on a synchronous function.

Then why did it return *undefined*? That's a good question. This the default nature of asynchronous programming. The *setTimeout* function is a callback that returns a value via the callback after 2000ms, meanwhile, the control start executing the next line of code, and it reaches the end of the function, that is why we get an *undefined*.

So what is the solution? Pretty simple. Turn the {% raw %}`asyncEven`{% endraw %} function to a promise and use {% raw %}`await`{% endraw %} like a champ.
{% raw %}


```javascript
function asyncEven(id,) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const even = id%2 === 0;
      if (even) return resolve("even");
      else return reject("not even");
    }, 2000);
  })
}

(async function() {
  // waits for the execution
  const even = await asyncEven(2);
  console.log("iseven ", even);
})();

```
{% endraw %}

#### ForEach Does Not Play Well with {% raw %}`Async/Await`{% endraw %}

ForEach loop may have side effects if we use it with {% raw %}`async/await`{% endraw %}. Consider the following example, the {% raw %}`console.log`{% endraw %} statement here doesn't wait for the `await greet(name)`.



```javascript
async function greet(name) {
 return Promise.resolve(`Hello ${name}, how are you ?`);
}

(function() {
  console.log("before printing names");
  const names = ['john', 'jane', 'joe'];
  names.forEach(async (name) => {
   //does not wait here
    console.log(await greet(name));
  });
  console.log("after printing names");
})();
/*
before printing names
after printing names
Hello john, how are you ?
Hello jane, how are you ?
Hello joe, how are you ?
*/
```




#### More Than Just a Syntactic Sugar

So far we only know that `async/await` makes our code more readable, debug friendly and some people say it's a syntactic sugar on javascript promises. In reality, it's more than just a syntactic sugar.



```javascript
// promise
async1()
.then(x => asyncTwo(x))
.then(y => asyncThree(y))
//other statement
console.log("hello")


//async await
x = await async1();
y = await asyncTwo(x);
await asyncThree(y);

```



`await` suspends the execution of current function, while promise continues executing the current function adding the value to the `then()`. There is a significant difference between these two way of executing programs.

Let me explain, consider the promise version, if *asyncTwo()* or *asyncThree()* throws an async error while performing a task, will it include `async1()`in the stack trace ?

Here promise does not suspend the execution of current function, by the time `asyncTwo` resolves or rejects, the context is out of the promise statement. So ideally, it not able to include `asyncOne` in the stack trace . But thanks to V8 engine, it does some magic here, by keeping reference to `asyncOne()` ahead of the time in order to include `asyncOne()` in the context. But this does not come for free. Capturing the stack trace takes time (i.e. degrades performance); storing these stack traces requires memory.

This is where `async/await` beats promises in terms of performance, as the execution of current function is halted until the awaiting function is finished, so we already a have a reference to the function. 

------
*Thanks for reading this article, I hope this post was helpful in understanding the async/await feature of javascript. If you like my article, please show your love by liking this post, this would mean so much to me. Meanwhile you can check out my [article] (https://dev.to/saroj990/mastering-javascript-promises-4kfh) on javascript promises.*

References:
[https://mathiasbynens.be/notes/async-stack-traces](https://mathiasbynens.be/notes/async-stack-traces)

Mastering Javascript Promises

saroj sasmal — Sat, 08 May 2021 10:30:57 +0000

A promise is an object that represents the eventual completion or failure of an asynchronous operation. It simply means that we can write asynchronous code using a promise, just like we do with a callback function but with some ease and most importantly without getting into the trap of callback hell 😉.

What is a Promise?

A promise is a construct to execute code asynchronously, which may be in one of the following states at a given point in time.

Pending:- Initial state, neither fulfilled nor rejected.
Fulfilled:- Successful execution, returns value via then handler.
Rejected:- Failure, can be handled using a catch handler.

return new Promise((resolve, reject) => {
  setTimeout(() => resolve("done"), 1000);
})

The above code uses a setTimeout that resolves the promise with a value "done" in this case in one second.

Consider the following code that fetches GitHub user information using promise.


 function fetchUser(username) {
  fetch('https://api.github.com/users/' + username)
  .then(response => response.json())
  .then( data => {
    const str = JSON.stringify(data, undefined, 2);
    document.getElementById('content').innerHTML = str;
  })
  .catch( error => console.error(error));
}

fetchUser('saroj990');

Initially, promises were not baked into native Javascript(es6 got promise built natively into javascript) rather were available via third-party libraries like Q, BlueBird. So all the libraries that had been developed back in those days probably had used a dedicated separate promise library for achieving asynchronicity.

How to Construct a Promise?

We just need to create a new instance of Promise, which receives resolve and reject as arguments and when we want to return a value, we use resolve and reject is used to reject the promise with an error.


function doAsync() {
  return new Promise((resolve, reject) => {
    const number =  Math.ceil(Math.random() * 10);
    if (number % 2 === 0) {
      setTimeout(() => resolve("even"), 2000);
    } else {
      setTimeout(() => reject("odd"), 2000);
    }
  });
}

We are sort of calculating a random number between 1 to 10. If the number turns out to be an even number, we resolve the promise. If the value is odd, we reject the promise.

Here is how we can execute a promise.

doAsync()
  .then((value) => {
    // success handler
  })
  .catch(err => {
    //log error
  });

When we resolve a promise then the value is received by the then handler and in case of rejection, the error is caught by the catch handler.

Why do we need a Promise?

If you already know this👌👌. But I will keep it short here so that we don't get deviated from our topic.

Promises were introduced to mitigate the problems that emerged by callback hell.

Callback Hell

Callbacks are nothing but functions that can be passed into another function as an argument, and when there are more callbacks nested one inside another, the code becomes really hard to understand.

function getUser(id, profile, callback) {
  User.find(id, function (err, user) {
    if(err) {
      callback(err);
    } else {
      user.profile = profile;
      user.save(function(err, user) {
        if(err) { 
          callback(err)
        } else {
          Subscription.findSubscription(id, function(err, subscription) {
            if(err) {
              callback(err) ;
            } else {
              user.subscription = subscription;
              callback(subscription);
            }
          });
        }
      });
    }
  });
}

The above code looks bad and not expressive at all, the situation becomes really worse when another level of nesting comes into the picture.

Let's re-factor the same code with a promise.

function getUser(id, profile) {
  const currentUser = {};
  return new Promise((resolve, reject) => {
    User
      .find(id)
      .then((user) => {
        currentUser = user;
        currentUser.profile = profile })
      .then(() => Subscription.find(id))
      .then(subscription => {
        currentUser.subscription = subscription;
        return resolve(currentUser)
      })
      .catch(err => reject(err))
  })

}

Now the code looks really neat👌👌. Isn't it ?. So using a promise has an added advantage as it makes your code more readable and easy to understand.

Chaining a Promise

Promise chaining is a pattern where the output of one promise becomes an input for another.

Here is an example where we are kind of trying to book an appointment.


Appointment
.findSlot(time)
.then(slot => BookAnAppointment(slot.id))
.then(appointment => FinishPayment(appointment.id))
.then(payment => getInvoice(payment.id))
.then(invoice => console.log(invoice))
.catch(err => console.log(err));

Parallel executions

There are situations where promises need to be executed independently and have no relation with other promises.

There is a Promise.all construct in Javascript promise that executes promises in parallel for achieving this.

// marks a user in-active
function markInActive(id) {
  return User
  .findById(id)
  .then(user => {
    user.active = false;
    //returns a promise
    return user.save();
  });
}

// collect the promises into an array
const promises = []
for (let i=0; i < ids.length; i++) {
  promises.push(markInActive(ids[i]));
}

//execute them altogether
Promise.all(promises)
.then(result => console.log(result))
.catch(error => console.log(error));

You might be wondering what is the difference between chaining a promise vs parallel execution. Well, let's evaluate it with an example.


function promiseOne() {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve('promiseOne'), 1000);
  })
}

function promiseTwo() {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve('promiseTwo'), 1000);
  })
}

function promiseThree() {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve('promiseThree'), 1000);
  })
}

When the promises are executed in a chain, the second promise starts its execution only when the first promise finishes.

promiseOne()
.then((res1) => { 
  console.log(res1);
  return promiseTwo() 
})
.then((res2) => {
  console.log(res2);
  return promiseThree();
}).then(res3 => {
  console.log(res3);
})
.catch(err => console.log(err));

/*
output
promiseOne
promiseTwo
promiseThree
each promise takes 1sec to execute
effective time: 3sec
*/

Now let's try the same code with Promise.all, parallel execution allows all the promises to run in parallel at the same time.


Promise.all([ promiseOne(), promiseTwo(), promiseThree()])
  .then(result => console.log(result))
  .catch(err => console.log(err));


/*
output: 
[ 'promiseOne', 'promiseTwo', 'promiseThree' ]
all the promises get executed at the same time
so effective time: 1sec
*/

Converting a Callback to a Promise

If you've followed along up to this point, you should know how to convert a callback to a promise. First off, we need to know why do we need to convert a callback to a promise.

There are times where certain library functions don't have their promise variant methods(i doubt almost all libraries ship their promise interface method these days), but you want to use it as a promise.

function saveUser(payload) {
  return new Promise((resolve, reject) => {
    User.save(payload, function(err, user) {
      if(err) return reject(err);
      return resolve(user);
    });
  });
}

The User model save method is a callback method, we just wrapped it inside a new Promise construct with resolve and reject. if an error happens, we reject the promise with error, else we just resolve it with user information.

Error Handling(catch/finally)

Although creating a promise is fun, it will be useless if we don't handle errors that may occur while executing a promise. To achieve this, we have the catch handler at our disposal, which receives the error object as an argument to the handler function.

Here is a sample code that explicitly throws an error and it is handled by the catch block.

new Promise((resolve, reject) => {
  reject("some error happened!");
}).catch(err => console.log(err));

We can also throw an explicit error from the promise and it is exactly the same as above.

new Promise((resolve, reject) => {
  throw new Error("some error occurred!!")
}).catch(err => console.log(err));

A catch handler can handle both synchronous or asynchronous occurred inside a program.

What we just saw in the above example where we deliberately raised an error. Now let's take look at another example where the error is asynchronous.

const prom1 = () => new Promise((resolve, reject) =>  {
  setTimeout(() => {
    //rejects after 2sec
    return reject("rejected prom1 promise");
  }, 2000)
});

new Promise((resolve, reject) => resolve("done"))
  .then(res => prom1())
  .catch(err => console.log(err))

Here the first method prom1 rejects the promise asynchronously(just mimicked with a setTimeout😉).

A then and catch block can be nested one after another like following.


new Promise((resolve, reject) => {
  resolve("done")
}).then(res => {
  console.log("response is : ", res);
  throw new Error("error after the first promise resolved");  // synchronous error
}).catch(err => {
  console.log("error caught in catch handler", err);
  return "You can rest now"; 
//simply pass the value to next level
}).then(res => console.log(res))
.catch(err => console.log(err)); 
// prints "you can rest now"

Usually, people just use one catch block appended to the end of the promise, and whatever error occurs just get caught by the catch handler.

Finally

Another important part of a promise is the finally block, which gets executed no matter a promise is successful or rejected.


new Promise((resolve, reject) => resolve("done"))
.then(res => console.log(res))
.catch(err => console.log("I can catch fish too. :)"))
.finally(() => console.log("I am inevitable, I will always get a chance to execute"))

Let me explain it in a better way with an example so that we can really get the reason behind using a finally block.

isLoading = true;
fetchUser(id)
.then(user => subscribeToNewsLetter(user.id))
.then(response => {
  console.log("subscribed to news letter", response);
  // set loader to false once the user info is retrieved
  isLoading = false;
})
.catch(err => { 
  console.log(err);
  // in case of error
  isLoading = false;
});

We are sort of using a isLoading variable to track when an async operation starts and when it is finished so that we can display a loader and hide it when we get the response.

Needless to say, we are setting the isLoading to false in two different places.

inside the success handler then
inside the error handler. This is because if any error happens we don't want the loader to continue forever. Do you? 😂😂

This implementation works but not efficient and is repetitive. We can handle it better with a finally block.

isLoading = true;
fetchUser(id)
.then(user => subscribeToNewsLetter(user.id))
.then(response => console.log("subscribed to news letter", response))
.catch(err => console.log(err))
.finally(() => isLoading = false);

Finally block gets executed no matter what happens to a promise, so this can be used as a place where we can do some clean-ups and stuff like closing DB, socket connections, etc.

If you have made up this far, congrats!!😁👍. If you feel like that this article has helped you understand Javascript Promises, don't hesitate to show your love by liking this post.

If you feel like something could be improved in the article, please do add a comment. I would really appreciate it.

Understanding VueJs Computed properties and Watchers.

saroj sasmal — Sat, 16 May 2020 17:22:34 +0000

Vue.js is an open-source model–view–viewmodel front end JavaScript framework for building user interfaces and single-page applications. The most interesting point about Vue is that, it's super easy to learn. I've been playing around and doing some projects with Vue lately and thought it might be a good idea to share my experience.

With that being said, if you are pretty new to Vue then I would recommend you to visit the official documentation. But do remember to come back here :).

In this blog post, we are going to take a deep dive into VueJS's computed properties and watchers. We will go beyond the traditional definition and try to build some real world things here. I will be using codepens for most of the examples, so feel free to check them out.

So What is a computed property ?

A computed property is a kind of method that always returns a value. We can mainly use it to derive values from other properties. But that's not the real power of computed properties.

Computed properties are reactive in nature meaning when the values used inside of a computed property changes, it reacts to them and re-evaluates the properties again. Most importantly, computed properties are cached which means it can enhance performance while dealing with complex loops.

So computed property is a function that always returns a value, huh ?. Yup!! It's a method which acts as property. If this sounds confusing, don't worry about it. Let's take a close look at it with an example.

<div>
  <div v-if="commentsAvailable">
    comments are not available for this blog at this moment!
  </div>
  <div v-else>
    // Logic to display comments
  </div>
</div>

new Vue({
  data() {
    return {
      comments: [],
    };
  },
  computed: {
    commentsAvailable() {
      return !_.isEmpty(this.comments);
    },
    totalCount() {
     return this.comments.length;
    }
  },
  methods: {
    async fetchComments() {
      try {
        this.comments = await CommentService.fetchComments();
      } catch (err) {
        this.comments = [];
      }
    },
  },
  created() {
    this.fetchComments();
  },
});

So initially we won't be seeing any comments here as the commentsAvailable evaluates itself to false. we can simply use this computed property to sort of display a loader when there are no comments and when comments are fetched, then the loader becomes hidden and comments are shown.

The commentsAvailable computed can be accessed like a normal property this.commentsAvailable inside a method and commentsAvailable inside template.

One other use case is to compute or derive values from the existing data property. Let's consider the following example, where we have a few cart items as a data property and addToCart() which basically adds an item to the cart items. But that is not the deal here, we are interested in the total price of purchase, i.e.total computed property, which calculates the total price of products added to the cart.

So when the cartItems changes(added/removed), the computed property gets reevaluated and we get updated purchase price.

new Vue({
  data() {
    return {
      cartItems: [],
    };
  },
  computed: {
    total() {
      const totalAmount = this.cartItem.reduce(
        (acc, curr) => acc + curr.price * quantity,
        0
      );
      return totalAmount;
    },
  },
  methods: {
    addToCart(item) {
      this.cartItems.push(item);
    },
  },
});

Computed property must be a synchronous operation!

A computed property must be a synchronous method, we simply can't have a method which perform any async operation like fetching results from DB or making an http request etc.

Let's take another example to understand this in a more better way. Please take a look at this following code, where we are simply displaying a few food items and the macros nutrients present in it.

Initially the table is meant to display only protein and calories for the food items. But when we check the Show All Macro checkbox, it displays all the macros for the food items.

<div class="container-fluid">
  <div class="row align-items-center justify-content-center">
    <label>Show All Macros</label>
    <input
      type="checkbox"
      v-model="showDetailView"
      style="margin-left: 10px;"
    />
  </div>
  <div class="row">
    <div>
      <table id="table" class="table">
        <thead>
          <tr>
            <td v-for="h in tableHeaders" :key="h.value">{{h.text}}</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(row, index) in rows" :key="row.name">
            <td v-for="header in headers">
              {{ row[header.value] }}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

It's important to notice that the tableHeaders and rows are computed properties, not the normal data properties because they are reactive and when the show all macros prop changes, these are re-evaluated and populate the table accordingly.

new Vue({
  el: "#app",
  computed: {
    tableHeaders() {
      if (!this.showDetailView) {
        return this.headers.filter((h) =>
          this.defaultHeaders.includes(h.value)
        );
      } else {
        return this.headers;
      }
    },
    rows() {
      if (this.showDetailView) {
        //console.log("should return all foods", this.foods);
        return this.foods;
      } else {
        let data = this.foods.map((f) => {
          let obj = {};
          this.defaultHeaders.forEach((key) => (obj[key] = f[key]));
          return obj;
        });
        console.log(" data :", data);
        return data;
      }
    },
  },
});

There may be times, when you need a way to track changes of certain properties and perform some operations in relation to that. Watchers are exactly meant for that purpose.

Using watchers, we can watch for changes and perform operations. Unlike computed properties, the method we can use inside a watcher can perform both sync and async operations depending on the requirements.

One example of a using computed property and watcher in a single component would be in building a pagination control.

Now let's consider the following code pen example which extends the previous code pen with pagination feature.

We have a couple of html controls here, first off the select box, which has v-model attached to it, and a watcher watches for changes and the grid reloads data with selected number of rows whenever it changes.

Then we have a few computed properties here as well, pages which calculates total number of pages based on the total number of rows selected from drop down. And finally the totalItems, rangeStart and rangeEnd as text which displays showing 1-10 of 16 text.

I would encourage you to take a look at the following codepen and just play around with the pagination control to get a sense of how the rangeStart and rangeEnd changes dynamically.

I hope this article has helped you give an insight into computed properties and watchers. If you have any questions, feel free to leave a comment . Till next time, stay safe, have fun and keep exploring..