Die gerade erfolgte Ankündigung, dass NetBeans 8.2 mittlerweile den Feature Complete-Status erreicht hat, gibt uns Gelegenheit, einen Blick auf ein zentrales neues Feature zu werfen: den Editor für ECMAScript 6 – aka ECMAScript 2015. Die Art und Weise, wie der Editor seinen Weg in die NetBeans IDE gefunden hat, ist fast genauso interessant wie das Feature selbst. In diesem Artikel gehen wir der Frage nach, wie Oracle Labs den Nashorn-Parser in Java 8 implementiert hat und welche Verbesserungen nötig waren, um ihn mit ECMAScript 6 voll kompatibel zu machen.

Schon seit einer ganzen Weile hat das NetBeans-Team verschiedene Herangehensweisen – darunter ANTLR und Esprima – ausprobiert, um ECMAScript 6 parsen zu können. Beide Varianten erwiesen sich jedoch als nicht performant genug für die Aufgabe. Dabei ist das Bedürfnis nach einem ECMAScript 6-Editor in der NetBeans-Community ziemlich hoch (Issue #242387). Aber die verschiedenen Versuche, das Feature für die NetBeans IDE 8.2 bereitzustellen, scheiterten – insbesondere hinsichtlich der erforderlichen Performance.

Währenddessen haben die Oracle Labs an einem ECMAScript 6 Parser gearbeitet, der in Verbindung mit ihrer Arbeit an Graal VM und Truffle steht. Die Aufgabe von Oracle Labs ist es, „neue Technologien, die das Potenzial haben, Oracles Business substantiell zu verbessern, zu identifizieren, auszukundschaften und zu transferieren“. Im Lichte dieser Aufgabenstellung haben die Labs ihren ECMAScript 6 Parser dem NetBeans-Team zur Verfügung gestellt, wie Jaroslav Tulach, Senior Engineer bei Oracle Labs, via Twitter verkündet:

@netbeans with #ecmascript6 parser developed by @oraclelabs as part of our #graalvm work. Supports more #es6 features than any other + #fast

— Jaroslav Tulach (@JaroslavTulach) 18. Juni 2016

Was Oracle Labs’ ECMAScript 6 Parser performanter macht als andere Parser, ist zuallererst, dass er von Hand geschrieben wurde, statt von einem Tool wie ANTLR generiert worden zu sein. Außerdem war das Bedürfnis nach einem leistungsfähigen Parser bei Oracle Labs weit verbreitet, schließlich ist dieser Teil eines Lösungs-Sets, das eigens auf die Performance polyglotter Spracheninteroperabilität zielt. Interne Messungen, die die Parsing-Zeit der Lösung von Oracle Labs mit Esprima verglichen, ergaben folgende Ergebnisse:

Oracle Labs Time: 3.345237541s Files: 2649
Esprima Time: 49.289176451s Files: 2649

Doch die Oracle Labs steuerten ihren Parser nicht nur zur NetBeans IDE bei, sondern gingen noch weiter und überließen ihn auch Nashorn, wie der Senior Engineer des Nashorn-Teams, Jim Laskey, mitteilte:

@JaroslavTulach @AdamBien @netbeans ES6 was added to Nashorn parser used in TruffleJS and backported to Nashorn. Arrow eval is Nashorn.

— Jim Laskey (@wickund) June 22, 2016

Der Parser ist jetzt via GPLv3-+-Classpath lizensiert, während Nashorn ein Parser-API bereitstellt, das von jeder Java-Applikation verwendet werden kann.

Das bisher Beschriebene zeigt eindeutig den entscheidenden Vorteil dieser unterschiedlichen Organisationen als Teil von Oracle; d. h. sie können sich leicht gegenseitig befruchten und sich über die einzelnen Gruppen innerhalb der Firma hinweg unterstützen.

NetBeans ECMAScript-6-Editor

Vor diesem Hintergrund können wir einen Blick auf die Vielzahl der ECMAScript-6-Szenarien werfen und wie NetBeans 8.2 – das momentan noch nicht veröffentlicht ist; allerdings sind Development Builds verfügbar – mit ihnen umgeht. In den Screenshots unten wurde das NetBeans-Darcula-Plug-in installiert.

Anmerkung: Jede der unten aufgeführten Kategorien ist eine Einführung in ein spezifisches ECMAScript-6-Feature und zeigt, wie der ECMAScript-6-Editor mit diesen umgeht. Natürlich gibt es viele weitere, akkuratere Features für jedes Szenario des Editors. Diese können in der JavaScript-Sektion der NetBeans IDE 8.2 New & Noteworthy-Seite nachgeschlagen werden. Eine der unten genutzten Referenzen ist Understanding ECMAScript 6 auf LeanPub.com.

• Generators: In ECMAScript 6 definiert die function*-Deklaration (Funktions-Keyword gefolgt von einem Sternchen) eine Generatorfunktion, die ein Generatorobjekt liefert. Der Screenshot unten zeigt den ECMAScript-6-Editor in der Netbeans IDE. Beachten Sie, dass via des speziellen Sternchen-Badges der Generator im Editor korrekt geparsed wurde, ebenso wie im Navigator-Fenster:
  
• Gekürzte Eigenschaftsnamen: Der ECMAScript-6-Editor in der Netbeans IDE versteht die neuen Kürzel der ECMAScript-6-Eigenschaftsnamen in den Objekt-Initialisatoren, ebenso wie die berechneten Eigenschaftsnamen:
  
• Konstanten: Im folgenden Screenshot des Editors kann man eine Auswahl der Features erkennen, die mit dem neuen ECMAScript-6-Support zur Handhabung von Konstanten zusammenhängen – der Editor parset korrekt, das Navigator-Fenster wird aktualisiert und die Code Completion zeigt die zugehörige Dokumentation an:
  
• Template-Literale: ECMAScript 6 unterstützt außerdem Multiline Strings, Basic String Formatting und HTML Escaping. Nicht nur werden diese Strukturen korrekt geparset, der Editor schließt auch Support für JavaScript-Expressions innerhalb von Template Literals ein, zusammen mit Code Completion, Mark Occurrences, Go-to-Deklarationen und ähnlichen Features, die gewöhnlich beim Support von Expression Languages zum Tragen kommen:
  
• Neue numerische Literale: ECMAScript 6 enthält neben neuen hex auch binäre und oktale Literale. Der ECMAScript-6-Editor in der Netbeans IDE hebt diese Literale mit gefetteten grauen Lettern x, b oder o hervor, die aber im Optionsfenster angepasst werden können. Darüber hinaus verfügt der Editor über Code Completion für diese Literale:
  
• Support für ECMAScript 6-Module: Neue Keywords, wie „import“ und „export“, sind in ECMAScript 6 eingeführt worden, um Mechanismen zur Einkapselung des Codes zu unterstützen, die vom neuen ECMAScript-6-Modulsystem bereitgestellt werden. Dabei ist der NetBeans-ECMAScript-6-Editor nicht nur in der Lage, die neuen Keywords miteinzubeziehen und das ECMAScript-6-Modulsystem zu verstehen. Wenn man außerdem den Mauszeiger länger über eine Referenz zu einem bestimmten Modul hält, taucht ein Hyperlink auf, der durch Klick das entsprechende Modul öffnet. Dadurch wird eine schnelle und einfach Navigation zwischen verschiedenen Modulen innerhalb der Applikation ermöglicht:
  

Darüber hinaus sind weitere vergleichbare Features integriert worden, um die Vergabe des Destructurings und der Objekteigenschaften sowie Default-Parameterwerte und Block-Scope-Deklarationen zu unterstützen.

Fazit

Wer schon heute den ECMAScript-Editor in der NetBeans IDE ausprobieren möchte, kann sich den Development Build besorgen. Sobald der installiert wurde, kann man ein bereits existentes Projekt in der NetBeans IDE öffnen und anfangen, die ECMAScript-6-Features zu nutzen, die jetzt von den oben beschriebenen Editor-Tools unterstützt werden.

Anmerkung: Bezüglich der gerade erwähnten NetBeans.org-Downloadseite ist es empfehlenswert, sich anstelle der All-Distribution stets exakt das NetBeans-Download-Bundle zu besorgen, das man persönlich benötigt. Wer speziell mit JavaScript arbeitet, sollt das HTML5/JavaScript-Bundle herunterladen, das eine kleine und verschlankte NetBeans IDE enthält, die ausschließlich über Tools für die Frontend-Entwicklung verfügt.