A Comparison of JavaScript IDE's anno 2014

Motivation

I am primarily a developer of .NET, but lately I've been working more and more with Javascript and HTML5. Like many of my readers who've also primarily been working with static languages like C# and Java, I also see the trend of applications previously only viable to develop in a compiled language, now being developed with web technology. The browser support of HTML5, Javascript and CSS3 is now very good across the board, so much that I'm tempted to call it mature. When it comes to tooling though, I've been surprised more than once to see professional developers speaking at conferences bringing up their solution in what I presumed was simple text editors such as Sublime Text or Notepad++. Not that there's anything wrong with those editors, its just that they are just that: Editors. Not IDEs: Integrated Development Environments - products that have a birds eye perspective on your solution as a whole and aids you in crafting great applications as apposed to files.

So was I wrong? There were three options:

1. Sublime Text has actually become a fully fledged IDE
2. Sublime Text is the state of the art of Javascript editors, although not on par with IDE's for static languages.
3. The speakers aren't using the best tool available.

I decided to find out which of the three was true, and the result I present to you in this blog.

Scope

What I've done in this test is to gather a number of criteria I believe are essential in a modern IDE for effective programming. The criteria I bring with me from years of experience of using tools such as Visual Studio and Eclipse developing C# and Java. The criterias may not be exactly ties of the IDE/editor. The criteria I then tested on a range of IDE's which I believed were good developing Javascript, and editors I've seen others praise as good IDEs.

The criteria

Here is the list of criteria I tested:

1. Intellisense / auto-complete

Is the editor capable of providing typing hints both on framework and self-coded functions? Will it provide parameter info on all functions? Even on functions in other files? This is an important feature both because it helps on typing speed, but more importantly it reminds you what the signature of any function is. It will save you a lot of Googling (framework functions) and solution2 navigation (own functions). This is a major time-saver when properly implemented.

2. Solution navigation

Go to definition: When the signature of the function is not enough and you want to view (or edit) the contents of the function, a quick way to navigate to the function call you're looking at is useful. This should be a one-keystroke shortcut from anywhere in the solution. This also goes for variables, as it for instance can be useful to see the initialization code of the variable.

Find usages: (Aka "Find references") Could be used to navigate to a concrete usage which you don't remember exactly where was, or it could be used to determine what the impact of a change of this function will have. Not in terms of renaming the function, because refactoring should take care of that, but for changing behavior.

Navigate to file: When the cursor is on the "href" or "src" part of a script- or stylesheet-tag, you should be able to navigate to that file with a single key press.

3. Refactor: Rename

Of all the refactoring functions, this is the one I use most often. This is the only one I'm truly dependent on. I utilize and appreciate others, but if the IDE doesn't have support for solution-wide renaming, you're in trouble. Most likely you'll often end up with sticking with original names of all functions and variables as the program evolves, because of the hassle of changing names. But behavior and meaning of functions change. So should names. There's nothing I hate more than finding a code base with the function getDollarValue only to find it accepts a parameter for an arbitrary currency.

4. Code outline view

I find it useful to have a quick overview of a file or class in a window pane next to the code itself. It quickly gives you an indication of the size of the file, it's role and concerns. It helps you keep the architecture clean and the code tight, in addition to be a navigational aid.

5. Syntax error highlighting

In a parsed language this is even more important than in a compiled one. Why should I have to waste time running the application and checking the console view only to find out I forgot a semicolon?

Debugging (not included)

Some of the IDEs have debugging capabilities. I haven't considered this feature essential because all the majors browsers have this now so you might as well use the browser for debugging. For those who have it though (All but Sublime), it might be better to use the IDE-debugger for convenience.

The editors

Visual Studio 2013

Visual Studio from Microsoft should be well known from anyone coming from a C++ or .NET-world. It's a monster of an IDE both in terms of size and list of features. In the later years Microsoft have had great focus on improving the support for Web technology, including Javascript. They're not quite there yet but they're getting there.

Visual Studio 2013 + #Resharper If you purchase Jetbrains' Resharper-plugin for Visual Studio, you're getting all the coding support you need and more. It's going to cost you though - not only the license cost of Resharper (~$150 for a personal license), but you're not getting away with the Express edition of Visual Studio anymore either.

WebStorm

Jetbrains is not only developing VS-plugins. They have their own IDE(s). WebStorm's Javascript support is nothing short of superb. The sister-product PhpStorm also adds support for the PHP language, if you're into that.

