days
-3
-9
hours
-1
-8
minutes
-1
-2
seconds
-1
0
search
Support for ES6 Modules, Generators, Constants, Destructuring, and More

ECMAScript 6 Editor Lands in NetBeans IDE

Geertjan Wielenga
NetBeans

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.

Background

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:

olabs-1

 

 

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:

olabs-2

 

 

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.

Note: Each of the categories below is an introduction to a specific ECMAScript 6 feature and how the ECMAScript 6 editor in NetBeans IDE handles it, though there are far more finely grained features for each scenario in the ECMAScript 6 editor, as can be found in the JavaScript section of the NetBeans IDE 8.2 New & Noteworthy page. A reference used below is Understanding ECMAScript 6, on LeanPub.com.

  • 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:ecmascript6-nb-generators
  • 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.ecmascript6-nb-shorthand
  • 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:ecmascript6-nb-const
  • Template Literals. In ECMAScript 6, new support is included for multiline strings, basic string formatting, and HTML escaping. Together with parsing these structures correctly, the ECMAScript 6 editor in NetBeans IDE includes support for JavaScript expressions inside template literals, with code completion, mark occurrences, go to declaration, and similar features common to support for expression languages in NetBeans IDE:ecmascript6-nb-expr1
  • 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.ecmascript6-nb-expr2
  • 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:ecmascript6-nb-modules

Moreover, comparable features are available to support destructuring assignment, object property assignment, default parameter values, and block scope declarations.

Many more finely grained features relating to the above, together with a range of more specific ECMAScript 6 editor details, can be found in the JavaScript section of the NetBeans IDE 8.2 New & Noteworthy page.

Conclusion

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,

Note: From the abovementioned page, i.e., the NetBeans.org Downloads page, a recommendation is to always get precisely the NetBeans download bundle that you need, rather than the “All” distribution. If you are working specifically with JavaScript, use the “HTML5/JavaScript” download bundle, which will give you a small and slimmed down NetBeans IDE, containing only tools for front-end development.

Author

Geertjan Wielenga

Geertjan Wielenga works at Oracle on open source technologies such as NetBeans IDE and Oracle JET.