Javascript IDE Review

…a look at refactoring, intellisense, navigability, and usability.

javascriptIDEs

As agile software development becomes more commonplace, it becomes more and more essential that the tools we use allow us to develop software in a flexible fashion. Particularly important is refactoring. Being able to refactor is what allows is to respond to change. It makes our code evolve overtime. For example renaming a method, or changing a methods parameters should not be a programming disaster, it should be effortless and pain free, allowing our software to develop organically.

For the last year I have been using Javascript for a project. After 10 years of Java it has been a pretty hellish first few months, but things have improved once I learned how much a good IDE can leverage the pain away. Javascript’s dynamic nature will never allow for smooth refactoring like Java in Eclipse, but you need at least SOME intellisense, code navigability and refactoring support if you are going to be do anything other than ‘script kiddy’ stuff.

Having an IDE that understands the language you are developing in allows project wide changes, as it can offer a layer of control like the Eclipse platform does for Java developement. A Javascript IDE should understand Javascript. Ideally a Javascript IDE should also understand JSDoc which can also offer type checking. You really can’t afford this notion of ‘duck typing’ when you have a multi library project with 20,000+ lines of Javascript code.

I set up a list of criteria below, and ran these against four Javascript IDEs that I would consider the ‘main players’ in this realm.

Object Rename  If I rename the method methodXYZ in the method test in the below example, it should not affect the method in ObjectA.
Javascript File Rename If I rename a javascript file, then I want the rename to also be carried through to my HTML index file. Ie. The IDE has to know of the relationship between the index.html file and the javascript files in the project.
Rename var or param Can I rename local variable or parameters in the scope of a method?
Intelligent Intellisense Entering a ‘dot’ will bring up a pop up list of methods.If I type ‘.’ After declaring ‘v’ in the example below :

Then I want my IDE to intelligently know that methodB is an available method of v because v is an ObjectB object.
Create Method Hint If I type in a method that does not yet exist, I want a graphical hint or shortcut to allow the quick creation of a method stub (offering perhaps various options for scope).
Unreachable Code Example

I want my IDE to highlight or underline unsed code in some way to make it stand out.
jQuery intellisense Whenever I press ‘.’ In this scenario :

I want to have a list of all JQuery methods.
Code Navigation
Method Step Into I want my IDE to know how to navigate to the methodXYZ in ObjectA, through the use of a function key or short cut key.

This should also work across javascript files.
Var Step Into In the case of a simple locally scoped variable When doing the ‘step into’, I want my cursor to move to the line of the ‘var’ assignment.In the case of a variable defined with this. The Step Into should be as intelligent as possible, and try to determine where it first has been defined/instantiated.Ideally all instances of the variable should be clearly highlighted.
Find Usages I want my IDE to know how to find usages of an object or method across the whole project.In Eclipse CTRL-SHIFT-G is used to fine Java methods. A list is brought up showing where this object is being used across the project or projects. Something similar should also be possible in Javascript. Although Javascripts dynamic nature prevents this from being perfect, some basic string matching across the whole project should be at least offered.
JSDoc Does the IDE support JSDoc to some degree?
JSDoc Type Checking Is it possible to do Type Checking by using JSDoc or perhaps another means? Can the IDE perform some basic error checking before sending the code to runtime?For example in the below example the call of methodXYZ in test is wrong because it is expecting an object of ‘type’ ObjectA through JSDoc markup. Can the IDE visually underline or highlight these errors in code?
Method Encapsulation and JSDoc Using the JSDoc @private annotation, is it possible to hide methods?Does intellisense then hide the method? Or at least indicate that it should treated as private?

These are the results :

Webstorm

Aptana 3.4.2

Netbeans

Visual Studio

