© saicle/Shutterstock.com
ECMAScript 6 - Harmony

In Harmonie vereint


Viele Entwickler, die ich kenne, fiebern neuen Softwarereleases entgegen. Es spielt dabei keine Rolle, ob es sich dabei um die neueste Version der Entwicklungsumgebung, eines Frameworks oder eines Sprachstandards handelt. Und so freuen wir uns nun auch auf die neueste Version von JavaScript. Aber warum jetzt genau? Was bietet diese neue, sechste Version des Standards, auf die Sie als Entwickler nicht länger verzichten können, und was davon sollten Sie unbedingt ausprobieren?

Um eines vorweg zu nehmen: Die Welt wird sich auch nach ECMAScript 6 weiterdrehen und die alltäglichen Problemstellungen, mit denen Sie bei der Entwicklung von JavaScript-Applikationen konfrontiert sind, werden nach wie vor bestehen. Der neue Sprachstandard [1] macht Ihnen als Entwickler allerdings das Leben um ein kleines Stück einfacher und integriert eine Vielzahl von Features, in deren Genuss Sie bisher nur über die Einbindung von Bibliotheken gekommen sind. Aber eins nach dem anderen. Bevor Sie beginnen, Ihre Applikation auf Basis von ECMAScript 6 zu entwickeln, sollten Sie wissen, wie Sie an die neuen Features kommen und was die Kehrseite der Medaille ist.

Wie komme ich an die neuen Features?

Wie immer, wenn die perfekte Traumwelt auf die bittere Realität trifft, ist es auch bei ECMAScript 6 so, dass Sie nicht einfach loslegen und auf den gesamten Funktionsumfang des Standards zugreifen können. Sie als JavaScript-Entwickler sind es bereits seit Jahren gewohnt, mit unzureichender Unterstützung der Sprachfeatures in den verschiedenen Browsern zu kämpfen – und auch mit der neuen Version von JavaScript ändert sich an dieser Situation nichts. Die älteren Versionen der Browser unterstützen ECMAScript 6 entweder überhaupt nicht oder nur unzureichend. Aber auch in den neuesten Versionen der Browser ist der Standard noch nicht vollständig angekommen. An vorderster Front kämpfen die Entwickler von Firefox. Der Browser von Mozilla verfügt aktuell über eine der besten Unterstützungen, allerdings dicht gefolgt von Chrome. Weit abgeschlagen findet sich unser Freund, der Internet Explorer, mit seinen langen Releasezyklen. Auf GitHub hat sich kangax die Mühe gemacht und Informationen über die Unterstützung der Sprachfeatures gesammelt. Das Ergebnis finden Sie unter [2]. Was aktuell wie ein rot-grüner Flickenteppich aussieht, ist das Ergebnis von Tests, die in JavaScript formuliert sind und mit den verschiedenen Browsern ausgeführt wurden (Abb. 1).

springer_harmony_1.tif_fmt1.jpgAbb. 1: Rot-grüner Flickenteppich

Von den neuen Features sind im Internet Explorer in der Version 10 noch keine, und in Version 11 nur sehr wenige verfügbar. Anders sieht die Situation bei Firefox und Chrome in den jeweils neuesten Versionen aus. Aber auch hier ist man von einer umfassenden Unterstützung noch weit entfernt. Dann gibt es noch Browser wie beispielsweise Safari, bei dem sich jedoch ein ähnlich trauriges Bild wie beim Internet Explorer abzeichnet. Aber glücklicherweise gibt es zumindest für Experimente mit den neuen Features von JavaScript eine recht elegante Lösung: einen ECMAScript-6-Compiler, der auf den Namen Traceur hört und von Google als Open-Source-Projekt entwickelt wird [3]. Binden Sie diesen Compiler in Ihre Applikation ein, kommen Sie auch auf älteren Browsern ohne Patches oder Ähnliches in den Genuss zahlreicher neuer Sprachfeatures. Diese Einbindung gestaltet sich relativ einfach. Alles was Sie hierfür benötigen, sind zwei Dateien aus dem Traceur-Projekt: Das ist zunächst die Datei traceur.js, die den Quellcode des eigentlichen Compilers enthält, und die bootstrap.js-Datei, die dafür sorgt, dass der Compiler gestartet wird. Haben Sie diese Voraussetzungen erfüllt, trennt Sie nur noch ein Schritt von der schönen neuen JavaScript-Welt. Sie müssen jedes Script-Tag, das ECMAScript-6-Quellcode enthält, mit dem Attribut type="module" versehen. Lassen Sie diesen letzten Schritt weg, erhalten Sie beispielsweise beim Einsatz von Klassen einen Syntaxerror. Der Nachteil des Compilers ist, dass auch er nicht sämtliche Sprachfeatures abdeckt. So können Sie, egal was Sie tun, das Structs-Feature (noch) nicht nutzen.

