DEV Community: Abhi Jain

Promise

Abhi Jain — Thu, 09 Jun 2022 21:37:49 +0000

The Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value.

Promise has 3 states:

pending
fulfilled
rejected

A pending promise can either be fulfilled with a value or rejected with a reason (error). When fulfilled happens, then() method is called to handle operation and if rejected happens, catch() method is called to handle operations.

Constructor
The Promise constructor is primarily used to wrap functions that do not already support promises.

const promise = new Promise((resolve, reject) => {
  // your asynchronous task
  // resolve or reject
});

resolve and reject are also functions/ Their signatures are simple: they accept a single parameter of any type.

  resolve(value) // call on resolved
  reject (reason) // call on rejected

The resolve value parameter can be another promise object, in which case the promise gets dynamically inserted into the promise chain.
At the time when the constructor generates the new Promise object, it also generates a corresponding pair of functions for resolve and reject; these are "tethered" to the Promise object.

When called via new, the Promise constructor returns a promise object. The promise object will become "resolved" when either of the functions resolve or reject are invoked. Note that if you call resolve or reject and pass another Promise object as an argument, you can say that it is "resolved", but still cannot be said to be "settled".

Lets see a function that takes a URL and then returns a new promise

function myAsyncFunction(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest()
    xhr.open("GET", url)
    xhr.onload = () => resolve(xhr.responseText)
    xhr.onerror = () => reject(xhr.statusText)
    xhr.send()
  });
}

Consuming a promise

then() method - it accepts two callback functions: onFulfilled and onRejected.
promise.then(onFulfilled,onRejected);
catch() method - If you want to get the error only when the state of the promise is rejected, you can use this
promise.catch(onRejected);
finally() method - It lets you execute the same piece of code whether the promise is fulfilled or rejected.

Example Shown below


const render = () => {
  //...
};

getUsers()
  .then((users) => {
    console.log(users);
  })
  .catch((error) => {
    console.log(error);
  })
  .finally(() => {
    render();
  });

Promises chaining
then() method generates a new promise which can optionally be used for chaining
Example

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('foo');
  }, 300);
});

myPromise
  .then(handleResolvedA, handleRejectedA)
  .then(handleResolvedB, handleRejectedB)
  .then(handleResolvedC, handleRejectedC);

Static Methods

- Promise.all(iterable)
It takes an iterable of promises as input and returns a single Promise that resolves to an array of the results of the input promises.
It resolves after all are resolved or fails as soon as any fails.
Example -

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values);
});

- Promise.allSettled(iterable)
It takes an iterable of promises as input and returns a single Promise that resolves to an array of the results of the input promises.
It resolves after all are settled (i.e. either resolved or rejected).
Example -

const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'foo'));
const promises = [promise1, promise2];

**- Promise.allSettled(promises).**
  then((results) => results.forEach((result) => console.log(result.status)));

- Promise.any(iterable)
As soon as any promise resolves, it returns the value of that promise
Example -

const promise1 = Promise.reject(0);
const promise2 = new Promise((resolve) => setTimeout(resolve, 100, 'quick'));
const promise3 = new Promise((resolve) => setTimeout(resolve, 500, 'slow'));

const promises = [promise1, promise2, promise3];

Promise.any(promises).then((value) => console.log(value));

- Promise.race(iterable)
Wait until any of the promises is fulfilled or rejected.
If the returned promise resolves, it is resolved with the value of the first promise in the iterable that resolved.
If it rejects, it is rejected with the reason from the first promise that was rejected.
Example -

const promise1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 500, 'one');
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'two');
});

Promise.race([promise1, promise2]).then((value) => {
  console.log(value);
  // Both resolve, but promise2 is faster
});

- Promise.reject(reason)
Returns a new Promise object that is rejected with the given reason.

- Promise.resolve(value)
Returns a new Promise object that is resolved with the given value.

Conclusion

A promise is an object that encapsulates the result of an asynchronous operation.

A promise starts in the pending state and ends in either fulfilled state or rejected state.

Use then() method to schedule a callback to be executed when the promise is fulfilled, and catch() method to schedule a callback to be invoked when the promise is rejected.

Place the code that you want to execute in the finally() method whether the promise is fulfilled or rejected.

Event Loop in JavaScript

Abhi Jain — Thu, 09 Jun 2022 20:34:05 +0000

Event Loop is one of the most important concepts in JavaScript.

JavaScript is a single-threaded language which means it has only one call stack. Therefore, it can only do one task at a time.
This vice is a virtue in disguise. As it increased the simplicity to program in JavaScript.

But what about asynchronous behaviour on the Web. Isn't JavaScript synchronous?
Here event loop comes to play. In most browsers, every tab has a separate event loop to avoid heavy processing to block the entire browser.

Ok, but what the heck is an event loop?

The event loop looks something like that shown in the picture below. It has a call stack, a microtask queue, a task queue and Web APIs also have a role to play.
Such an iteration is called a tick in the Event Loop. Each event is just a function callback.

