Review: 7 JavaScript IDEs put to the test

JavaScript is used for many different kinds of applications today. Most often, JavaScript is mixed with HTML5 and CSS to build Web front ends. But JavaScript is also being used to build mobile applications, and it’s finding an important place on the back end in the form of Node.js servers. Fortunately, JavaScript development tools -- both editors and IDEs -- are rising to meet the new challenges.

In a companion article, I discuss the current crop of JavaScript editors. In this article, I’ll discuss the IDEs. As you’ll see, some of them are very good indeed, while others -- even ones with familiar names and good reputations -- have fallen into neglect and aren’t worth your time. To spare the guilty, I have dropped their embarrassing scores and lists of weak pros and strong cons, but I still discuss them.

Why use an IDE instead of an editor? The main reason is that an IDE can debug and sometimes profile your code. IDEs also have support for application lifecycle management (ALM) systems, integrating with the likes of Git, GitHub, Mercurial, Subversion, and Perforce for version control. But as more editors add hooks to these systems, ALM support is becoming less of a differentiator.

Aptana Studio

Aptana Studio 3 is a customized free and (mostly) open source installation of Eclipse for Mac OS X, Windows, and Linux, with much better JavaScript and JavaScript library editing than JSDT (JavaScript Development Tools). It is also available as a plug-in for Eclipse.

Years ago I used Aptana heavily for both JavaScript and Ruby on Rails development, but in recent years development of Aptana has slowed, mostly because Aptana became the underlying technology for Appcelerator Titanium Studio (follow the link to my review). There are currently two committers and 15 contributors on the Aptana GitHub project.

Aptana has support for HTML5, CSS3, JavaScript, Ruby, Rails, PHP, and Python, and for Git and GitHub. You can add support for other ALMs by adding Eclipse plug-ins. Using Git repositories that are already on my computer, I can’t seem to get Aptana to show its Git functionality. It’s entirely possible that if I import the repository via Git or GitHub this functionality will turn on. But other IDEs recognize the presence of the .git directory and turn on their Git support automatically.

Aptana 3 includes a number of TextMate bundles and some new .ruble bundles. It has good JavaScript highlighting and fairly good JavaScript autocompletion. I’m sure I remember having jQuery support in Aptana 2. However, in my copy of Aptana 3, typing $. doesn’t bring up a completion menu.

Aptana is still pretty good, but I now prefer other editors and IDEs, such as WebStorm for JavaScript, Komodo for Ruby, and Sublime Text for general editing.

Eclipse with JSDT

I rarely take an active dislike to an IDE. In the context of JavaScript development, however, Eclipse is an exception.

Back in the days when Java Swing was new and exciting, I enjoyed using Eclipse for Java development. Even last year, when I did some Android development with Eclipse, I found the experience OK. In attempting to use Eclipse with JSDT, I constantly found myself disappointed.

On a positive note, Eclipse is at this point fairly mature. There’s a plug-in for any open source project, programming language, or popular ALM product you can imagine.

Alas, Eclipse with JSDT is not fast compared to any of the other JavaScript IDEs in this review, nor is it accurate -- it constantly displays false-positive errors for valid code that passes JSHint.

If you have to use Eclipse for JavaScript development -- for example, because you generate JavaScript from JSP code and Eclipse is mandated in your organization -- I’m sure you can get by. But I wouldn’t want to do it myself.

That said, Eclipse can be made usable with the right plug-in -- for instance, with Aptana Studio. 

Komodo IDE

I have been a user and fan of Komodo IDE since it was first introduced in 2001. Although newer products such as Sublime Text and WebStorm have surpassed it in some areas, it is still a good editor and IDE.

Komodo IDE provides advanced JavaScript editing, syntax highlighting, navigation, and debugging, but it doesn’t include JavaScript code checking. For that, you can always run JSHint in a shell.

Komodo supports dozens of programming and markup languages, with emphasis on Perl, Python, PHP, Ruby, Tcl, and XSLT. With its wide range of programming and markup language support, including refactoring, debugging, and profiling, Komodo IDE is a very good choice for end-to-end development in open source languages.

Komodo has a code refactoring module for all of the languages for which it provides code intelligence: PHP, Perl, Python, Ruby, JavaScript, and Node.js. Unfortunately, the “least common denominator” nature of this approach limits the capabilities to renaming variables and class members, and to extracting code into a method. Nevertheless, these are some of the most useful cases.

Komodo IDE has both column editing and multiple selections. This provides near-parity with Sublime Text and TextMate as far as mass edits are concerned. As long as we’re doing the comparison, Komodo is more of an IDE, and Sublime Text is much faster. And as long as we’re discussing performance, Komodo’s speed has improved noticeably compared to older versions, in screen drawing, search, and syntax checking.

Komodo IDE has several features that most competing products lack. One is its HTTP Inspector, which is excellent for debugging Ajax callbacks. Another is its Rx (regular expression, or regex) toolkit, which is a great way to build and test regular expressions for JavaScript, Perl, PHP, Python, and Ruby.

Collaboration is another Komodo IDE differentiator -- think Google Docs for code. You can create sessions for groups of files, add contacts to sessions as collaborators, then work together on the same files at the same time, with near-real-time synchronization.

Collaboration is not a replacement for source code control, but it’s a useful supplement. Komodo IDE integrates source code control using CVS, Subversion, Perforce, Git, Mercurial, and Bazaar. Only the basic version control operations are supported. Advanced operations, such as branching, must be done using a separate source code control client.

