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

• Editor: Notepad or any other text editor with syntax highlighting

• IDE: can be Dreamweaver, Aptana, Netbeans - up to your personal preference.

• Javascript Framework: I'm more used to jQuery and I still recommend jQuery.
  you can look into adding some "plugins" to jQuery. some are really cool. like Facebox (http://famspam.com/facebox) - a jQuery Facebook-like popup box which is easy to use. or jQuery Cookie plugin

• Debugging: Firebug (FireCookie, Page Speed, YSlow) - no integration with IDE but is magic on the browser. If you need cross browser debugging, you can go for Firebug Lite.

  You can easily use console.log() to debug instead of alert (especially when you are doing javascript with great amount of callback, timers, AJAX and so on. You don't want an alert statement to break the way it should originally be.

• Post-processing: Packer - http://dean.edwards.name/packer/

Answer 2

I haven't written anything huge in Javascript yet (about 3000 lines in my latest project), but I do JSLint my code and minify/combine it with all the libraries I need in my deploy/build script. My build script also changes the HTML from importing the scripts and libraries directly, to importing the production compressed code. That way you don't have to run the build script to see changes in development which is essential.

YUI Compressor is pretty slow, especially since it starts up the JVM to run, but it gets the job done. Some kind of minification in your deploy script is essential to get rid of all the comments, and if you avoid global variables you'll get a meaningful amount of identifier name length compression too, though not much benefit after gzip. Possibly you'll want another step to remove console.debug lines and other debugging code.

For debugging, FireBug. I'm sure the webkit debugger is fine too.

For developing, vim with an improved js indent script and ctags with some js modifications. I'm not sure what advantages a real IDE has but I'm sure there are some. Vim doesn't do syntax highlighting of HTML inside javascript strings by default, but apparently it can be configured to.

JSLint runs in Rhino easily, but spidermonkey gets done about 3x as fast since it doesn't need to start up the JVM. Crockford doesn't support that arrangement but I managed to get it working somehow.

Answer 3

I'm on a slightly different technology stack (asp.net mvc), but here it goes:

• IDE: Visual Studio 2008 + ReSharper, Asp.Net MVC
• Editor: Notepad++ (most of my time is in VS, but Notepad++ has better syntax highlighting for JavaScript)
• Dev Browser: FireFox+Firebug+YSlow+PageSpeed+FireCookie Also add Developer Toolbar
• Other Browsers: IE8, Chrome 3, Safari, Opera (rarely used), and IE6 and IE7 via virtual machines (freely downloadable Virtual PC images from Microsoft).
• Post-Processing: JLint and YUI Compressor. I have a build task do the YUI compressor part.
• JavaScript Framework: JQuery + JQuery UI
• Other stuff: JQuery Validation, JSON2

Answer 4

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.

Answer 5

• IntelliJ IDEA/RubyMine for editing.
• jQuery + Plugins because of its similarity to Ruby
• Do you use any of the languages that compile to JavaScript (GWT, haxe, Objective-J)?
• JSUnit with Blue Ridge (Rails package), but rely more upon Selenium tests
• No code quality tools beyond pair programming and tests
• Debug with Firebug mostly
• Rely upon gzip compression to reduce space
• Create lots of small modular JS files
• Use rails to statically combine and automatically include these files as needed. This is custom code, but I've blogged about it. This allows you to keep things modular as development grows
• Build quite a few jQuery plugins to manage widgets on the site

Answer 6

Just started using RubyMine as a JavaScript IDE, purely for the JavaScript support, which is pretty good. It's the same as that in IntelliJ IDEA.

For debugging, Firebug is an obvious must-have, though it has gone downhill a little recently in my opinion. I tend to use logging more than a debugger, so I find log4javascript very useful (though I should probably point out that I did write it). I also use WebKit's inspector thingy and IE 8's debugger occasionally, and Visual Studio's debugger with earlier versions of IE.

For code quality, I use JSLint manually and occasionally since I disagree with some of its recommendations. RubyMine/IntelliJ also has tons of JS "inspections" that analyze your code as you write it and generate warnings next to your code, which I find useful.

I tend to develop on a few development pages that include individual, unminified scripts and when creating a build, I run a build script (my own, written in Ant) that checks out my code from version control, concatenates individual scripts, removes logging and debugging calls, minifies/compresses (using JSMin or YUICompressor) the code, and runs unit tests. My unit testing script is my own and is nothing massively fancy.

It works reasonably well but isn't perfect.

Answer 7

Google wave is powered by GWT so it seems to be a good option for bigger apps.

Answer 8

At the time of asking this question, Google’s closure compiler was not in contention.
This is a seriously good tool that minimifies JavaScript better than many others out there. You can run it with page speed to analyze existing websites. It has a lot of other functionality built into it,like detecting dead code, references etc.

Answer 9

I use Dashcode to develop Mac Widgets and for that it is "ok" and has a lot of widget orientated features but for everything else, TextMate