For example - when your JavaScript program makes an Ajax request to fetch some data from the server, you set up the “response” code in a function (the “callback”), and the JS Engine tells the hosting environment:
“Hey, I’m going to suspend execution for now, but whenever you finish with that network request, and you have some data, please call this function back.”

The browser is then set up to listen for the response from the network, and when it has something to return to you, it will schedule the callback function to be executed by inserting it into the event loop.

And what are these Web APIs?
In essence, they are threads that you can’t access, you can just make calls to them. They are the pieces of the browser in which concurrency kicks in.

How setTimeout() works
setTimeout(() => {}), 0) takes callback & timer in millisecond as an argument. It sets up a timer. When timer expires, JavaScript environment places callback to task queue.

Call Stack
This is where all the code is executed. It is a LIFO queue(Last In First Out). The event loop continuously checks for the call stack to see if there is a function to run.

Task Queue
Whenever event loops encounter a Web API like setTimeout(() => {}), 0), It removes it from Call Stack and then sends the callback function after the timer to the task queue. Once the call stack gets empty, the functions in the task queue are sent to the call stack for executing

Microtask Queue
Whenever event loops encounter a promise in call stack, It sends it to the microtask queue. Once the call stack gets empty, the functions in the microtask queue are sent to the call stack for execution. The Microtask queue has more priority than the Task queue. Therefore, the promise gets executed first then functions from Task Queue are allowed in the call stack.

Example -

console.log('Hi');
setTimeout(function cb1() { 
    console.log('cb1');
}, 5000);
console.log('Bye');

Let's execute the code snippet and see what happens

Initially, the call stack, task queue & microtask queue are empty.
Then console.log("Hi") is pushed in the call stack then executed
Then setTimeout(function cb1() { console.log('cb1'); }, 5000); is executed & removed from call stack. The browser creates a timer as part of the Web APIs. It is going to handle the countdown for you.
console.log('Bye') is added to the Call Stack & executed.
After 5000 ms, the timer completes and it pushes the cb1 callback to the Task Queue.
Event loop checks if call stack is empty. Finding the event loop empty, it passes the cb1 callback to call stack.
cb1 is executed.

Conclusion
The event loop is just a guardian who keeps good communication with Call Stack and Callback Queue. It checks if the call stack is free, and then let know the callback queue. Then Callback queue passes the callback function to the Call stack to be executed. When all the callback functions are executed, the call stack is out and the global execution context is free.

All about Web events

Abhi Jain — Thu, 09 Jun 2022 20:32:40 +0000

Events are actions or occurrences that happen in the system you are programming, which the system tells you about so your code can react to them.

JavaScript's interaction with HTML is handled through events that occur when the user or the browser manipulates a page.

Events are a part of the Document Object Model (DOM) and every HTML element contains a set of events which can trigger JavaScript Code.

For example:

loading of a webpage
clicking on the button
hover on some content

Event Listeners
To react to these events, event handlers/listeners are used. A block of code is run when these events are fired.

The best practice for adding an event handler is the addEventListener() method. It can be used in scales with growing complexity in programs.

Event Objects
Look at the code snippet below, Most web developers might encounter the e/evt/event parameter in the function. Yes, this parameter is called the event object. It is automatically passed to event handlers to provide extra features and information.

const btn = document.querySelector('button');

function bgChange(e) {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  e.target.style.backgroundColor = rndCol;
  console.log(e);
}

btn.addEventListener('click', bgChange);

Understanding the Event Flow

Let's find out how an event is propagated in the DOM.

Usually, an event is propagated towards the target element starting from its parents, and then it will propagate back towards its parent element.

Deep Dive Below
There are 3 phases in JavaScript event -

Capture Phase: The event is being propagated from the ancestor toward the parent.
Window>Document>HTMLElement>target's parent
Target Phase: The event has arrived at the target
Bubble Phase: It is the reverse of the capture. It propagates from the target towards the ancestor until the window.
target's parent>HTMLElement>Document>Window

The diagram below will give you a better understanding of event propagation

Lets visualize the event propagation with the help of an example

If you have a button element in the order given below.

Window>Document>DIV2>DIV1>button

Event Capturing

As you can see below, the click event triggered first in Window then Document then Parent then target. Propagation will stop at the target

Events can be registered for the capture phase by passing true in addEventListener, as shown below

window.addEventListener("click", () => {
    console.log('Window');
  },true);

document.addEventListener("click", () => {
    console.log('Document');
  },true);

document.querySelector(".div2").addEventListener("click", () => { 
    console.log('DIV 2');
  },true);

document.querySelector(".div1").addEventListener("click", () => {
    console.log('DIV 1');
  },true);

document.querySelector("button").addEventListener("click", () => {
    console.log('CLICK ME!');
  },true);

