DEV Community: Nikita Popov

Three Ways to Make an Async Request in JavaScript: XHR, Promise, Async/Await

Nikita Popov — Sat, 11 Mar 2023 22:10:37 +0000

Asynchronous programming is a crucial part of modern-day JavaScript development. It allows you to make requests to servers, access databases, and manipulate the DOM without blocking the main thread of execution.

The way we develop code in 2023 is very different from how it was done in the 2000s. We now have access to promises, async/await, and the fetch API, whereas back then we were using XHR and callbacks. If you were handed a legacy frontend project, this article can help you understand how it was done in the past so that you can rewrite it into a modern codebase if necessary.

In this article, we will build a simple program that fetches JSON from a URL and prints the result to the console. We will use code patterns from different eras of JavaScript.

The 2005 way: XMLHttpRequest (XHR)

XMLHttpRequest (XHR) is an API in the form of an object that is used to transfer data between the web browser and a server. It is the oldest way to make an asynchronous request in JavaScript. XHR provides a way to make HTTP requests to the server and get responses without having to reload the entire page.

Here is an example of how to make an XHR request:

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);
xhr.onload = function () {
    if (this.status === 200) {
        console.log(JSON.parse(this.responseText));
    } else {
        console.error('Error');
    }
};
xhr.send();

Or maybe you were using jQuery? It was a popular JavaScript library that simplified HTML document traversing, event handling, animating, and Ajax interactions. This is what the same request will look like in jQuery:

$.getJSON('https://jsonplaceholder.typicode.com/todos/1', function(data) {
  console.log(data);
});

The 2015 way: Fetch and promises

Fetch is a newer and more modern technology that replaces XHR, or XMLHttpRequest. It is built directly into modern web browsers, which means that it is easier to use and requires less overhead than XHR. It uses Promises instead of callbacks, which makes it easier to manage asynchronous calls without getting bogged down in complex code.

Promise is an object in JavaScript that represents the eventual completion (or failure) of an asynchronous operation and its resulting value. It allows you to write asynchronous code that is more readable and maintainable by chaining together methods like then() and catch() to handle the result of a Promise.

Here is an example of how to make an async request using Fetch and Promises:

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error(error));

The 2023 way: Async/await

Async/await is a modern way of writing asynchronous code that is built on top of Promises. It allows you to write asynchronous code that looks like synchronous code. Here is an example of how to make an async request using Async/await:

