Review: 10 JavaScript editors and IDEs put to the test

WebStorm and Sublime Text lead a field of diverse and capable tools for JavaScript programming

1 2 3 Page 3
Page 3 of 3

You'd expect code formatting for JavaScript and HTML, but you might not expect much in the way of Markdown support. (Markdown is commonly used for formatting the documentation files in Git repositories.) And yet, after I installed a free plug-in that was offered as soon as I opened my first Markdown file, WebStorm provided both syntax highlighting and output preview for Markdown files.

Viewing and navigation are extremely important to me when I'm reviewing code, whether it's other people's code, my old code, or my questionable new code. WebStorm easily navigates to declarations and symbols, and it finds and highlights usages of symbols, labels, and files.

JavaScript is not only still evolving, but it has different implementations in different browsers and other environments. WebStorm lets you set your JavaScript language version as low as JavaScript 5.1 and as high as ECMAScript Harmony, and it shows you the browser compatibility of your current choice.

Code inspections built into WebStorm cover many common JavaScript issues as well as issues in Dart, EJS, HTML, Internationalization, LESS, SASS, XML, XPath, and XSLT. WebStorm includes JSHint (which is recommended by the jQuery team) and supports JSLint.

Configuring Node.js often requires a painful session in the command shell. WebStorm automates Node.js and NPM installation, upgrading, and source code configuration. WebStorm also allows you to debug Node.js applications and autocomplete CommonJS class members.

In addition to debugging Node.js applications, WebStorm can debug JavaScript code running in Mozilla Firefox or Google Chrome. It gives you breakpoints in HTML files as well as JavaScript files, and it lets you customize breakpoint properties. It shows you frames, variables, and watch views in the debugger UI, and it provides runtime evaluation of JavaScript expressions (and an elements tab in Google Chrome).

During debugging, a feature called LiveEdit allows you to change your code and have the changes immediately propagate into the browser where you are running your debug session. This saves time and helps you avoid the common problem of trying to figure out why your change didn't do anything, only to discover that you forgot to refresh your browser.

For unit testing, WebStorm bundles the JsTestDriver plug-in. This was originally a Google project, but JetBrains is now contributing to its development. In addition, WebStorm can integrate with the Karma test runner. For either testing method, WebStorm tracks code coverage.

Refactoring is an important step that many software developers tend to avoid because it's so easy to introduce errors when you do it manually. However, while you must know how to do it manually and always decide what needs to be done, an editor that can automate refactoring can be a big time-saver. There isn't much fancy refactoring to do in a JavaScript library, especially compared to a Java or C++ library, but WebStorm automates all of the refactoring types that make sense: renaming; extraction of variables, parameters, and methods; inlining; changing signatures; moving; and copying.

WebStorm can deploy via FTP, SFTP, FTPS, to local or mounted folders, and in place. WebStorm can download, upload, synchronize, and compare directories and files on demand, and it can automatically upload if you wish.

WebStorm integrates with all of the major version control systems: Subversion, Mercurial, Git (including GitHub), Perforce, CVS, and TFS. It has its own shelving system that you can use to clean your working tree prior to an update from version control, as an alternative to using the version control system's shelving system (such as Git stash). WebStorm also tracks your local change history and displays changes inline with the option to easily revert; you can't lose work or break the code between commits unless you try really, really hard.

Performance is not really an issue when using WebStorm. Startup may be slower than Sublime Text, which is basically an editor, but it's faster than any of the other actual IDEs, and much faster than the Java-based IDEs NetBeans and Eclipse.

At a high level, WebStorm has enough documentation to get you started and to answer major questions. When you drill down, however, you may find yourself being sent to obsolete blog posts. In some cases, it was easier to experiment with the program and revert my files if necessary than to look up details of how things worked.

Overall, WebStorm is my top pick for serious JavaScript/HTML5/CSS developers who want a full-featured IDE. However, if you also write a lot of non-JavaScript server-side code, you may want to investigate an IDE that supports your server-side languages and your databases as well as JavaScript. If you really don't need an IDE, consider Sublime Text or another editor with good JavaScript syntax highlighting.

JavaScript editors and IDEs: Odds and ends

Most likely, you'll find your JavaScript tool of choice among the six options discussed above. But the four tools below -- Alpha Anywhere, Komodo Edit, Notepad++, and TextMate -- all have something to recommend them. Depending on the task at hand, you might find any one of them handy to have around. And except in the case of Alpha Anywhere, the cost is either free or insignificant.

Alpha Anywhere.

Most development tools for JavaScript help you write as much JavaScript code as possible. Alpha Anywhere ($99 per month; Windows Vista or above) helps you write as little JavaScript as possible. Instead of making you concentrate on the code, it asks you to concentrate on the functional user interface design, then generates code based on your graphical choices. You only need to write JavaScript code yourself for actions that haven't already been written, either by Alpha Software or by you.

Another difference is that most development tools for JavaScript concentrate on the front-end code, with little or no regard for the rest of a Web or mobile Web application: the database, the application server, the Web services, and the Web server. Alpha Anywhere is an end-to-end tool. That offers some interesting efficiencies.

In fact, it's an abstraction or placeholder for the UX component, which is conveniently resolved by the application server layer at runtime, and replaced with the actual handle of the component. All of the properties and methods of the component are then referenced through the generated handle. We can see that easily by looking at the generated source code for the callMenuItem function. Where the original source code said:

