Javascript IDE’s? yes!

by Oren Farhi on October 27, 2011

Javascript IDE’s? yes!

Lately, I am surprised of how javascript is perceived with people who are not so familiar with the new era of javascript.
Javascript has stepped up in its significance as a development language quite high in the last 3-4 years and it still does.
With javascript becoming so popular for developing almost any field: server side, database, client, mobile devices, cable boxes, games (and I can continue wit this list – but i won’t), the need for a proper IDE arises.

What is a proper IDE?

First, let us take a look at wikipedia’s definition for an IDE:
“An integrated development environment (IDE) (also known as integrated design environment, integrated debugging environment or interactive development environment) is a software application that provides comprehensive facilities to computer programmers for software development”.
By definition, an IDE consists of:

  1. source code editor
  2. compiler/interpreter
  3. build automation tools
  4. a debugger

So – What these have to do with javascript?

Source Code Editor

There many source code editors which include support for javascript. Again, by definition, a source code editor have features designed to simply and ease the development process: color syntax, auto-complete, object/class browser, code templates, code refactoring and much much more.
All of the above exist for javascript as well.

Compiler/Interpreter

Until the rise of popular compilers for javascript such as CoffeeScript, the compiler javascript developers worked with was actually a JIT compiler-  “just in time” compiler – or to put in simple words – the browser.
The browser compiles and interpret javascript code to machine code, which is usually formalize in what the end user sees as UI interactions (off course, there are also unseen operations that may run in the background).

Build Automation Tools

To put in simple words, build automation tools are macros which make repetitive tasks a breeze. Such tasks may include packaging, running tests, deployments, creating documentations etc.
Nowadays, there are tools for packaging javascript code – compressing, obfuscating, combining files by dependencies and more. There are also tools for generating documentations and running some tests on the code.

Debugger

Again, the debugger feature goes to the browser – which is the most common method for debugging javascript – and practically, the most convenient.
Javascript debuggers such as Chrome Developer Tools and Firebug offer: breakpoints and conditional breakpoints, watch expressions, logging requests and responses, live editing and more. There are several IDE’s which offer built in debuggers as well.

So, to summarize the above, IDE is a set of tools designed for developing. A javacript IDE may be an integration of a browser and a code editor. I want to present some of IDE’s available for javascript developement.

A List of Javascript IDE’s

Jetbrains WebStorm (commercial)

Webstorm is a cross platform IDE designed for web development with Javascript, HTML5, CSS, SQL and more.
It offers IntelliSense code completion, object-class browser, refactoring tools, code navigation in a click, various js frameworks support, code analysis, FTP tools, Version Control integration (VCS)

Aptana (free)

Aptana (currently studio 3) is a cross platform IDE supporting Javascript, HTML5, CSS, PHP, Python, Ruby and more. It is also available as an Eclipse plugin.
It supports code assisting, deployment tools, integrated debugger, plugins for extending the IDE capabilities and IDE customizations.

Netbeans (free)

Netbeans is a cross platform IDE. Beyond being a JAVA IDE (as well as php), It also supports working with Javascript, html and css.
For Javascript, it supports IntelliSense code completion, object-class browser, refactoring tools, code navigation, js frameworks support, live code analysis, FTP tools, Version Control Integration, a debugger, project organizer, plugins and an IDE customization.

User Defined

There are many more fine code editors for javascript. As I stated above, I see a Javascript IDE as a hybrid of browser and a source code editor (if looking at web ui development).
Currently, my editor of choice is notepad++.
it offers code completion for more than 30 languages, color syntax, object class browser (a plugin), FTP, file system integration, command line integration, command line scripts integration (i.e., I integrated a script for integration with TFS version control, plugins, low CPU consuming and world wide community support.There is also a movement towards online “cloud” based code editors, amongst – Cloud9 and akshell.

There are plenty other good IDE’s / editors which didn’t fit in to this post such as – SublimeText, Eclipse, Spekt, Komodo and more. If you feel you’re working with a good editor – let us know in the comments.