ECMAScript 6 Editor Lands in NetBeans IDE
With the recent announcement of the feature complete status of NetBeans IDE 8.2, let’s take a moment to look at a key new feature that has been introduced: an ECMAScript 6 (a.k.a. ECMAScript 2015) editor. The way in which the ECMAScript 6 editor has found its way into NetBeans IDE is almost as interesting as the feature itself. Read on below to find out how Oracle Labs took the Nashorn parser in Java 8 and improved it to be fully ECMAScript 6 compliant.
For quite some time, the NetBeans team had been trying out different approaches to parsing ECMAScript 6, using solutions that included ANTLR and Esprima. Both turned out to not provide the level of performance needed for the task. The demand in the NetBeans community for an ECMAScript 6 editor was high (issue #242387), while the various attempts made to provide that feature for NetBeans IDE 8.2, in particular in the context of the necessary performance requirements, were not succeeding.
In the meantime, Oracle Labs had been working on an ECMAScript 6 parser, as part of a set of solutions connected to their work on Graal VM and Truffle. The mission of Oracle Labs is “to identify, explore, and transfer new technologies that have the potential to substantially improve Oracle’s business” and, in light of that mission, and hearing of the challenges faced by the NetBeans team, Oracle Labs made their ECMAScript 6 parser available to the NetBeans team, as stated here by Jaroslav Tulach, a senior engineer at Oracle Labs:
What makes the ECMAScript 6 parser by Oracle Labs more performant than the other available parsers is, primarily, that it is hand written, as opposed to being generated by tools such as ANTLR. Plus, the demand for a highly performant parser at Oracle Labs was high, since it is part of a set of solutions that are specifically targeted at proving the performance of polyglot language interoperability. Internal measurements comparing the parsing time of the Oracle Labs solution versus Esprima are as follows:
Oracle Labs Time: 3.345237541s Files : 2649
Esprima Time: 49.289176451s Files : 2649
However, not only did Oracle Labs contribute their ECMAScript 6 parser to NetBeans IDE, it went further and made it available to Nashorn, as senior engineer on the Nashorn team, Jim Laskey, indicates:
Now it is licensed via GPLv3 + Classpath, while Nashorn supplies a parser API that can be used by any Java application.
What you see described above is a key advantage of these various groups all being part of Oracle, i.e., the ease of cross-pollination and support across disparate organizations within the same company.
NetBeans ECMAScript 6 Editor
With that background, let’s take a look at a range of ECMAScript 6 scenarios and how NetBeans IDE 8.2 (currently not released yet, though development builds are available) handles them. In the screenshots below, the NetBeans Darcula plugin has been installed.
- Generators. In ECMAScript 6, the function* declaration (function keyword followed by an asterisk) defines a generator function that returns a Generator object. In the screenshow below showing the ECMAScript 6 editor in NetBeans IDE, notice that the generator is parsed correctly in the editor, as well as in the Navigator window, via the special asterisk badge:
- Shorthand Property Names. The ECMAScript 6 editor in NetBeans IDE understands the new ECMAScript 6 shorthand property names in object initializers, as well as computed property names.
- Constants. In the screenshot below of the ECMAScript 6 editor in NetBeans IDE, you can see a range of features relating to the new ECMAScript 6 support for handling constants—the editor parses correctly, the Navigator window is updated, and the code completion shows related documentation:
- New Number Literals. ECMAScript 6 includes new hexa, binary, and octal literals. The ECMAScript 6 editor in NetBeans IDE marks these literals with bold gray letter x, b and o in the editor, which can be customized in the Options window. Together with that, the ECMASCript 6 editor provides code completion for these literals.
- Supporting ECMAScript 6 Modules. In ECMAScript 6, new keywords have been introduced, such as “import” and “export”, to support the code encapsulation mechanism provided by the new ECMAScript 6 module system. Not only does the NetBeans ECMAScript 6 editor incorporate these new keywords, and understand the ECMAScript 6 module system, but when you hold down the mouse while hovering over a reference to a different module, a hyperlink appears, which can be clicked to open the referenced module, enabling quick and easy navigation between modules within the application:
Moreover, comparable features are available to support destructuring assignment, object property assignment, default parameter values, and block scope declarations.
To get started with the ECMAScript 6 editor in NetBeans IDE today, get a development build. Once you have it installed, open an existing project into NetBeans IDE (any folder containing ‘bower.json’ or ‘package.json’ is automatically recognized by NetBeans IDE as a project) and start using the ECMAScript 6 features, supported by the various editor tools described above,