Review: 10 JavaScript editors and IDEs put to the test

1 2 3 4 Page 3
Page 3 of 4

On my Windows development box, I use two wide monitors. On my MacBook, I use the Retina display plus a Thunderbolt display. Unless I'm editing on one display and debugging on the other, I usually want to see a lot of different source files and different views into source files simultaneously. Sublime Text supports multiple windows, split windows, multiple workspaces per project, multiple views, and multiple panes containing views. It's fairly simple to use all my screen real estate when I want to, and to consolidate when I need to make space for debugging and testing.

You can customize everything about Sublime Text: the color scheme, text font, the global key bindings, the tab stops, the file-specific key bindings and snippets, and even the syntax highlighting rules. Preferences are encoded as JSON files. Language-specific definitions are XML preferences files. There is an active community around Sublime Text that creates and maintains Sublime Text packages and plug-ins. Many features that I initially thought Sublime Text lacked -- including JSLint and JSHint interfaces, JsFormat, JsMinify, PrettyJSON, and Git support -- turn out to be available through the community, using the Package Installer.

One of the reasons for Sublime Text's great performance is that it is tightly coded. Another reason is that Sublime Text is not an IDE, and it doesn't need the bookkeeping overhead of an IDE.

From a developer's viewpoint, this is a tricky trade-off. If you're in a tight, test-driven, "red, green, refactor" development loop, then an IDE that is set up to edit, test, refactor, and track code coverage will help you the most. If you're doing code reviews or major edits, on the other hand, you'll want the fastest, most efficient editor you can find, and that editor might well be Sublime Text.

Sublime Text is a highly configurable and extensible text editor for code, markup, and prose. It knows more than 50 syntaxes out of the box, including JavaScript (shown), and it can be extended with TextMate syntax definitions. (Click the image for the complete view.)

JavaScript editors and IDEs: WebStorm JetBrains' WebStorm, despite its modest price, is a high-end IDE for Web developers, concentrating on the HTML, CSS, and JavaScript front end. JetBrains also sells IDEs for Java, PHP, Ruby, and Python, all of which share a core engine.

As an editor for Web development projects, WebStorm is as good as anything else out there. It has all the features you'd expect, plus many pleasant surprises. You'd expect syntax-coloring and limited code completion. You might not expect accurate code completion for difficult mixed-language cases, such as JavaScript that generates HTML. Whereas some code editors punt and treat the HTML as a plain string, WebStorm recognizes the embedded HTML and parses the next layer. WebStorm's JavaScript code completion for keywords, labels, variables, parameters, and functions is DOM-based, and it supports popular browser-specific methods.

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.

JetBrains' WebStorm is an IDE for HTML, CSS, JavaScript, and XML, with support for projects and version control systems, including GitHub. WebStorm is more than an editor, although it's a very good editor. It can check your code and give you an object-oriented view of your project. (Click the image for the complete view.)

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.

  • Supports syntax highlighting for more than 50 programming languages, including JavaScript, HTML, and CSS
  • Lightning-fast startup, file loading, viewing, and scrolling
  • Excellent editing and navigation
  • Simple integration with external build systems
  • Easy extension using plug-ins
  • Good code editing and navigation, syntax highlighting, and code folding
  • Good debugging support in multiple browsers
  • JavaScript function timing
  • Very good support for Git and Team Foundation Server
  • Excellent IDE focused tightly on Web development with HTML, CSS, JavaScript, and XML, plus JavaScript frameworks and related languages such as CoffeeScript
  • Does syntax highlighting, documentation lookup, and refactoring
  • Supports integrated version control with CVS, Git, GitHub, Mercurial, and Subversion
  • Does on-the-fly code analysis, error highlighting, and quick fixes
  • Has its own project system with specialized project views, file structure views, and quick jumping between files, classes, methods, and usages
  • Includes FTP deployment, JavaScript debugger, unit-test runner, and integrated code coverage
  • Lacks version control support as shipped, but many version control plug-ins are available for prices ranging from free to $10
  • Lacks refactoring and code analysis
  • No OS X or Linux support unless you run Windows in a virtual machine
  • New "Peek definition" action not supported for JavaScript
  • Requires significant startup time
  • Omits server-layer and database-layer support (JetBrains has other products with additional server-side support)

JavaScript editors and IDEs: Odds and endsMost 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. For example, look at the code in the screen image below and notice the odd construction {dialog.object}. That's clearly not normal JavaScript.

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.

If you look at the screen image, 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.]

Alpha Anywhere minimizes the amount of JavaScript you need to write by generating most of a Web or mobile application from a user interface design. Here we see three short custom JavaScript functions required for a fairly complex mobile Web application that browses a sales database from iPads and iPhones. (Click the image for the complete view.)

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.

Related:
1 2 3 4 Page 3
Page 3 of 4
Now read: Getting grounded in IoT