What is in your JavaScript toolchain? [closed]

Question

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.

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.

• 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

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.

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.

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

Web Tech has moved along a bit so I thought I'd mention some nice modern tools and frameworks for anyone seeing this question in 2017.

What editor and editor plugins/modes/scripts do you use?

Atom is my text editor of choice and as I'm in the MS ecosystem, Visual Studio 2013 is the IDE I use, though I avoid VS for JavaScript development. I do virtually all of my JavaScript development exclusively with Atom wherever I can though.

I have a fair few plugins which help my work flow.

• atom-beautify which I use to clean up any styling issues I might introduce, it does this on save so makes things easy for me as I save and check-in often.
• atom-easy-jsdoc which allows me to insert jsdoc comments using a hotkey combo, this is great as it lets me automatically generate documentation for code, especially useful for API development.
• atom-ternjs is the package I use for JavaScript code completion, I don't need this often but it is handy to have.
• minimap is a plugin that allows me to see a low detail outline of all the code in a particular document, I find it easier to use than scrollbars. YMMV.
• pigments is a plugin that renders colors when it detects hex colors in CSS behind the text. Useful if you need to adjust and see the result quickly.

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

See above :)

What JavaScript libraries or frameworks do you use?

I tend to use RequireJS for home projects and an in-house module loader at work. I don't generally use libraries and frameworks in my projects, though when I do I'm quite partial to AngularJS (1.x). It all depends on what I'm doing.

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

Nope.

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 use Node.js with Karma test runner as the test runner (who'da thunk it?), Jasmine as my test Framework and sinonJS as my stubbing/mocking library for test development.

Karma can be configured to watch the file system for changes (or a task runner like grunt with file watching plugins works too) and I have it execute all my tests each time a file is saved. It has the added benefit of being able to run your tests against multiple browsers concurrently. So it'll test JS against IE, Edge, Chrome, Firefox, PhantomJS etc... Which is extremely useful.

I have my js projects setup to run grunt tasks. I typically just execute 'grunt devmode' from a command prompt / terminal and that's it, my tests run. For Continuous Integration on commit I have a separate grunt task that only runs the tests once. For home use I have TravisCI run that task whenever a push occurs.

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

I use JSHint as it's less picky than JSLint. For code coverage I use Istanbul which incidentally runs whenever my unit tests run, which is super useful.

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

I use whichever Web Browser is having problems. If it's server side, e.g. Node, I use node-debugger as I can debug straight from Atom.

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

I generally don't do this, that said for web projects ideally a minifier and uglifier.

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.

Yep! I use the RequireJS AMD implementation. I use npm as my package manager of choice, although if I'm using Visual Studio, I'll use nuget.

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)?

Not quite sure I understand the question, but I use Git for home projects as and TFS at work, GitHub as my repo host, TravisCI for continuous integration and Coveralls (code coverage reporter for Git repositories).