Auch serverseitig mit Node.js müssen Sie nicht auf die Annehmlichkeiten der Erweiterungen verzichten. Starten Sie Node.js mit der Kommandozeilenoption --harmony, wird die V8 Engine von Node.js in den ­ECMAScript-6-Modus geschaltet; und schon stehen einige der neuen Erweiterungen für die Entwicklung zur Verfügung.

Jetzt aber genug der Browserdiskussion. Im nächsten Schritt erfahren Sie mehr über die neuen Features, die Ihnen in Zukunft die Arbeit erleichtern sollen.

Das haben wir uns schon immer gewünscht

Es sind die kleinen Schritte und Änderungen, die einem Entwickler im täglichen Leben Freude bereiten. Wie oft waren Sie schon in einer Situation, in der Sie eine Aufgabe lösen mussten und sich eine bestimmte String- oder Array-Funktion gewünscht haben, die Sie aus einer anderen Sprache kennen und schätzen gelernt haben? In JavaScript haben Sie in diesem Fall zwei Optionen: Entweder Sie greifen auf eine Bibliothek wie underscore.js zurück, oder Sie erweitern selbst den jeweiligen Prototyp um die gewünschte Funktion. Wobei die zweite Variante keinesfalls empfehlenswert ist …

Die gute Nachricht ist, dass JavaScript in Zukunft um einige komfortable Funktionen im Bereich Strings und Arrays erweitert wird. Viele dieser Funktionen kennen Sie bereits aus dem Bereich Java oder PHP.

Der einfachste Fall ist die Wiederholung einer bestimmten Zeichenkette. Aktuell können Sie eine solche Aufgabe lediglich durch den Einsatz einer Schleife lösen. Mit der repeat-Methode auf dem String-Prototypen können Sie das dann einfach durch 'a'.repeat(15) ersetzen und erhalten 15 mal den Buchstaben „a“ als Ergebnis. Ein weiterer Block neuer String-Funktionen widmet sich der Lokalisierung bestimmter Zeichen. Die entsprechenden Funktionen heißen startsWith, contains und endsWith. Diese Funktionen sind nicht weltbewegend, aber zahlreiche Entwickler haben schon länger auf Features wie diese gewartet.

Ähnliches gilt für die neuen Array-Funktionen: Sie sind zwar nicht bahnbrechend, gestalten Ihnen das Leben jedoch erheblich angenehmer. Die wichtigsten Funktionen sind die find-Funktion und ihre kleine Schwester, die findIndex-Funktion. Diese beiden Funktionen ergänzen die aktuell existierende Palette von Funktionen, mit denen Sie anhand von Callback-Funktionen auf Arrays arbeiten können. Populäre Vertreter dieser Art von Hilfsfunktionen sind beispielsweise map und reduce. Mithilfe der find-Funktion können Sie ein bestimmtes Element in einem Array finden. Zu diesem Zweck formulieren Sie eine Callback-Funktion, innerhalb derer Sie prüfen, ob das aktuelle Element bestimmten Kriterien genügt. Ist das der Fall, verlassen Sie die Funktion einfach mit true als Rückgabewert, ansonsten mit false. Ist das erste Element gefunden, wird die Suche abgebrochen und der Vorgang ist beendet. Zur Formulierung der Bedingung haben Sie Zugriff auf das aktuelle Element, auf dessen Index und auf das ursprüngliche Array. Ein kurzes Beispiel, das diesen Sachverhalt verdeutlicht, finden Sie in Listing 1.

Listing 1: Die „Array.prototype.find“-Methode

var ...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang