Asynchronous JavaScript

JavaScript is a synchronous, single-threaded language and can therefore only execute one task at a time. But did you know that it's also possible to write asynchronous programs? This asynchronous aspect has significantly developed over the past few years. I'll explain how this works, but first, let's start with the basics: a brief explanation of the role of JavaScript in websites and applications.

What is JavaScript?

A website generally consists of a back-end and a front-end. The back-end is the software running on a server, typically responsible for managing and sharing data, and is invisible to the user. The front-end is the software running in a browser and is visible to the user.

The front-end consists of three languages:

HTML: the structure of the document (text blocks, images, menus, etc.)

CSS: the styling of the document (colors, shadows, spacing, alignment, etc.)

JavaScript: the interaction with the document (responses to user interactions like mouse clicks, keystrokes, and modifying the HTML and CSS)

Although JavaScript was originally developed for front-end software, since 2009, it's also possible to use JavaScript for back-end software through Node.js. You can even use it for embedded software (hardware) with Espruino Node.js. As a result, JavaScript has rapidly risen in popularity. In fact, it is currently the most popular programming language (Stack Overflow, 2018).

JavaScript releases

This popularity has resulted in rapid development of JavaScript and related applications. Browsers can execute JavaScript faster and have more capabilities, such as interacting with peripherals, working with audio and video, and drawing 2D and 3D graphics for games.

In 2009, JavaScript received a major release: ECMAScript 5 (ES5), the first release in ten years. The next significant release (ES6) came in 2015, and since then, there has been an annual release.

Each release brings numerous improvements, with a focus on JavaScript's asynchronous capabilities. As applications grow larger and more complex, they need to remain fast and smooth. If only one task can be active at a time, actions must wait for each other.

A common problem with synchronous code is that fetching or processing data can make the entire UI (user interface) feel jerky or unresponsive. This happens because rendering (drawing the website) and executing JavaScript code run on the same process. When JavaScript is busy, the browser can't render, and vice versa.

This is where asynchronous JavaScript comes into play. Such problems can be avoided by using asynchronous functions. Although JavaScript remains synchronous, it's possible to let the browser handle some of the work without blocking JavaScript execution or rendering. Curious about how this works? Read on!

Callback

In JavaScript, you can pass arguments when calling a function. When it comes to asynchronous functions, this is known as a “callback.” Asynchronous browser APIs all work using callback functions. Callbacks are indispensable for writing asynchronous code, but they can quickly become chaotic, making the code harder to maintain and more prone to errors. This phenomenon is known as “callback hell.”

Promises

With the release of ES6 in 2015, asynchronous code saw significant improvements. A key new feature was the Promise API. Promises allow asynchronous functions to be structured better and make common patterns easier to handle, such as running multiple asynchronous functions in parallel and executing asynchronous functions with dependencies on other asynchronous functions.

Async/await

In the release of ES7 in 2017, another major improvement was made: async/await. This syntax allows asynchronous code to be written in a more synchronous style, effectively solving the callback hell problem. This greatly enhances the syntactic quality of the code, making it much more maintainable.

Developments

The developments in JavaScript had stalled for a while, but in recent years, they have accelerated rapidly. As a developer, it's essential to stay informed about the latest advancements. As you can see, the shift from callbacks to promises and then to async/await is significant. It’s a highly welcome improvement, and it’s a big loss if you don’t dive into it.

In web development, advancements happen quickly, and keeping your knowledge up-to-date is crucial. Developers often complain about supporting older browsers, especially Internet Explorer. Some browsers lag behind in development or are no longer developed at all. For example, Internet Explorer has not received updates since 2013. If you want to continue supporting outdated browsers like Internet Explorer, you might not be able to use the new advancements effectively or at all.

Fortunately, the use of Internet Explorer has declined significantly in recent years, allowing us to focus on browsers that support the latest technologies!

Curious about the future of JavaScript? We’ll keep you updated on the developments.