Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

t3n 45

Javascript mit Struktur: Patterns für performante Anwendungen

    Javascript mit Struktur: Patterns für performante Anwendungen
(Bild: Shutterstock / REDPIXEL.PL)

Javascript ist längst mehr als eine lose Sammlung von Funktionen, sondern eine der dynamischsten Programmiersprachen, die es derzeit gibt. Doch wie bringen Entwickler Struktur in ihre Anwendungen und machen sie performant und modular?

Javascript verändert sich rasant: Für kaum eine andere Programmiersprache entstehen so schnell so viele Frameworks und Bibliotheken. Die Kehrseite ist jedoch, dass sie genauso schnell wieder verschwinden wie sie gekommen sind. Doch nicht nur das Javascript-Ökosystem verändert sich ständig, auch der Sprachkern entwickelt sich kontinuierlich weiter – und damit die Art der modernen Entwicklung von Web-Applikationen.

Die gute Nachricht für Entwickler ist, dass die neuen Funktionen die Arbeit mit Javascript erheblich erleichtern und potenziell weniger Quellcode notwendig ist. Außerdem sind die Strukturen der Applikationen klarer und besser lesbar und die Ausführung durch die Implementierung der Funktionen im Browser etwas performanter.

Javascript selbst erzwingt keine Konventionen. Die Sprache lädt eher dazu ein, recht lose strukturiert zu entwickeln. Um die Möglichkeiten von Javascript voll auszuschöpfen, lohnt es sich jedoch, den Quellcode immer gleich zu strukturieren. Das bedeutet, dass Entwickler entsprechende Konventionen einführen, wie bereits einige Best-Practice-Beispiele vorführen.

Klassen und Prototypen

Javascript verfolgt einen prototypenbasierten Ansatz, im Gegensatz zu klassenbasierten Sprachen wie Java. Die Dynamik, die dadurch entsteht, bezahlen Programmierer an anderer Stelle, beispielsweise durch eine umständliche Umsetzung von Vererbungen. Der ECMAScript-2015-Standard lässt erstmals Klassen in Javascript zu, sodass man in allen gängigen Browsern auf das class-Schlüsselwort zurückgreifen kann. Dass diese Klassen nach wie vor auf einem Prototypen-Konstrukt basieren, zeigt sich zum Beispiel daran, dass sich Eigenschaften nicht direkt in der Klasse definieren lassen, sondern nur in Objekten über den Konstruktor.

Javascript-Entwickler sind das schon gewohnt: Eigenschaften definieren sie im Konstruktor, Methoden im Prototyp. Mit der neuen Klassensyntax gibt es aber auch eine verkürzte Schreibweise, bei der Entwickler das function-Schlüsselwort einfach weglassen und statische sowie getter- und setter-Methoden für Eigenschaften definieren können.

Eine der wichtigsten Funktionen verbirgt sich hinter dem extends-Schlüsselwort. Damit lassen sich sehr einfach Vererbungen zwischen Klassen implementieren. Das untere Listing zeigt ein einfaches Beispiel einer Klasse in Javascript.

Bisher benutzte Features bleiben erhalten, sodass sich Prototypen einer Klasse zur Laufzeit verändern lassen. Programmierer können neue Klassen von einer bestehenden Konstruktor-Funktion ableiten, diese erben dann alle Methoden des Prototyps.

Der Einsatz von Klassen kann zudem die Performance verbessern: Viele Javascript-Engines optimieren den Programmablauf für Objekte des gleichen Typs. So verfügt die V8-Engine von Google über eine Funktion, die sich „Hidden Classes“ nennt und einen schnelleren Zugriff auf die Eigenschaften eines Objekts erlaubt. Für Objekte des gleichen Typs, also mit gemeinsamem Konstruktor, kommen die gleichen Hidden Classes zur Anwendung, was die Performance verbessert. Mit anderen Worten: Es spricht sehr viel für den Einsatz von Klassen in Javascript.

Listing: Klassen in Javascript

class User {
constructor(name, age) {
this.name = name;
this.age = age;
}

toString() { return `${this.name} (${this.age})`; } }

Module

Doch nutzen Javascript-Klassen praktisch nichts, wenn Entwickler sie in einer großen Datei speichern. Die Applikation ist und bleibt dann unübersichtlich. Javascript-Module lösen dieses Problem. Mit ihnen können Entwickler die Funktionen ihrer Anwendungen in in sich geschlossenen Bausteinen ordnen, die mit den übrigen Teilen der Applikation nur lose gekoppelt sind.

Ein solches Modul liegt in einer eigenen Datei im Dateisystem. Das Modulsystem der Applikation lädt dieses nur, wenn es tatsächlich nötig ist. Abhängigkeiten zu anderen Modulen lösen sich automatisch auf. Eine so aufgebaute Applikation ist übersichtlich, lässt sich leichter warten und ist flexibler, weil Entwickler die einzelnen Module bei Bedarf einfach austauschen können.

Sebastian Springer
Sebastian Springer

ist als JavaScript Engineer bei MaibornWolff tätig. Neben der Entwicklung und Konzeption von Applikationen liegt sein Fokus auf der Vermittlung von Wissen. Als Dozent für JavaScript, Sprecher auf zahlreichen Konferenzen und Autor versucht er die Begeisterung für professionelle Entwicklung mit JavaScript zu wecken.

Finde einen Job, den du liebst

Eine Reaktion
Thomas
Thomas

Vielen Dank für den (eher) generellen Überblick. Mehr von solchen Artikeln!

Antworten
Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden