Asynchronous Development Tutorial

This is a lesson from an upcoming course: Introduction to TypeScript Development. You can watch the accompanying lecture here.

No matter your background, the concept of asynchronous behavior in applications can be a challenging topic. Seasoned programmers and new coding students alike can be intimidated by what it takes to work with asynchronous programs. In this guide I will walk through a dead simple explanation of asynchronous development. And by the end of the material hopefully the concept will be easier to understand.

Explanation of Asynchronous Development

Let’s start off with a definition of what asynchronous development means.

What Does Asynchronous Mean?

If you Google asynchronous development you’ll get a long list of convoluted explanations. So I’m going to give you the easiest definition I can think of. Asynchronous development allows for you to run multiple processes at the same time. That’s pretty straightforward, right?

Essentially what takes place in a program that leverages asynchronous behavior is that they have code components that can run in the background.

Asynchronous Programs in the Real World

Let’s examine a practical example of asynchronous behavior in a real world program. Imagine that you have a web app that does not utilize asynchronous processes. Now imagine that you need to render a page with a large database query. When a user accesses the page the header will load and then the screen will freeze while the database query is running. Once the query is complete the program will show the results and then it will render the other page components, such as the footer, sidebar, etc.

In an asynchronous application, if you have a large database query the entire page will load and the results from the database query won’t hold up the rest of the page from loading. From that point, the query data will show up whenever the database query has completed.

Non Blocking Code

Implementing this type of functionality is typically accomplished through runtimes such as Node.js. Node is the traditional tool of choice because it utilizes what’s called non blocking IO (where IO stands for input/output). And thankfully the term non blocking is pretty self descriptive. From a programming point of view it means that a process in one function doesn’t have to block the processes in other functions.

Summary

And that is a dead simple explanation of asynchronous development along with a practical example of how it works in a real world scenario.