async function getData() {
  try {
    const response = await fetch('<https://example.com/api/data>');
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}
getData();

Note that we have to wrap the code in a getData function as await statement cannot be called in top level code.

Conclusion

We explored three different ways to make asynchronous requests in JavaScript. When possible, avoid using legacy code and instead utilize new language features. However, make sure that the target browsers support these features. You can check caniuse.com if you're unsure.

Thank you for reading! I hope this article has been helpful to you. Happy coding!

Debounce onChange callback using a custom React hook

Nikita Popov — Sat, 11 Feb 2023 12:52:34 +0000

Intro

Let's say you have a search component with a suggest. Suggest items are fetched as you type. You don't want to fetch items on every keystroke, you want to fetch when the user stops typing. How to do this? You probably want to use a technique called 'debouncing'.

What is debouncing?

Debouncing is a technique to limit the rate at which a function is being called. It is commonly used to improve performance and user experience when working with events that trigger rapid function calls.

One common example of when debouncing is needed is when dealing with user inputs, such as typing in a search field. If you were to make a server request for every character that the user types, it could lead to a large number of unnecessary requests and slow down the app.

In this article I will explain how to reduce number of network requests using debouncing. We'll also extract debouncing logic into a custom React hook which can be reused.

Example

Let's take a look at a practical example. Below there's a form for searching a movie by its name. Movie names are fetched from server (in this example we'll be using a mock instead of a real server, but it doesn't make much difference). Try searching 'godfather' in the input below, notice the output in the console:

As you see, the app is making a server request after each keystroke:

Let's see how we can improve this!

Step 1: add `setTimeout`

Let's take a look at our Input component. Currently it renders the value provided by it's parent component, and calls onChange every time user changes the value:

function Input({ value, onChange }) {
  return <input value={value} onChange={(e) => onChange(e.target.value)} />;
}

We don't want to call onChange instantly, let's try to wrap it in a setTimeout:

function Input({ value, onChange }) {
  // This callback calls 'onChange' after a timeout
  const debouncedOnChange = (val) => {
    setTimeout(() => onChange(val), 1000);
  };

  return (
    <input value={value} onChange={(e) => debouncedOnChange(e.target.value)} />
  );
}

Give it a try:

This clearly adds a delay, but doesn't work as expected! Notice how user input is delayed. Looks like onChange should be called with a delay, but input value should update instantly, without an delay. How can we achieve this?

Step 2: add local state

We can add local state to our component to store current user input. We'll update local state instantly, and call onChange with a delay. Here's what it might look like:

function Input({ value, onChange }) {
  // Store user input in local state. Initial value is provided by parent component
  const [localValue, setLocalValue] = useState(value);

  const debouncedOnChange = (val) => {
    // Set local value instantly
    setLocalValue(val);

    // Set parent value after a delay
    setTimeout(() => onChange(val), 1000);
  };

  return (
    <input value={localValue} onChange={(e) => debouncedOnChange(e.target.value)} />
  );
}

It works great! But looks like it still makes a network request on every key stroke, just the requests are delayed now. Let's fix this!

Step 3: add clearTimeout

If user changes input during the timeout, we want to cancel scheduled onChange call and schedule another one, with a new input value. Each time we call setTimeout, it returns a unique number called timeout id. We can pass this number to clearTimeout to cancel the scheduled timeout and then schedule a new one. To store timeout id we can use useRef hook. Here's what it can look like:

function Input({ value, onChange }) {
  const [localValue, setLocalValue] = useState(value);

  // Stores reference to timeout id
  const timeoutRef = useRef(null);

  const debouncedOnChange = (val) => {
    // Clear timeout if there was one pending
    if (timeoutRef.current) {
      clearTimeout(timeoutRef.current);
    }

    // Set local value instantly
    setLocalValue(val);

    // Schedule `onChange` call and store timeout id in the ref
    timeoutRef.current = setTimeout(() => onChange(val), 1000);
  };

  return (
    <input
      value={localValue}
      onChange={(e) => debouncedOnChange(e.target.value)}
    />
  );
}

Brilliant! It does the job!

Step 5: extracting to a custom hook

Notice how bloated Input component has become. Let's extract debounce related logic to a custom hook. This way our component code will be shorter and easier to maintain, and debounce logic can be reused. Here's what it might look like:

// This custom hook can transform any callback to a debounced version
function useDebounce(onChange, duration) {
  const timeoutRef = useRef(null);
  const onEdit = useCallback(
    (val) => {
      if (timeoutRef.current) {
        clearTimeout(timeoutRef.current);
      }
      timeoutRef.current = setTimeout(() => onChange(val), duration);
    },
    [duration, onChange]
  );
  return onEdit;
}

function Input({ value, onChange }) {
  const [text, setText] = useState(value);
  // Custom hook accepts two arguments: original onChange callback, and debounce delay. Its return value is a new, debounced callback
  const debouncedOnChange = useDebounce(onChange, 1000);
  const onEdit = (val) => {
    setText(val);
    debouncedOnChange(val);
  };
  return <input value={text} onChange={(e) => onEdit(e.target.value)} />;
}

Here you can play around with the final version

Conclusion

We have introduced debouncing to our component to limit number of network requests. We've 'packed' debounce code into a custom hook, so that it can be reused elsewhere.

Thank you for following my tutorial!

Cover photo by Wengang Zhai on Unsplash

Project tracker in Google Spreadsheet

Nikita Popov — Wed, 04 Jan 2023 15:36:43 +0000

Intro

Hey, how is it going? I'm an engineer in a tech company. We've recently finished a project involving 4 engineers for 4 months. To track our progress we were using a custom project tracker in Google Spreadsheet. It worked great for us, so I want to share how the tracker works and what problems it helped us solve. Maybe you can use a similar approach in your next project.

What problem we were solving

We were looking for a project tracking tool which would

Let us plan work for a few engineers over multiple weeks, taking multiple external events into consideration (days off, oncall, code freeze, other projects) and allow balancing work load between engineers.
Let us see project status at a glance. It should be easy to answer questions like ‘who is working on workstream X?’, ‘are we on track?’, ‘what have we completed in last few weeks?’, ‘when will we deliver feature X?’, ‘when do we plan to be code complete/in QA/launch?’.
Be flexible enough to support ad-hoc manipulations, e.g. sort tasks, assign priorities, hide tasks or dates, highlight a date, highlight risky tasks, optional tasks etc.
Be efficient in bulk operations. It should be easy to reassign multiple tasks, adjust estimation or start/end date, split task into subtasks.

Flexibility is probably the requirement which is hardest to achieve. Ideally we wanted a tool which was closer to a whiteboard, rather than to a traditional project tracker. That's why we didn't go with Asana or MS Project or similar tools.

A spreadsheet sits nicely in the middle on this axis, so we took it and have built a custom solution on top of it.

Our tracker

The tracker fits one spreadsheet:

It has four areas:

Let’s take a closer look at them.

Tasks

Each row represents a task. A task has a name and a description, an estimation in weeks, and an owner. Owner is indicated by the initials (for example NP for Nikita Popov). Tasks are grouped into workstreams, an arbitrary way to group tasks which helps collocate similar tasks together.

Timeline

One cell in the timeline represents one week. Vertical red line indicates the current week. If an engineer is working on a task during a week, we put their initials into the corresponding cell. For example, in the first row an engineer named B.O. is working on a task estimated at 4 weeks, and he is 3 weeks into it:

Workload

The numbers in green show how many tasks an engineer is working on during each week. These values are calculated automatically: the formula basically counts how many times each engineer initials appear within current week’s column. It can be 0 if an engineer is working on a different project or is on holidays. Ideally the workload should be 0.5 or 1. If you plan 2 full-week tasks for the same engineer, the cell turns red:

Progress

For every week we can calculate project completion progress. We assume that all tasks in the past are complete, otherwise we’d extend or move move them to a time slot in the future. Thus, to estimate progress percentage we can just divide the number of eng weeks before the current moment (to the left on the timeline) by total eng weeks:

This is better than just counting number of complete tasks because the formula takes task size (in weeks) into consideration.

In this section we also indicate holidays, milestones, release phases (QA, launch), team events (e.g. offsites).

How we used the tracker

On Tuesdays we were having engineering syncs where we’d look at the timeline together and check if we’re following the plan. If a task took longer than planned, we would extend it by 1/2 week or 1 week on the timeline, and then check if the workload for the engineer hasn’t exceeded 1. If it was above 1, the we had to push other tasks or pass to a different engineer, or deprioritise a task, or communicate delay for the launch date.

On Thursdays we were having syncs with a broader group of stakeholders. In those meetings we were sharing project status: whether we are on track or not, and project completion %.

Pros and cons

Using a custom tracker task tracker like this one comes with a few downsides compared to a specialised tool. But we believe the benefits are worth it. Let’s take a look at the pros and cons.

🔴 No integration with existing tools (Tasks, Diffs)

A task is just a line in a spreadsheet, it doesn’t have a task number, it cannot be linked to a diff. For some projects it may be a problem. We normally use tasks tool, but typically a task only has a name and brief description. There’s no discussion in the comments, it usually happens offline. If you actually don’t use tasks for collaboration, our tracker might work for you as well.

🔴 Manually updating task status

If you want to mark task as completed, you should color the cell. If you want to pass task to a new owner, or reschedule tasks, you have to edit the cells in the spreadsheet. There’s a possibility that you make a mistake. I made mistakes a few times, e.g. I moved eng weeks on the timeline to the wrong row. It turned out that these errors are easy to spot and fix once we got to task implementation. Spreadsheet editing history can be helpful.

🔴 Need to learn the conventions

Such as how we indicate task status, or how to read completion %. In our team we had one PoC who was keeping the tracker updated (me). It wasn’t hard, and it took ~10mins a week during Eng syncs.

🟢 Everybody already knows how to use it

Because everybody knows Excel. The tracker is just a google spreadsheet, it doesn’t use any scripts and the formulas are basic. Everybody already knows how to use it, how to color a cell and change the contents. It’s only a matter of learning the conventions.

🟢 Customisation possibilities

You can tailor the tracker to your project needs. You want to add task priority? No problem, just add a column:

We have actually added this column right in the middle of a meeting with stakeholders where we decided to prioritise a few features over others.

It only takes a minute to add a field to your tasks. Custom columns work well with conditional formatting (spreadsheet can set cell color based on the contents, e.g. if value = ‘High’ then set color to red) and filtering.

Or let’s say you want to hide completed tasks or weeks that passed already. No problem, just hide those rows or columns.

You want to highlight risky tasks, or tasks with dependencies on other teams? No worries, spreadsheet’s color palette is at your disposal:

🟢 Productivity

If you need to set a field for many tasks (e.g. PoC or priority), just use the magic corner. It’s fast and everybody knows how to do this. Same for timeline: if you need to extend your project by a few weeks, just extend calendar to the right.

Outcome

The tracker helped us greatly, it was easy to track project status both within engineering team and with a wider group of XFNs. It also helped us take action early: when we realised we won't be able to complete the project with current scope before code freeze, so we had to re-prioritise a few parts.
Please share your thoughts
Do you think this can work for your project? Do you know a better way? What tracker are you using? Please share in the comments!

Link to tracker template:
https://docs.google.com/spreadsheets/d/1wvjITX06ceToX1dFNpx0iYasUEiQd4mqXJ3f_RerzDI/edit?usp=sharing

P.S.: More automation with Apps Script

In our tracker we had to update current week indication (red vertical line) manually. It can be automated, a script will be just a few lines. Here’s an example of a similar script which I used for my personal project, can be an inspiration:

Automating Google Spreadsheets with a script turned out to be straightforward, script are written in JavaScript (not Visual Basic fortunately). It opens possibilities for automating more flows.

DEV Community: Nikita Popov

Three Ways to Make an Async Request in JavaScript: XHR, Promise, Async/Await

The 2005 way: XMLHttpRequest (XHR)

The 2015 way: Fetch and promises

The 2023 way: Async/await

Conclusion

Debounce onChange callback using a custom React hook

Intro

What is debouncing?

Example

Step 1: add setTimeout

Step 2: add local state

Step 3: add clearTimeout

Step 5: extracting to a custom hook

Conclusion

Project tracker in Google Spreadsheet

Intro

What problem we were solving

Our tracker

Tasks

Timeline

Workload

Progress

How we used the tracker

Pros and cons

🔴 No integration with existing tools (Tasks, Diffs)

🔴 Manually updating task status

🔴 Need to learn the conventions

🟢 Everybody already knows how to use it

🟢 Customisation possibilities

🟢 Productivity

Outcome

P.S.: More automation with Apps Script

Step 1: add `setTimeout`