Eclipse

One can't write a review of an IDE of any language without mentioning Eclipse. I was actually quite impressed with the Javascript features you get for free (as in beer) from this IDE. It doesn't come for free in regards of man-hours though. First you need to install the Javascript Developer Tools plug-in, then you have to configure the key bindings for the functions you'll need, and then - if you're lucky - you may start being productive (I wasn't that lucky).

Sublime Text 3 + SublimeCodeIntel (ST3+SCI)

Sublime Text 3 (ST3) is a very sleek and good looking editor with a lot of nifty features you don't find anywhere else. But is it an IDE? Everywhere when the discussion of Javascript editing in ST3 comes up, the add-in SublimeCodeIntel is mentioned in the next sentence. This package will give you Javascript intellisense and some navigational functions and blurs the line between an editor and an IDE.

Cloud9

Cloud9 is stands out in the crowd as the only web-based IDE. I saw it mentioned in a closed question on Stack Overflow addressing the same question as I do in this blog post. I must admit I was highly skeptical to a web-based IDE and didn't have very high expectations going in. But I was surprised and impressed how far they have come. They have It still doesn't quite make it to elite league of IDEs, but I'll be following the development of this and similar services keenly in the years to come.

Google Chrome

Wait a second, you say.. Isn't that a browser? You're including both text editors and browsers in this test? Yes I do. Because people are starting to claim that Chrome is an IDE. I wanted to test if that claim held up. From my results you'll see that it didn't. It's a great Javascript debugger and on-the-fly hack-tool, but it's not an IDE. Yet.

vim (not included)

Vim is not included in this test. Many developers use Vim sort of as an IDE (comparable to Sublime Text 3) and would probably like me to include it. I didn't do that primarily because I don't have the time to get to know Vim and its plugins well enough to be able to answer all the questions. From what I've read, you should be able to get some Code hints (intellisense) and also a Tag list which acts like a Code outline view. Refactoring support is absent as far as I can tell.

I don't believe anyone should switch to Vim solely because they're looking for a good Javascript IDE. There might be many good reasons to learn Vim, but as far as Javascript IDE's goes, it's not the best as of today. I know it's an editor - not an IDE, but the same goes for Sublime Text 3. Yet these lines seem to blur.  

The result matrix

So here are the results, after hours of installing, configuring and testing code in the different IDE's:

FeatureIDE	VS2013VS	VS2013+R#VS+ R#	WebStormWS	NetbeansNb	EclipseEc	ST3+SCIST3	Cloud9C9	ChromeCh
1. Intellisense
a) DOM functions	Y	Y	Y	Y	Y	Y	Y	N
b) Own functions/variables	*	Y	Y	Y	*	Y	*	*
c) ...showing parameter list	Y	Y	Y	Y	Y	Y	*	N
d) File references (src, href)	N	Y	Y	Y	N	N	N	N
2. Navigation
a) Go to declaration	*	Y	Y	Y	*	Y	*	N
b) Navigate to file (src, href)	N	Y	Y	Y	*	N	N	N
c) Find usages	N	Y	Y	N	Y	N	N	N
3. Refactor: Rename
a) Functions	N	Y	Y	*	Y1	N	Y	N
b) Variables	N	Y	Y	*	Y2	N	Y	N
4. Outline*view	N	Y	Y	Y	Y	N	N	N
5. Syntax error highlighting	N	Y	Y	Y	Y	N	Y	N

Please leave a comment if you find any errors in the table.

Conclusion

I was pleasantly surprised on how good the Javascript support were in many of the IDEs I hadn't tested previously. I was similarly disappointed with Visual Studio 2013 out of the box, which I thought had better support after hearing talks from Microsoft-guys the later years on the focus on web technology for their IDE. Sublime Text 3 performed as expected - it's good for quick editing of small projects, but it won't hold up for larger project against the other guys.

I won't name a single IDE as the best - I haven't tested them all well enough for that. But if you are developing large Javascript applications, you won't go wrong with either VS2013 with Resharper, Netbeans, WebStorm or Eclipse. I guess it depends more on what you're used to, what your project manager offers or what your wallet can afford.

As for the question coined in the "motivation" section - I'd say it's a clear #3, given the question was "best tool for developing Javascript solutions". I do understand that in a presentation context, other factors may come to play. In short: choose whatever tool you like, but please make a consious and educated decision! I hope this article have contributed in educating you just a little bit.