Event Bubbling
You can see below, that the click event triggered first at the target and then propagated up till Window.

Events can be registered for the bubbling phase by passing false in addEventListener or don't pass anything as it is the default behaviour, as shown below

window.addEventListener("click", () => {
    console.log('Window');
  });

document.addEventListener("click", () => {
    console.log('Document');
  });

document.querySelector(".div2").addEventListener("click", () => { 
    console.log('DIV 2');
  });

document.querySelector(".div1").addEventListener("click", () => {
    console.log('DIV 1');
  });

document.querySelector("button").addEventListener("click", () => {
    console.log('CLICK ME!');
  });

Now let's see, how to manipulate the phases on different objects to register for both phases

window.addEventListener("click", () => {
    console.log('Window');
  },true); //registered for capturing

document.addEventListener("click", () => {
    console.log('Document');
  }); //registered for bubbling

document.querySelector(".div2").addEventListener("click", () => { 
    console.log('DIV 2');
  }); //registered for bubbling

document.querySelector(".div1").addEventListener("click", () => {
    console.log('DIV 1');
  },true); //registered for capturing

document.querySelector("button").addEventListener("click", () => {
    console.log('CLICK ME!');
  },true); //registered for capturing

Now the event will be triggered in order

Window>DIV1>CLICK ME in the Capture phase then
DIV2>Document in the Bubble phase
Refer to the Gif below for a visualisation

But what if we don't want to propagate event

Event object has a method available on it called stopPropagation(). When invoked on the event handler, stops propagation any further up the chain.

btn.addEventListener('click', e => {
  e.stopPropagation();
});

Event Delegation
When we want some code to run when the user interacts with any one of a large number of child elements, we set the event listener on their parent and have events that happen on them bubble up to their parent rather than having to set the event listener on every child individually.

Lets see an example-

<ul id="container">
  <li id="mobile"></li>
  <li id="cameras"></li>
  <li id="shoes"></li>
  <li id="mobile"></li>
</ul>

In the code above, there's a parent element with id="container" and multiple child elements. Now we want to console.log(id) of child elements on click event.

1st Approach that comes to mind is to addEventListener() on every child but if the list of child elements is too long then an event listener on every element might increase complexity.

const container = document.querySelector('#container');

container.addEventListener('click', (e)=>{
  if(e.target.tagname=="LI"){
    console.log(e.target.id);
  }
});

Another approach could be to add an event listener to the parent container and use event bubbling to listen to the event and trigger the function. See the implementation above.

Conclusion

These concepts can help you to stop any unexpected event from firing. Moreover, it can help in performance optimization and avoid bottlenecks in the application.

Single Page Application

Abhi Jain — Wed, 29 Sep 2021 17:54:18 +0000

A single-page app is the kind of web app that interacts with the user by dynamically rewriting new data from the server on the current page.
The goal of such an application is the faster transition and provide a feel like a native app to the website.

History
The concept of such an application was discussed in early 2003 by a programming student at Cardiff University.

Approach to build SPA
Ajax: It is one of the most famous techniques. It involves an asynchronous request to the server for data. With ajax, the website directly uses javascript or javascript library to manipulate dom.
Web-sockets: For real-time communication, their use is superior to ajax. It is real-time bi-directional communication technology.
Javascript frameworks: A lot of web browser javascript frameworks and libraries have adopted SPA principles. Meteor.js is a full-stack javascript framework designed exclusively for SPA. Some other frameworks and libraries are React, Vue.js, Svelte, Knockout.js, Angular.js, Ember.js, Ext.js etc.

Challenges
Browser History: the model breaks the browser's design for page history navigation using back and forward buttons.
Analytics: Tools such as google analytics rely heavily on new pages loading on the browser. In SPA, after the first page load, all page changes are handled by the application internally. Therefore, analytics fail to record stuff after the page load.

Overview on MVC framework

Abhi Jain — Wed, 29 Sep 2021 16:24:41 +0000

MVC Stands for Model-View-Controller. It is a famous architectural pattern used to build scalable and extensible web applications. It separates an application into 3 components i.e. Model, View and Controller.

The Model
Model component corresponds to all data-related logic that the user works with. It could be business-related data or application-related data.
The View
The Html page which is rendered in the browser is written in this component. As the name suggests, this component deals with the view interface of the user i.e. UI.
The Controller
The controller acts as neurons for view and model components. It takes the request from the user, then manipulates the data through the model, then show the result via view to the user.
Evolution of MVC
It was first introduced by Trygve Reenskaug into Smalltalk-79 while visiting the Xerox Palo Alto Research Center (PARC). Its use in web apps was exploded after the introduction of NeXT web objects in 1996. Later frameworks such as Spring, Django and Rails have increased the popularity outside traditional enterprise environments.
Features of MVC
It is a highly extensible, testable and pluggable framework.
It supports URL routing for SEO friendly URL
There is a clear separation of logic via Model, view and controller components.