{dialog.object}.closeWindow('SLIDEINMENU');

The runtime source code says:

DLG1_DlgObj.closeWindow('SLIDEINMENU');

So {dialog.object} has become DLG1_DlgObj.

When there is more than one component of the same type in an application, Alpha Anywhere automatically numbers them: DLG1_DlgObj, DLG2_DlgObj, and so on.

Along the same lines, the database for an Alpha Anywhere application is abstracted to a named connection string. What might be a Microsoft Access MDB file for development can be a SQL Server database with the same schema running in the Microsoft Azure cloud. Your code doesn't need to know or care.

On the screen you'll see multiple preview buttons. There are some for using desktop Web browsers (with device emulators for mobile Web applications) and some for doing a remote test on a phone or tablet. Similarly, you'll find buttons for publishing a Web project and for opening the PhoneGap Builder.

There's a lot here, and it can be very valuable and productive when you use Alpha Anywhere as intended, for end-to-end Web and mobile Web application development. On the other hand, Alpha Anywhere JavaScript editing per se is nothing special. If that's all you want, then WebStorm or Sublime Text might better serve your needs.

[Disclosure: I was an Alpha Software employee from 2010 to 2012, and I have a small equity stake in the company.]

Komodo Edit.

Komodo Edit, ActiveState's free reduced-functionality version of Komodo IDE, is a pretty good multilanguage editor. Everything I had to say about Komodo IDE as an editor applies to Komodo Edit.

If you like Komodo IDE but can't afford it, Komodo Edit is likely to make you happy. But Komodo Edit is not an IDE, so you should understand what you'll have to work around. You'll need to do your source code control outside the editor. That probably isn't a big problem if you have a GUI client -- such as the GitHub client or TortoiseSVN -- for your version control system.

You're also giving up real-time code collaboration. If you work alone, that isn't a loss. If you work closely with other developers who are remote from you, then you're giving up some productivity when you pass up this feature. And you're giving up the HTTP inspector. If you have another tool to look at headers and responses, such as Firefox with Firebug, then you're only losing some convenience.

You're giving up publishing from your editor, though you can fill that gap with FileZilla. You're giving up the nice Komodo Rx toolkit, though you can partially fill that gap with this site, for free. Or you could pay $39.95 for Regex Buddy or Regex Magic if you're a Windows user. Of course, once you start buying a bunch of individual utilities, you'll quickly rack up a bill that approaches the cost of Komodo IDE.

I could go on, but this comparison table for Komodo IDE and Komodo Edit has all the vitals. In any case, Komodo Edit may well satisfy your JavaScript editing needs for free -- and give you editing of HTML, CSS, Python, Perl, Ruby, Tcl, and a whole bunch of other programming and markup languages.

Notepad++.

A free Windows source code editor and Notepad replacement, Notepad++ does a decent job of editing JavaScript. It also supports about 50 other programming and markup languages. It has a workspace tree view, a function list tab, and a document map tab in addition to its multidocument editing window, and it has fast enough load time and strong enough performance that it doesn't feel like it's slowing you down.

With syntax coloring and folding, capable editing functions (including column-mode editing and regular expression support for search and replace), and a certain amount of function completion and parameter hinting, Notepad++ can easily be your primary code editor for JavaScript. However, it's far from the most fully featured JavaScript editor in terms of being able to generate code, perform operations such as refactoring, and navigate quickly within a large project.

I used Notepad++ extensively when developing JavaScript applications on Windows machines. At the time, I preferred it to Visual Studio 2008 for the purpose. By staying out of my way, Notepad++ allowed me to concentrate on the code I was trying to build. Later on, Notepad++'s minimalist approach felt less compatible to me, and I adopted other tools that reduced the number of keystrokes required to generate code.

Notepad++ is still useful in a pinch, and it's free for the downloading. If you have a Windows machine or VM, you should have Notepad++ installed, ready when you need it.

TextMate.

Once upon a time, TextMate ($55, OS X 10.7 and higher) was all the rage among the cool kids who wrote Ruby on Rails on their MacBooks while sitting at tables in college cafés. TextMate has since become less prominent as it fell into neglect and Sublime Text gained popularity, but with version 2.0 the product could be ready to make a comeback.

TextMate is not an IDE, but by using its "bundles," snippets, macros, and scoping system, you can often gain features that even a language-specific IDE lacks. TextMate now ships with bundles for, among many others, plain JavaScript and jQuery, which provide a bunch of nice tools for generating JavaScript and jQuery code quickly. Note that only the most popular bundles actually ship with the product. TextMate has a bundles preference menu from which you can download and install additional bundles.

Markdown support is provided in one of the in-package bundles. It includes a document preview function, a Markdown cheat sheet, and lots of shortcuts for generating Markdown mark-up.

Although it isn't documented yet, the Git bundle works well to integrate TextMate with Git and GitHub. TextMate recognized my existing Git repositories without any prompting when I opened them as project directories, and it was able to update them from GitHub using a pull command from the bundle. The SQL bundle lets you work with MySQL and PostgreSQL databases.

As far as speed goes, TextMate is right up there with Sublime Text. It might be a hair slower, but I'd need a stopwatch to be sure. I certainly can't complain about it.

It looks like TextMate is coming back from its temporary obscurity. I wish it well.

This story, "Review: 10 JavaScript editors and IDEs put to the test" was originally published by InfoWorld.

1 2 3 Page 3
Page 3 of 3