Object Rename Yes. But sometimes it doesn’t understand the context and does a string replace. No Yes.Weirdly does not allow a rename from the menu. No
Javascript File Rename Yes. No Yes. No
Rename var or param Yes. No. Seems to lack any refactoring capabilities. yes No
Intelligent Intellisense Yes No. Only shows methods from javascript Function and Object object Yes Yes.
Create Method Hint Webstorm :Creates in method or globally in file. Cant figure out type. No No. Offers ‘Surround with function’ which is almost as good. No
Unreachable Code Yes. Underlines in gray with tooltip No No. No.
Unused variables yes No Yes no
jQuery intellisense yes No Yes No
Method Step Into Yes.Across files? = yes No. Some code navigation, but extremely limited. Yes.Across files? = yes YesAcross files? = No
Var Step Into Yes No yes yes
Find Usages Yes No No No. Not apparent to me that it can.
Pull Out local to global variable Webstorm: doesn’t seem to work No No No
JSDoc Yes No Yes No
JSDoc Type Checking Yes. Reasonable support No Yes No.
Method Encapsulation and JSDoc Yes. No No. No.

Conclusion

I have been developing in Webstorm for the past 8 months or so, and I thought the refactoring abilities, intellisense and code navigation were tools that are standard for serious Javascript developement environment. Without these refactoring tools, developing complex Javascript applications has been like stumbling around in the dark, a trip back to the ‘stone age’ of software development where everything was developed in text editors. Understanding how a small piece of code works could cost days.

I assumed that Javascript IDEs would have this kind of stuff per default, but I have been pretty surprised at how much lacking the software is out there. Javascript is so ubiquitous on the web, so its something all web IDEs should have.

Webstorm comes out way ahead in my research. Jetbrains, a pioneer in Java refactoring have tried as hard as possible to squeeze out as much refactoring as is possible in a dynamic language such as Javascript. Some things aren’t perfect, refactorings have sometimes just behaved as a text ‘search’ and ‘replace’, and have some nasty side effects at times, but a preview screen offers pre-emptive screening, and renaming methods has been overall quite pleasing. (TIP : Make you Javascript methods unique to avoid conflicts!). Using JSDoc in Webstorm has been great too.

Netbeans is also pretty good, however it lacks some basic features. Why can’t I ‘find usages’ for a method, even if it is just a string search? It would help immensely. You can’t delete or change code if you don’t know where its being used. Renaming a method doesn’t seem to register across files which is a shame too.

Visual Studio is fairly poor with its Javascript support and on top of that it feels like driving a ten ton truck through a Japanese rock garden. Aptana offers almost nothing, and is really just a glorified text editor. Maybe it offers great PHP/Ruby development? In any case you can throw it in the same basket as Spket, Sublime.

So Webstorm comes out on top. Even though I have been using it, i was quite surprised that there isn’t anything out there to compete with it. Hopefully that will change.

 

 


Posted in JavaScript | Tagged , , , , , , | 6 Comments

6 Responses to Javascript IDE Review

  1. Todd Garza says:

    Thanks for the post. This is exactly what I needed. Long time C# coder and VS2010/Resharper user so I’m in a similar boat of embracing/migrating to Javascript. I was toying with moving to something like ACE or Orion, but am addicted to Jetbrains refactorings and ease of use.

  2. Petr Jiricka says:

    Thanks. Since this blog was written, new versions of WebStorm and NetBeans have been released. I wonder whether/how this changes things.

    • felixzacat says:

      Not sure. I don’t expect much. When I have some time i could go through these tests again, but i think i will wait about a year before I update this article (unless someone can point something out to me)

  3. looki says:

    quite surprising! thank you very much for this article… I am going to use this tool, as, the currently available html “editors” lack a lot of these functionalities… it is a shame….

  4. Jeroen van Drie says:

    Thanks. I’ve got to say I’ve come to love javascript. I wrote a database backend for a mobile app in node.js and now trying my hand at writing 3d webgl using three.js. It feels like there is something new and fascinating available in js every day. But code is becoming progressively more complex as projects mature and an IDE seems essential.

    Is there a reason why you haven’t reviewed eclipse JSDT – http://www.eclipse.org/webtools/jsdt/ since you’re already used to eclipse that may be the path of least resistance?

    I’d be curious to know. I’ve used eclipse for Android development but never much got the hang of it. And even there I think javascript is about to become a serious alternative to native with stuff like phonegap’s javascript library.

    • felixzacat says:

      not sure why i didn’t. Maybe it didn’t come up on my google searches. I might have a bit of time this week, so i will look into it, and maybe run it through my tables and do an update of this post.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

THREE_COLUMN_PAGE