Open Source im professionellen Einsatz
Linux-Magazin 09/2014
©hasselblad15, photocase

©hasselblad15, photocase

ECMA-Script 6 rüstet Sprachfeatures nach

Klasse Modernisierung

Der kommende Sprachstandard ECMA-Script 6 beseitigt viele historische Javascript-Eigenheiten. Die bisher vermissten Klassen, Module und Default-Parameter erleichtern das Coden vor allem den Umsteigern von anderen Programmiersprachen.

958

Das früher belächelte Javascript bekam in den letzten Jahren mächtig Auftrieb. Doch immer noch erschweren die historisch bedingten Besonderheiten [1] der Skriptsprache das Programmieren. Beispielsweise besitzt Javascript nur einen einzigen Namensraum, in dem globale Variablen kollidieren können. Die Sondervariable »this« ist nicht lexikalisch gebunden und verweist in Rückruffunktionen meist auf ein anderes Objekt. Zudem verstehen die wenigsten die ungewöhnliche, weil Prototypen-basierte Vererbung. ECMA-Script, die standardisierte Variante, schafft in Version 6 mit vielen Neuerungen Abhilfe. Auch wenn sie bisher nur als Entwurf [2] vorliegt und voraussichtlich erst 2015 veröffentlicht wird, hat die Umsetzung in den Browsern bereits begonnen.

Der vorliegende Artikel bietet einen Überblick über die Neuerungen in ECMA-Script 6 anhand einer Beispielanwendung. Das Metronom für den Browsereinsatz [3] hat der Autor mit ECMA-Script 6, dem Traceur-Compiler, HTML 5, dem Web-Audio-API und CSS 3 umgesetzt.

Den Stand der Implementierung von ECMA-Script 6 in aktuellen Browsern sowie dem Server Node.js zeigt Tabelle 1, abgeleitet von der umfangreichen Kompatibilitäts-Matrix unter [4]. Eine aussagekräftigere Beschreibung von ECMA-Script 6 in Firefox findet sich in der Mozilla-Dokumentation [5]. Als Lückenbüßer für fehlende oder nicht korrekt implementierte Features fungiert in Firefox, Chrome und Internet Explorer ab Version 10 der Traceur-Compiler [6].

Tabelle 1

Unterstützung von ECMA-Script 6

ECMA-Script-6-Features

Firefox 33

Chrome 37

Internet Explorer 11

Node.js

Arrow-Funktionen

ja

nein

nein

nein

Konstanten

ja

ja

ja

ja

Block-Scope

ja

ja

ja

ja

Klassen

nein

nein

nein

nein

Module

nein

nein

nein

nein

For-of-Schleife

ja

nein

nein

nein

Iteratoren

ja

nein

nein

nein

Generatoren

ja

ja

nein

ja

Rest-Parameter

ja

nein

nein

nein

Comprehensions

ja

nein

nein

nein

Template-Strings

nein

nein

nein

nein

Destructuring Assignment

ja

nein

nein

nein

Traceur übersetzt Programmcode von ECMA-Script 6 zurück in den nativen Javascript-Code der Vorgängerversion ECMA-Script 5. Mit Traceur programmiert beispielsweise das Open-Source-Projekt Angular JS bereits die nächste Version seines Javascript-Frameworks [6]. Traceur wird seit 2011 von Google unter Apache License 2.0 entwickelt. Derzeit liegt der Compiler in Version 0.0.46 vor.

Traceur-Compiler

Listing 1 zeigt die Installation von Traceur für den lokalen Einsatz auf einem Server unter Ubuntu 12.04. Da Traceur selbst in Javascript umgesetzt ist, installiert Zeile 1 zunächst mit dem Paketmanager Apt die Server-seitige Javascript-Implementierung Node.js. Zeile 2 fügt anschließend Nodes Paketmanager Npm hinzu.

Listing 1

Traceur-Installation

01 $ sudo apt-get install nodejs
02 $ sudo apt-get install npm
03 $ npm config set strict-ssl false
04 $ wget https://github.com/google/traceur-compiler/archive/0.0.46.tar.gz
05 $ tar xzvf 0.0.46.tar.gz
06 $ cd traceur-compiler
07 $ npm install commander

Damit Zeile 7 das Node.js-Modul Commander nachziehen kann, erlaubt Zeile 3 zunächst Npm, Ubuntus selbst unterzeichnetes SSL-Zertifikat zu verwenden. Die Zeilen 4 und 5 laden und entpacken die aktuelle Release von Traceur. Abbildung 1 zeigt das Terminal nach der erfolgreichen Installation.

Abbildung 1: Die Installation des Traceur-Compilers ist erfolgreich abgeschlossen.

Mit Hilfe des Befehls »traceur« lässt sich nun im Wurzelverzeichnis der Release ECMA-Script 6 nach Version 5 zurückübersetzen:

./traceur --out ecma5.js --script ecma6.js

