Asynchronous JavaScript

JavaScript is een synchrone, single-threaded taal en kan dus maar één taak tegelijk uitvoeren. Maar, wist je dat het ook mogelijk is om asynchrone programma’s te schrijven? En dat juist dit asynchrone aspect de afgelopen jaren flink ontwikkeld is? Hoe dit werkt leg ik zo uit, laten we eerst beginnen met de basis: een korte uitleg over de rol van JavaScript in websites en applicaties.

Wat is JavaScript?

Een website bestaat over het algemeen uit een back-end en een front-end. De back-end is de software die draait op een server, deze is meestal verantwoordelijk voor het beheren en delen van data en is onzichtbaar voor een gebruiker. De front-end is de software die draait in een browser en dus zichtbaar is voor een gebruiker.

De front-end bestaat uit drie talen:
- HTML: de structuur van het document (tekstblokken, afbeeldingen, menu’s, etc.)
- CSS: de opmaak van het document (kleuren, schaduwen, ruimte, uitlijning, etc.)
- JavaScript: de interactie met het document (reacties op gebruikersinteracties zoals muisklik, toetsaanslag, het muteren van de HTML en CSS)

Hoewel JavaScript van origine is ontwikkeld voor front-end software is het sinds 2009 ook mogelijk om JavaScript te gebruiken voor back-end software, dit kan door middel van Node.js. En zelfs voor embedded software (hardware) kun je het gebruiken, dit kan door middel van Espruino Node.js. Hierdoor is JavaScript snel in populariteit gestegen. Momenteel is het zelfs de populairste programmeertaal (Stack Overflow, 2018).

Orange Juice Development

JavaScript releases

Deze populariteit heeft geresulteerd in een erg snelle ontwikkeling van JavaScript en de aan JavaScript gerelateerde toepassingen. Browsers kunnen JavaScript steeds sneller uitvoeren en krijgen steeds meer mogelijkheden, zoals het interacteren met randapparatuur, het werken met audio en beeld en het 2D en 3D tekenen voor bijvoorbeeld games.

JavaScript heeft in 2009 een grote release gekregen: ECMAScript 5 (ES5). Dit was de eerste release in tien jaar. In 2015 kwam de volgende grote release (ES6), vanaf dat moment is er jaarlijks een release geweest.

In iedere release worden er veel verbeteringen doorgevoerd, een deel van deze verbeteringen is gericht op het asynchrone aspect van JavaScript. Dit is in deze moderne wereld namelijk onmisbaar geworden. De applicaties worden steeds groter en complexer en ze moeten snel en vloeiend blijven werken. Als er maar één taak tegelijk actief kan zijn betekent dit dat acties op elkaar moeten wachten.

Een veelvoorkomend probleem bij synchrone code is dat het ophalen of verwerken van data ervoor kan zorgen dat de hele UI (user interface) schokkerig aanvoelt of zelfs helemaal stopt met reageren. Dit komt doordat het renderen (het tekenen van de website) en het uitvoeren van JavaScript code op hetzelfde proces draaien. Wanneer JavaScript bezig is kan de browser dus niet renderen, en vice versa.

En dit is waar asynchrone JavaScript om de hoek komt kijken. Zulke problemen zijn namelijk te voorkomen door gebruik te maken van asynchrone functies. Hoewel JavaScript synchroon blijft is het op deze manier wel mogelijk om de browser een deel van het werk te laten uitvoeren zonder dat het de uitvoer van JavaScript of het renderen blokkeert. Benieuwd hoe dit precies werkt? Lees dan verder!

Callback

In JavaScript kun je argumenten meegeven bij het aanroepen van een functie. Als we het hebben over asynchrone functies, dan noemen we dit een “callback”. Asynchrone browser API’s werken allemaal door middel van callback functies. De callback functies zijn onmisbaar bij het schrijven van asynchrone code. Het probleem is alleen dat werken met callback functies al snel chaotisch wordt waardoor de code minder goed te onderhouden is en er sneller fouten optreden. Dit fenomeen wordt ook wel de “callback hell” genoemd.

Javascript Blog 1

Promises

Met de release van ES6 in 2015 is er veel verbeterd met betrekking tot asynchrone code. Een belangrijk nieuw onderdeel is de Promise API. Met Promises kunnen asynchrone functies beter gestructureerd worden en zijn veelgebruikte patronen makkelijk aan te pakken. Denk hierbij bijvoorbeeld aan het parallel uitvoeren van meerdere asynchrone functies en het uitvoeren van asynchrone functies met afhankelijkheden van andere asynchrone functies.

Javascript Blog 3

Async/await

Daarna is er met de release van ES7 in 2017 weer een grote verbeterslag gemaakt: de async/await. Dit is een syntax waarmee asynchrone code in een meer synchrone stijl geschreven kan worden. Hiermee is de callback hell eindelijk écht opgelost. Dit heeft een grote impact op de syntactische kwaliteit van de code en dus ook in hoeverre de code goed te onderhouden is.

Jaascript Blog 4

Ontwikkelingen

De ontwikkelingen op het gebied van JavaScript hebben een tijdje stilgestaan, maar de laatste jaren volgen ze elkaar in een hoog tempo op. Het is als ontwikkelaar belangrijk om continu op de hoogte te zijn van de nieuwste ontwikkelingen. Zoals je ziet is de verandering van callbacks naar promises en daarna naar async/await groot. Het is een zeer welkome verbetering, dus het is een groot gemis als je je hier niet in verdiept.

Op het gebied van web development gaan de ontwikkelingen razendsnel en het is van groot belang om je kennis bij te houden. Vaak hoor je ontwikkelaars klagen over het ondersteunen van oudere browsers, met name Internet Explorer. Sommige browsers lopen erg achter op de ontwikkelingen of worden zelfs helemaal niet meer ontwikkeld. Internet Explorer bijvoorbeeld, heeft sinds 2013 geen updates meer gekregen. Wil je verouderde browsers zoals Internet Explorer blijven ondersteunen, dan kunnen de nieuwe ontwikkelingen slecht of helemaal niet gebruikt worden.

Maar, aangezien het gebruik van Internet Explorer de laatste jaren flink is afgenomen hoeven we ons hier gelukkig steeds minder zorgen om te maken, en kunnen we focussen op browsers die de nieuwste technieken wel ondersteunen!

Benieuwd hoe de toekomst van JavaScript eruitziet? We houden je op de hoogte van de ontwikkelingen.