What is in your JavaScript toolchain?

Question

I am looking to start writing a sophisticated application in JavaScript to run on the web. I've written little bits of throwaway code in JavaScript before, using the DOM directly and a little bit of jQuery. But this is the first time I'm looking to write a full-fledged application to run in the browser.

So, I'm wondering what toolchains people prefer for doing serious development in JavaScript. In particular, I'm interested in the following, along with some information about why you chose the components you did and how they all fit together into your workflow:

• What editor and editor plugins/modes/scripts do you use? I'm generally an Emacs user, and am using js2.el at the moment, but I'm interested in hearing about other setups.
• Do you use any sort of IDE (Aptana, Dashcode, or the like)?
• What JavaScript libraries or frameworks do you use?
• Do you use any of the languages that compile to JavaScript (GWT, haxe, Objective-J)?
• What unit test frameworks do you use? How do you invoke them? Can they be invoked from your editor/IDE, from the command line, from the browser in a web page, from your JavaScript debugger?
• What automated user interface testing tools do you use (such as Selenium, Watir, Sahi)? Again, how can these be invoked? (Being able to invoke unit tests and interface tests from the command line would be very useful, for running buildbots)
• What other code quality tools do you use (JSlint, code coverage tools, or anything of the sort)?
• What do you use for your debugging environment (Firebug, WebKit inspector, etc)? Does it have any integration with your editor or IDE?
• What post-processing do you run on your code before deploying it (obfuscators, minifiers, any kind of optimizers)?
• Do you have any sort of tools for managing module dependencies or dynamically loading code as it's needed? The application I'm writing will be working with a large amount of code, and I would like to keep load times down, so tools for tracking what modules are needed or loading code on demand would be helpful.
• Are there any other essential tools in your toolchain (which are specific to JavaScript development for browser based applications; I already have a perfectly good version control system, bug tracker, etc)?

I'm less interested here in lists of "here are a bunch of things you could use" (I know of a lot of the tools that are available), and more in the stack that you actually use in practice and how it all fits together. I'm hoping to develop this primarily as a client side application, with the server just being used for authentication and to store and retrieve data, so I'm not interested in what server side framework you use, unless it is integral to the client side code in some way.

edit: I'm particularly interested in the unit and user interface testing frameworks, and how you automate them. I prefer to be able to run one single "make test" or "rake test" task from the command line to run all tests for the projects, and have it return a status depending on the success or failure of the tests. This would allow much easier integration with buildbots. Also, I'm interested if anyone writes unit tests that can be run outside of a browser (in Rhino, spidermonkey, v8, or the like) for code that don't depend on the browser, for faster turnaround on a subset of your tests.

Answer 1

What editor and editor plugins/modes/scripts do you use? I'm generally an Emacs user, and am using js2.el at the moment, but I'm interested in hearing about other setups.

I generally use Textmate (with the JavaScript, jQuery, and Prototype bundles). When doing heavy front-end development, where I'm tabbing rapidly between HTML, CSS, and JavaScript files, I'll opt for vim's split panel views. When doing so, I either use macvim or Terminal + Visor, depending on my mood. Obviously, I'm a Mac user.

Do you use any sort of IDE (Aptana, Dashcode, or the like)?

No. I used to use Coda, but its text editor features leave much to be desired. I've also toyed with Espresso, which is interesting...but meh.

What JavaScript libraries or frameworks do you use?

I use both jQuery and Prototype, depending on the project's needs. To illustrate each respective framework's strengths, I like to refer to jQuery as a DOM manipulation framework and Prototype a scripting framework. Accordingly, I tend to use jQuery on projects which focus on markup and Prototype on more heavily-scripted, application-type projects.

Do you use any of the languages that compile to JavaScript (GWT, haxe, Objective-J)?

Absolutely not - I have philosophical gripes with such frameworks. Unlike server-side code, front-end code is being run in the user's browser, in an environment that you cannot control. As such, I see it to be a JavaScript developer's responsibility to produce the best code possible. Suboptimal code can have performance ramifications, and the JavaScript compiled by languages like Objective-J (which is the only one from your list that I've used) will never be as tight as code produced by a strong JavaScript developer.

What unit test frameworks do you use? How do you invoke them? Can they be invoked from your editor/IDE, from the command line, from the browser in a web page, from your JavaScript debugger?

I'm a huge fan of QUnit, the jQuery unit testing framework. Dojo's DOH Unit Testing is also nice.

Don't miss FireUnit, a nifty Firebug extension for unit testing.

Also see Razor.

What automated user interface testing tools do you use (such as Selenium, Watir, Sahi)? Again, how can these be invoked? (Being able to invoke unit tests and interface tests from the command line would be very useful, for running buildbots)

When necessary I use Selenium, but this is rare.

What other code quality tools do you use (JSlint, code coverage tools, or anything of the sort)?

I use and love JSLint.

Firebug has a nice code coverage extension, and HRCov is widely considered to be the best of breed. I don't find much use for code coverage in most of my day-to-day JavaScript work.

What do you use for your debugging environment (Firebug, WebKit inspector, etc)? Does it have any integration with your editor or IDE?

As far as I'm concerned, Firebug is the killer app for JavaScript development. Some useful debugging features:

• Variable tooltips
• Breakpoints and conditional breakpoints
• Performance profiler
• An extremely nifty console API
• Watch expressions
• Stack traces
• Useful plugins like Jiffy, FireCookie, and FireQuery.

WebKit Inspector is nice, as is DragonFly, and Debug Bar is useful for tracking down IE bugs...but FireBug is the one for me.

What post-processing do you run on your code before deploying it (obfuscators, minifiers, any kind of optimizers)?

I very intentionally do not use any post-processing tools -- one of the great aspects of JavaScript is its openness, and I'd hate to make it more difficult for fledgling JavaScript developers to learn from my work. Not to mention that it's extremely simple to reconstruct obfuscated JavaScript.

There has only been one instance where I've needed to minify JavaScript to save bandwidth. In that case, I set up an SVN post-commit hook to run Doug Crockford's excellent JSMin.

Are there any other essential tools in your toolchain (which are specific to JavaScript development for browser based applications; I already have a perfectly good version control system, bug tracker, etc)?

• The alert() function ;)
• Also, a nice JSON validator is useful.
• Visual Event is useful for event debugging
• jsfuzzer, for fuzzing
• I've not needed to use it, but Crosscheck is in my toolkit.