Listing 2 demonstriert den Einsatz von Traceur im so genannten On-the-fly-Modus in einem HTML-Dokument. Dabei übersetzt der Compiler ECMA-Script vor dem Ausführen durch den Browser in natives Javascript. Das Script-Tag in Zeile 4 lädt den Traceur-Compiler, jenes in Zeile 5 das dazu benötigte Modul »bootstrap.js« aus dem Netz. Die Anweisung in Zeile 6 aktiviert alle Features von Traceur. Im anschließenden Script-Tag veranlasst das Attribut »type« mit dem Wert »module« Traceur dazu, den Javascript-Code innerhalb des Tag zu übersetzen.

Listing 2

Traceur einbinden

01 <!DOCTYPE html>
02 <html>
03 <head>
04  <script src="https://traceur-compiler.googlecode.com/git/bin/traceur.js"></script>
05  <script src="https://traceur-compiler.googlecode.com/git/src/bootstrap.js"></script>
06  <script>traceur.options.experimental = true;</script>
07  <script type="module">(() => console.log(123))()</script>
08 </head>
09 <body></body>
10 </html>

Ein Dokument wie in Listing 2 kann der Entwickler einsetzen, um ECMA-Script-6-Code und Traceur zu testen. Dazu fügt er Code in das Script-Tag in Zeile 7 ein und lädt das Dokument anschließend in aktuellen Versionen von Firefox oder Chrome. Die Ergebnisse lassen sich in der Javascript-Konsole des Browsers ablesen, sie öffnet sich bei beiden Browsern durch die Tastenkombination [Strg]+[Shift]+[J].

Um Traceur on the Fly zu testen, braucht der Rechner allerdings Internetanbindung. Unter Chrome muss selbst das HTML-Dokument von einem Webserver kommen, und sei es ein lokaler. Abbildung 2 zeigt die Ausgabe von Listing 2 in der Konsole des Chrome-Browsers.

Abbildung 2: Der Javascript-Code aus Listing 2 schreibt in Zeile 7 den Text 123 auf die Konsole.

Neue Sprachmittel

ECMA-Script 6 erfindet kaum etwas neu, sondern greift auf Bewährtes aus anderen Sprachen zurück. Beispielsweise führt die neue Version mit den so genannten Arrow-Funktionen die unter anderem aus Haskell bekannten Lambda-Funktionen ein. Sie verkürzen das Schreiben der Funktionsdefinition und binden die Sondervariable »this« lexikalisch. In dem Ausdruck

[2,4,6,8].map(x => x+1)

beschreibt »x => x+1« eine Rückruffunktion, die der Programmierer bisher nur mit »function(x) {return x+1}« definieren konnte.

Ebenfalls neu sind die aus C vertrauten Konstanten. Die Definition von Konstanten leitet in ECMA-Script 6 das Schlüsselwort »const« ein, etwa »const c = 7;« . Der Wert von Konstanten lässt sich wie in C nicht überschreiben.

Das Schlüsselwort »let« zu Beginn einer Variablendefinition, beispielsweise »let x = 2;« , schränkt die Sichtbarkeit der Variablen auf den umgebenden Block ein. Listing 3 zeigt in der ersten Zeile Let im Kopf einer For-Schleife. Außerhalb der Schleife ist die mit Let definierte Variable »x« undefiniert. Stünde anstelle von »let« dort das Schlüsselwort »var« , hätte »x« in Zeile 4 den Wert 1.

Listing 3

Block-Scope let-statement.html

01 for(let x=0; x<2; x++) {
02  console.log(x)
03 }
04 console.log(x);

Diesen Artikel als PDF kaufen

Express-Kauf als PDF

Umfang: 7 Heftseiten

Preis € 0,99
(inkl. 19% MwSt.)

Linux-Magazin kaufen

Einzelne Ausgabe
 
Abonnements
 
TABLET & SMARTPHONE APPS
Bald erhältlich
Get it on Google Play

Deutschland

Ähnliche Artikel

  • ECMA Script 6 angenommen

    ECMA International hat die vorgeschlagene Version ECMA Script 6 jetzt offiziell angenommen.

  • Javascript-Alternativen

    Javascript ist der Stoff, aus dem der Client-Teil vieler interaktiver Webanwendungen gemacht ist, schleppt aber Altlasten mit. Gegen die schreiben die Macher der vier vorgestellten Skriptsprachen an.

  • Angular 2

    Mit Typescript statt Javascript, JiT- und AoT-Kompilation und einem konsequenten Einsatz von Components brühen die Macher das Javascript-Framework Angular in Version 2 neu auf. Das Linux-Magazin probiert einen kräftigen Schluck von dem Gebräu.

  • Mit Vektoren zeichnen

    Bilder im Format Scalable Vector Graphics (SVG) brauchen weniger Speicherplatz und lassen sich ohne Qualitätsverlust skalieren. Selbst Animationen und Programmcode mit Javascript sind möglich, was den Standard fürs Web und den Desktop interessant macht.

  • Neue Webseite für Javascript-Test Sputnik

    Google hat eine Webseite online gebracht, mit der Anwender die Javascript-Testsammlung Sputnik im Browser ausführen können.

comments powered by Disqus

Ausgabe 07/2017

Digitale Ausgabe: Preis € 6,40
(inkl. 19% MwSt.)

Artikelserien und interessante Workshops aus dem Magazin können Sie hier als Bundle erwerben.