JavaScript: Asynchrone Programmierung

Asynchron mit JavaScript

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
JavaScript ist eine Programmiersprache, die externe Vorgänge wie API-Aufrufe asynchron behandelt. Dafür sollte man den Unterschied zwischen normalem, parallelem und asynchronem Programmablauf verstehen.

Transkript

Asynchrone Prinzipien sind mittlerweile der Grundpfeiler der Entwicklung von JavaScript. Anders als viele andere Programmiersprachen, musste JavaScript schon sehr früh auf diese Asynchronität bauen. Falls Sie sich schon immer gefrabt haben, welche Entwicklung Asynchronität innerhalb der Programmiersprache JavaScript über die Jahre hinweg erfahren hat, so möchte ich Ihnen in diesem Video Aufschluss darüber geben. Zunächst einmal sollte man sich mit den Vorbedingungen vertraut machen, die der JavaScript Programmiersprache zugrunde liegen. Als solches wurde JavaScript auschließlich für das Web entwickelt. Und nicht für die zahlreichen Serveranwendungsfälle, so wie es heute bei NodeJS der Fall ist. Das es also ursprünglich für das Web war, und das Web vor allem aus grafischen Elementen bestand, hat man mit JavaScript UI-Manipulationen gesteuert. Da es sich dabei um eine sehr komplizierte Thematik handelt, hat man sich von Anfang an dafür entschieden, dass grafische Änderungen nur auf dem selben Thread stattfinden dürfen wie auch die Applikationslogik. Das ist der Ursprung dafür, dass JavaScript heute Single-Thread basierend ist. Da aber über die Jahre hinweg, sich einige neue Anwendungsfälle aufgetan haben, musste man sich mit dem Prinzip der Asynchronität Möglichkeiten schaffen, beispielsweise externe Ressourcen, wie eine http-API abzurufen. Doch was genau ist nun eigentlich Asynchronität in JavaScript? In diesem Code-Beispiel sehen wir die Variable k. Diese wird also initial mit dem Wert 10 belegt. Danach wird eine Funktion aufgerufen mit der Bezeichnung setTimeout, die jeweils zwei Parameter nimmt. Nach diesem Vorgang wird auf k die Zahl 1 addiert. Womit k nun also 11 ist. Was wir nun in den Parametern der setTimeout Funktion sehen, ist schon die Grundlage von Asynchronität. Das Definieren von sogenannten Callback Funktionen. Mit diesem Aufruf sagen wir effektiv zu dieser setTimeout Funktion: Bitte führe zu einem späteren Zeitpunkt den Code innerhalb unserer Funktion aus. In diesem Fall also die Code Zeile mit dem alert, bei dem nun k ausgegeben wird. Bei diesem Vorgang nimmt uns die JavaScript Runtime einige Probleme ab, indem beispielsweise Variablen, die, wie in diesem Beispiel hier k, außerhalb der Funktion stehen, trotzdem innerhalb unserer Funktion zur Verfügung stehen. Wenn nun also, wie hier angegeben, nach 3 Sekunden der alert mit k gestartet wird, ist der nicht, wie zu erwarten wäre, nach Zeilenreihenfolge 10, sondern k ist tatsächlich 11. Bedingt dadurch, dass durch den Aufruf von setTimeout, diese Funktion immer in den JavaScript Event-Loop gelegt wird, findet diese Funktion immer zu einem späteren Zeitpunkt als der aktuell geradlinig verlaufende Code statt. Das bedeutet auch, wenn ich hier statt 3 Sekunden oder 3000 Millisekunden, 0 Millisekunden angeben würde, bleibt k auf dem Wert 11. Die asynchrone Entwicklung ist dabei ein sehr besonderes Prinzip. Und funktioniert anders als herkömmliche Konzepte der Parallelität. Nehmen wir also beispielsweise an, wir haben einen normalen Applikationsverlauf wie beispielsweise, in einer Java Anwendung. In dem Verlauf haben wir reglurären Code, und möglicherweise, den Download einer Ressource aus dem Internet. Wenn also unser Code verläuft und also, zu einem bestimmten Zeitpunkt, diesen Download startet, so wird der Code unterbrochen, wartet bis der Download beendet ist, und wird dann weitergeführt. Im asynchronen Fall ist der Verlauf estwas anders. Unser Code wird ähnlich ausgeführt, auf nur einem einzelnen Thread, in dem Moment, wo nun der Download beginnen würde, findet tatsächlich nur ein Teil des Downloads statt. Während der Download im Hintergrund, beispielsweise durch das Betriebssystem gesteuert wird, kann unsere Anwendung weiterhin normalen Code ausführen. Erst bei der nächsten Gelegenheit, wo beispielsweise mehr Daten vorliegen, wird wieder Code ausgeführt, der im Zusammenhang mit dem Download steht. Bei einer echt parallelen Anwendung hingegen, haben wir im Normalfall zwei Threads. Das bedeutet auf einem der Threads wird regulär der Code durchgängig ausgeführt. Bei einer Parallelisierung, wird dieser Code nun auf dem zweiten Thread, beispielsweise nun den Prozess des Downloads starten. Sobald dieser Prozess des Downloads abgeschlossen ist, gibt er eine Rückmeldung an den ersten Thread, und damit ist der parallele Vorgang beendet. Da asynchrone Programmierung allerdings äußerst schwierig ist, haben sich die Konzepte innerhalb der JavaScript Programmiersprache über die Jahre hinweg weiterentwickelt. Das ganze hat mit dem regulären Callback begonnen, wie in dem Beispiel der setTimeout Funktion. Um die Nebenbedingungen möglichst gering zu halten, wurde dann das Thunk entwickelt. Die Grundlage der meisten asynchronen Lösungen heute, sind allerdings sogenannte Promises. Denn diese haben zum ersten Mal eine verständliche API für asynchrone Vorgänge bereitgestellt. Mit den aktuellen AgmarScript Standards wie ES2015, kamen die Generatoren dazu. Die zwar unmittelbar nichts mit asynchronem JavaScript zu tun haben, aber als Grundlage dienen für die Async und Await Syntax. Die letztendlich aus Sicht der Weiterentwicklung dieser Konzepte den Optimalzustand darstellt, da sie Asynchronität weitesgehend verbirgt, und damit auch die einhergenden Komplexitäten. Eine Alternative zu diesn Konzepten ist das sogenannte Observable. Am häufigsten werden solche Observables mit den Reactive Extensions verwendet, die Operatoren auf Observables darstellen. Was ist also nun ein Observable? Ähnlich wie bei regulärer Asynchronität, sammelt ein Observable Daten, die erst in der Zukunft bereitgestellt werden. Sogenannte Observer äußern dann ein Interesse an diesen Daten. Sodass mehrere Empfänger gleichzeitig Datensätze erhalten können. Im Gegensatz zu regulärer Asynchronität, bei der lediglich an einer Stelle, auf genau einen Wert gewartet wird. In dem Prozess, bei dem dieses Observable an die Observer diese Objekte überträgt, können sogenannte Operatoren oder auch Reactive Extensions, dazwischen verschiedenste Datentransformationen ausführen. Und dienen so als Abstraktion für Datentransformationen, über asynchrone Datensätze. Sie sollten also verstanden haben, warum Asynchronität heute in JavaScript so wichtig ist. Und wie sich die Konzepte über die Zeit hinweg entwickelt haben, um letztendlich zu dem Punkt zu kommen, wo sie heute sind.

JavaScript: Asynchrone Programmierung

Lernen Sie Lösungen für die komplexe Anwendungsentwicklung kennen, um zeitaufwändige Ressourcenzugriife im Code zu vermeiden.

2 Std. 30 min (19 Videos)
Derzeit sind keine Feedbacks vorhanden...
Software:
Exklusiv für Abo-Kunden
Erscheinungsdatum:22.08.2016

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!