Although Komodo doesn’t have its own JavaScript document formatter, it takes advantage of the best free open source for this purpose. Out of the box, the default formatter for JavaScript files is JS Beautifier, but another nine options are available through a drop-down menu.

Komodo IDE does not support debugging client-side JavaScript, but it does debug Node.js, both locally and remotely. It also debugs Perl, Python, PHP, Ruby, Tcl, and XSLT. Of course, you can always debug in Firefox with Firebug or in Chrome.

Komodo IDE has a DOM viewer that lets you view XML and HTML documents as collapsible trees. It also lets you run XPath searches to filter the tree.

Komodo’s code profiling and unit testing modules do not support JavaScript. However, JavaScript and Node.js are both supported by Komodo’s Code Intelligence module, which implements code browsing, autocompletion, and calltips.

Komodo IDE can publish groups of files over FTP, SFTP, FTPS, or SCP. Komodo can also synchronize files and detect potential publishing conflicts that could cause you to overwrite other people’s changes.

Overall, Komodo is a good but not great JavaScript IDE, and a good but not great JavaScript editor. However, it may well serve your needs -- especially if you also work with Perl, Python, PHP, Ruby, Tcl, or XSLT.

NetBeans IDE

NetBeans has good support for client-side JavaScript, HTML5, and CSS3, and it supports the Cordova/PhoneGap framework for building JavaScript-based mobile applications. Though NetBeans isn’t the fastest IDE on the block, it’s one of the more complete, and it’s available free under an open source license. However, for server-side JavaScript programming, you’ll want to look elsewhere. 

The NetBeans JavaScript editor provides syntax highlighting, autocompletion, and code folding, as you’d expect. The JavaScript editing features also work for JavaScript code embedded in PHP, JSP, and HTML files. jQuery support is baked into the editor. While NetBeans 8 was updated to support RequireJS and has a community plug-in for Node.js, attempting to work on a Node.js project or a JavaScript library project is a frustrating experience.

Code analysis runs in the background as you edit, providing warnings and hints. Debugging works in the embedded WebKit browser and in Chrome with the NetBeans Connector installed. The debugger can set DOM, line, event, and XMLHttpRequest breakpoints, and it will display variables, watches, and the call stack. An integrated browser log window displays browser exceptions, errors, and warnings.

NetBeans can configure and perform unit testing with the JsTestDriver, a JAR (Java archive) file you can download for free. Debugging of unit tests is automatically enabled if you specify Chrome with NetBeans Connector as one of the JsTestDriver browsers when you configure JsTestDriver in the Services window.

When you are debugging a Web application in Chrome with the NetBeans Connector, and you edit CSS from the Chrome Developer Tools, the changes will be captured by NetBeans and saved into the CSS files. However, if your CSS files were generated from SASS or LESS style sheets, you’ll have to manually update the source sheet, because the CSS files are merely compiled output.

In the embedded WebKit browser and in Chrome with the NetBeans Connector installed, you can use the NetBeans network monitor to view request headers, responses, and call stacks for REST communications. For WebSocket communications, both headers and text frames are displayed. Overall, NetBeans provides a slightly better debugging experience with Chrome than you get in Firefox with Firebug.

NetBeans integrates source code control with Git, Subversion, Mercurial, and CVS. The Git support is augmented by a graphical Diff viewer and by a shelving system within the IDE. NetBeans color-codes the Git status of files, lets you view revision history for every file, and shows you revision and author information for each line of version-controlled files. NetBeans has similar integrations with Subversion, Mercurial, and CVS, although I only tested Git.

NetBeans integrates issue tracking with Jira and Bugzilla. In the NetBeans task window, you can search for tasks, save searches, update tasks, and resolve tasks in your registered task repository. Unfortunately, the open source project I used to test with (jQuery Core) uses Trac rather than Jira or Bugzilla. NetBeans also has team server integration for sites that use the Kenai infrastructure -- basically, kenai.com and java.net.

NetBeans 8 added RequireJS support, as well as AngularJS navigation via hyperlinking from view to controllers, and it enhanced AngularJS code completion. It also brought code completion support in Knockout templates, new editor support for creating jQuery widgets and plug-ins, and debugging of JavaScript code executed in Nashorn.

But NetBeans hasn’t really caught up to the trend toward using JavaScript on the server with Node.js, Express, and so on. As far as I can determine, it lacks any JavaScript profiling, although it can profile Java applications and EJB modules. And while NetBeans can refactor Java and PHP, it can’t refactor JavaScript.

Overall, NetBeans is a decent contender for client-side JavaScript, HTML5, and CSS3 development, especially if you are also doing Java, PHP, or C++ development on the server -- but not if you’re doing JavaScript on the server. If you don’t have the budget for WebStorm, you’ll find that NetBeans does the job, except for the weak Node.js support.

Visual Studio 2013 with NTVS and Web Essentials

In my full review of Visual Studio 2013 I discussed the product as a whole, with only a few references to JavaScript. I’ll reverse the emphasis here.

Overall, Visual Studio 2013 serves very well as a JavaScript IDE, though it is a better .Net IDE, and it is not as good as WebStorm for JavaScript. While it also serves very well as a JavaScript editor, it’s a better C# editor, and it's not as good or as fast as Sublime Text for JavaScript.