As I promise, I will explain to you the difference between Webhooks and API. As I have mentioned yesterday, API’s have 2 types, either it is a built-in API that comes straight out of the box for you, or the defined API’s which is declared by you.

Webhook is different, think of it like a gun trigger that triggers in some specific events, just like when I’m typing, when I press a key somewhat somewhere a function is triggered to send the key that I pressed to the monitor.

To give you a concrete example of a declared/defined API, here’s a gist in the web-app that I currently working on. In the Front-End side of this is an email-modal that is popped up that requires you to send an email to somebody. So when the send button is clicked, it’ll send and email and gives back a result which says success.

Sends back a modal that says success an email is sent!

However, you might be wondering what happens behind the back? The Back-End side of this.

Function that handles the particular event and calls the video.sendEmail API in the server.js

Here’s the function that handles the event when the button Send is clicked. It runs a declared function called video.sendEmail in the server and executes it and passing some parameters that will be required, it then waits for the response in the result object as you can see in line 5, it checks if the result.status is true or not, if its true? then it closes the current modal and displays the success, however if not show an alert of the details of the error.

Now, in the server.js the declared API looks like this

Declared API in the server.js that will be called and will do send an email to the email passed in the parameters.

Don’t worry about the other part of the code. The most important part there is in line 1 we are defining a function named video.SendEmail that will be called anywhere in the other file and it’ll execute the code under it. Now when the video.SendEmail function is called it requires some parameters in order to work since you’ll be needing some emails from where you will send to.

The question now is how do you get the email?

As others may already know, but for those who might read this and don’t have any idea how to get the email, you’ll get the email by accessing the request object. Remember? You passed some parameters when you call this API then definitely you must and will able to access them in this block of code. When you try to do console.log(request) it’ll return tons of result just like this:

When you try to console.log the result, in my terminal it’ll look like these.

Now, don’t be overwhelmed with the result that just popped out in your terminal, the result is just a nested objects, the most important part there is the params since it is the part where you passed the data over to the video.sendEmail and you’ll have to access like how you normally access objects with JavaScript.

You can do either the var.ObjectName known as the dot notation or you can do the var[‘objectName’] notation, array one they called.

Now that you know how to retrieve the params in the request you can use any mailer APIs in npm, here I am using express-mailer, any other mailer API can do. Once the mail is sent it’ll return something in my terminal since I did some console.logs in the server.js file that tells that the email is successfully sent!

In my terminal there’s a log there that shows that my email is successfully sent!

Now that you know about declared APIs what about webhooks?

So for webhooks as I have said earlier, it automatically triggers for specific events, maybe beforeSave or afterSave of some data you want something to happen or to filter literally many things you can do about it! The difference is that webhooks you don’t have to call them, you just define it to your server file and it automatically triggers without calling it. Without further a do i’ll give you an example.

So, let’s say that you are creating an event app and whenever there’s a new event added in your application you want to send a push notifications to the participants knowing that you’ve added them to the app. That can be a specific example on when to use webhooks, the code for that will look something like this.

That’s it! To wrap it up, remember that APIs you have to define and call them or you just call them, if its a built-in API then you call it if you will create your own API then you declare it then call it! Now webhooks are just defined it automatically triggers with specific events, you don’t have to call them they just triggers naturally!

Written by

Crazy about Computer Science. Trying to improve in Mathematics. Nerd. INTP. MERN Stack. Rachelle’s.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade