The Best IDE For ArcGIS API for JavaScript, HTML5 with Code assist

1.Aptana Studio 2

If you want to do some professional development then Aptana Studio would be a decent choice and best of all, it’s free! You can use Aptana as a plugin with your Eclipse or you can download the standalone Aptana Studio. If you already use Eclipse then the Aptana plugin would be the natural choice.

Aptana Studio is pretty simple compared with Visual Web Developer + VS2010. You can Debug your JS using Firefox+Firebug. What’s really cool about it is the support for popular JS libraries like Dojo, Yahoo! UI etc. If you’re planning on using 3rd party JS libraries then you should choose Aptana Studio. It also comes with a nice FTP client integrated into it which comes in handy when you want to do live-development. Moreover, you can also preview your JS in action right inside it using the integrated browser view (it supports IE, Firefox and Safari).

With Aptana Studio 2 installed, there still are some steps to getting it set up to perform code assist. The ArcGIS JavaScript API is build on top of the Dojo Toolkit. As a result, support is needed for both Dojo Toolkit and the ArcGIS JavaScript API.

Setting up Dojo code assist can be accomplished by installing the plug-in directly from Aptana Studio. Go to Help > Install Aptana Features. In the dialog, expand the JavaScript Libraries section, check the box next to Dojo and click the Install button at the bottom of the dialog. Aptana will download and install support for Dojo. Code assist is now working for the Dojo Toolkit, but support for the ArcGIS JavaScript API still needs to be installed.

To get code assist working for the ArcGIS JavaScript API, a jar file needs to be downloaded from Esri and installed into Aptana Studio. The download and installation directions can be found on the ArcGIS Resource Center as well. There is only one problem. The directions are for setting up code assist if you have installed Aptana as part of the larger Eclipse IDE. This was not the case for me. I installed it for only myself on the computer. It took a bit of exploration to figure out how to get this installed correctly.

Successfully installing this jar file requires unzipping the zipped archive, copying the jar file into the Aptana plugins folder and enabling it in Aptana. If like myself and installing Aptana for only the current user, the plugin folder can be difficult to locate. Instead of being located in the C:/Programs directory where all other programs installed on a Windows computer are, Aptana is installed in C:/Users//AppData/Local/Aptana Studio 2.0. Inside this folder is located inside the Aptana folder at C:/Users//AppData/Local/Aptana Studio 2.0/plugins. Copy the jar file from the zipped archive downloaded from Esri into this directory.

With the jar file copied into the plugins directory, enable the plugin from within Aptana Studio. Go to Window > Show View > References to open the References dialog. In the References Dialog, open the Global References and check the box next to ArcGIS JSAPI.

This is what it takes to get an IDE with code assist for working with the ArcGIS JavaScript API: download and install Aptana Studio 2, enable the Dojo plugin, download the jar file from Esri, copy the jar file into the plugins directory and enable the JSAPI plugin. Although it takes a bit of tinkering to get it done, the upside is this IDE is completely free and provides code assist for the API I prefer to learn.

Download and Install

1. Download and install Aptana Studio.
2. Install the Dojo plug-in using the Help > Install Aptana Features menu option. In the Aptana Features dialog expand JavaScript libraries and select Dojo to install the Dojo libraries.
3. Download and install the JavaScript API code assist plug-in from the ArcGIS Resource Center.

2. Visual Studio 2010 with Visual Web Developer (Windows)

If you’re already writing your code in Visual Studio then this would be an ideal option. Visual Web Developer does not come by default in the VS 2010 installation so you will have to add it separately. To start off with, you can download and install the Express edition (free) of Visual Web Developer from here. Not only can you write and debug JS in VWD 2010 Express but you can also write RIA (Rich InternetApplications), WPF (Windows Presentation Foundation), in fact write a complete web-application.

3. Firefox + Firebug (Windows, Linux, Mac OS X)

If you do not want another heavy installation and just want to write plain JS and test it right inside your browser, you can do that with Firebug installed over Firefox. If you do not have Firefox then downloadinstall the latest version (3.6.13 at the time of writing this) and then download and install the Firebug plugin for Firefox from here (Or you can go to Tools –> Add-Ons –> Get Add-Ons and type in Firebugand install it). This is by far one of the most popular and most download Firefox Add-on too which speaks for itself.

Here’s a simple starter for writing and live-debugging JS using Firebug:

Fire up Firefox and open the JavaScipt that you want to inspect and debug.

If you have installed Firebug then a small bug icon will appear at the bottom-right corner of Firefox, that’s where you will open Firebug right inside Firefox. Since we’re inspecting JS, you need to click theScript button in the Firebug button panel:

You can set break point, conditional breakpoints and also profile your JS in addition to a couple of other features. This is a nice place to get started with Firebug.

Since Firebug does not include a Text Editor in which you can write code but you can add any text editor (preferably Notepad++) by going to Tools –> Firebug –> Open With Text Editor –> Add New Editor

 4.Komodo IDE (Windows, Linux, Mac OS X)

Even though Komodo is not free but it’s worth your money if you write JS (or web apps for that matter) for a living. Komodo IDE comes packed with a code editor that supports almost every language in which you can write web apps. Besides all the usual features you can integrate almost any source control into the IDE. It also includes Database Explorer which lets you dig into your website’s database right from the IDE. If you’re developing web apps then you know how handy this could be. You can find the whole list of features on here.

5. Komodo Edit (Free) (Windows, Linux, Mac OS X)

Komodo Edit is the free version of Komodo IDE minus the integrated debugger and a couple more less-important features. I would recommend trying out your hands on Komodo Edit first before going for the Komodo IDE since it would give you a feel of working in Komodo. It is free and open-source unlike the Komodo IDE. You still get a code editor, intelli-sense and it also integrates nicely with Firefox+Firebug. You can get Komodo Editor from here.

6. Eclipse + JSEclipse Plugin (Windows, Linux, Mac OS X)

JSEclipse is a nice plugin for Eclipse so if you’re already developing on Eclipse then this would be a natural choice. However, I should warn that since Adobe acquired Interakt, the company that made JSEclipse, active development has stopped on JSEclipse as of late December 2010. But still if you want to just try out writing JS then it will be a good start since it can easily integrate with Firefox+Firebug. When I say that it can integrate, what I mean is that you can use it’s source editor as a text editor for Firebug. Find out more about JSEclipse on here.

7. NetBeans (Windows, Linux, Mac OS X and Solaris)

NetBeans also has some great support for writing simple as well as complex JavaScript. It sports a source code editor with auto-complete and intelli-sense and a debugger that integrates well with Internet Explorer as well as Firefox. And just like Aptana Studio, it has extensive support for integrating popular AJAX, JS libraries like Yahoo! UI, Prototype, Script.aculo.us etc into your code. You can target your JS, in fact your complete app for the whole range of popular browsers and check separately for each browser right inside it. There’s a very nice tutorial on getting started with writing Web Services that would come in hand. You can view it here. Click here to read more about the JS support in the NetBeans IDE.

8. WebStorm (Windows, Linux, Mac OS X)

WebStorm by the JetBrains has to be the latest JavaScript IDE. It’s light-weight and sports a JS code editor, debugger (support for putting breakpoints, conditional breakpoints, step-in, step-over etc). You can also integrate Firebug with WebStorm to debug right inside Firefox. It also has good support for writing HTML5 and just like Aptana Studio you can connect to an FTP server to sync your scripts. I wish they had support for some popular Source Control plugins since without it we cannot write largeapplications. Find out more about WebStorm’s JavaScript support on here. You can try out the 45-day trial.