Ask HN: JavaScript dev environment ? | Hacker News Reader

Ask HN: JavaScript dev environment ?

49 pointsMurkin36 comments

I finally decided to dive deeper in JavaScript.

Move away from simple JS and Firebug debugging. To large and more complex software for the front-end and explore the new opportunities in the back-end (Node.js and such)

What I need is not just an editor (vim will do) but rather a full environement where I can edit, run, test and debug JavaScript.

All recommendations are welcome.

View on HN

I was actually looking into that over the last few days and haven't found anything satisfying yet.

I have tried Aptana, WebStorm (from Jet brains), textmate, bbedit, jseclipse, visual studio, vim. But still haven"t found what I am hoping to find.

I find the eclipse based solutions (Aptana and jseclipse) are too slow for my taste and while they do provide things like completion, it is fairly limited to the obvious things. Aptana probably does what you are looking for, it has a debugger that integrate with your browser.

I tought webstorm seemed better but it is also a bit slow and brings a bit too much with it. Give it a try it may be what you are looking it also has debugger integration.

I couldn't find any special editing facilities other than text highlighting and indentation in bbedit and eventually gave up. TextMate does it ok but since I am not that familiar with javascript and the libraries I am using, I was hoping for something that would let me edit and introspect things at the same time. its really comparable to what you could achieve with vim or emacs.

I've really enjoyed using Textmate with various JS bundles like Javascript Tools (comes with jslint, js beautify, and some snippets).

Regarding a "more full development environment," my good friend said the following to me:

IDEs can be nice, as they help you handle complicated code. On the other hand, they don't prevent you from writing complicated code in the first place.

I was more looking for a more complete IDE because I am not very familiar with javascript and JQuery and hope it would make looking up available functions easier.

I use emacs with jslint + flymake, js2 mode + espresso, it isnt perfect yet but its getting pretty close.

You can also use something like my js-comint mode (see http://js-comint-el.sourceforge.net/) to run code that isn't dom-ish in a js repl like spidermonkey or rhino from emacs. It's pretty sweet to be able to run an expression with C-x C-e and see how it works.

Thanks, I was looking for that.

What are people's opinions of ES4? I am using it to learn the good parts of Javascript. Is it recommended?

I use a combination of TextMate, d8 (v8 shell) and Sprockets (http://getsprockets.org). For debugging mostly Webkit's debugger.

You didn't specify the platform, but Visual Studio with Visual Assist X surprisingly makes for a really good JS editor. I've found it a lot faster and easier on my system than the larger Java-based JS editors (JSEclipse, Komodo etc).

It doesn't have integrated debugging, it costs a lot, and people won't believe you when you tell them about it, however.

Yeah, I like VisualStudio 2010 also, I know it's not a popular choice amongst HN'ers, but MS started as a Tools company and out of everything they make, I think their dev tools are actual quite good. I do a lot of JS/jQuery coding and it works reasonably well.

I'm curious about Visual Assist X - does it add more/better support for Javascript and/or jQuery?

I also use Aptana Studio on OSX when I do pure UI coding. It's not bad for pure JS/jQuery but their isn't much autocomplete support.

Edit: Side note on the cost of VisualStudio 2010 - I signed up for MS's BizSpark program and was given a free MSDN license including full copies of VisualStudio 2010, SQL 2008, etc.

For those purposes, Visual Studio is free: http://www.microsoft.com/express/Web/

IntelliJ IDEA (http://www.jetbrains.com/idea/) has good JavaScript support, including refactoring. I also quite like Komodo Edit (http://www.activestate.com/komodo-edit), since it's more lightweight but has JavaScript code completion & is easily extensible.

While you're looking at Node, I also suggest you take a look at RingoJS (http://ringojs.org/). It should be easier to get started with & has debugging support.

+1 for IntelliJ IDEA, js support is really superb.

This rather related to my startup in development. I hope to release this service soon.

Anyways, I use a decent editor (Notepad++ is a good one) for most code that doesn't need debugging (besides the good old trace statements) and for debugging I use eclipse.

In the latest version of Node.js (0.1.100) a console.log() was added.

What's wrong with Firebug? I fail to find a better alternative for JS debugging.

I have run into problems in the past caused by forgetting to remove console.log() lines from my scripts. If the console wasn't open, then the scripts didn't work.

This isn't a huge problem or reason not to use Firebug (which I would be totally lost without), just something to be wary of.

    if(!console)console={log:function(){}};

You're welcome.

This will throw if console is not defined. Try

   if (!window.console)

   if (typeof console == 'undefined')

   if !('console' in window))

 N

Doesn't here. What are you using?

My solution to this issue was to write a console2.log helper function and call that instead of the original console.log:

  var console2 = {
   log: function(msg){
    if(typeof console != 'undefined'){
     console.log(msg);
    }
   }
  }

You can solve(?) this by creating a dummy console.log object when one isn't already present, then throwing away all of the output.

if(!window.console){window.console = {};} if(!(toString(window.console.log) === '[object Function]')) {window.console.log = function(){};}

there, fixed..

This won't work in node. That's not a huge deal, but it's pretty simple to come up with a cleaner solution that works in all environments.

if (window.console) console.log(...);

That really should be built in to console.log.

I may not be entirely sober yet but I believe the problem at hand is what happens when window.console isn't defined at all.

It can be, but only if console.log is defined in your source code. It isn't when you use Firebug, so it won't be when you're not using Firebug.

Chrome Dev Tools.

Yea those have some fancy live JS editing capability, where you can edit the JS, it runs the code with the changes but without restarting the whole program.

http://www.youtube.com/watch?v=TH7sJbyXHuk

Last time I used firebugs you couldn't really edit files in it, it was also missing many goodies for easily browsing code or code completion.

Use JsTestDriver to write and run your tests.

One of my pet projects is open source and tested with JsTestDriver [1], that should be a good starting point for learning more about how to test JavaScript in webapps.

I also like to use Sinon [2] for stubbing and mocking. The author of Sinon is also putting the finishing touches on a book about TDD-ing JavaScript.

EDIT: calendar-logic.js [4] an example of how you can extract and test logic in separate libraries. It's being used on figureoutwhen.com.

[1] http://github.com/augustl/figureoutwhen.com [2] http://cjohansen.no/sinon/ [3] http://www.amazon.com/Test-Driven-JavaScript-Development-Dev... [4] http://ditrw.com/calendar-logic-dot-js/

I have been enjoying WebStorm. BTW: it'll do Zen Coding[1]. That's a plus!

[1]: http://code.google.com/p/zen-coding/

This is what works for me:

3 screens: 1 with two windows for editing code, 1 to run Chrome and 1 for Chrome Dev Tools. Overkill? Nope, good to see it all in context.

I modularize code (bottom up dev style) and test each class / function before integrating with code body. Chrome Dev Tools is fantastic for tracking down CSS cascade probs, etc.

Other tools: Vim, Rhino book and www.w3schools.com for references. I develop only for Chrome / Safari (some FireFox) so can't suggest as for IE, Opera, etc.

I use the Google chrome developer tools. Highly recommended!

Most of the JS pros I know just use vim/emacs + FireBug.

What has complex got to do with the editor? Maybe it would help a bit. But if you design the codebase to be modular, you have only a little part of the code to worry about at a time, so you can use your current editor setup. :)

emacs with espresso mode; rhinounit.

Reply on news.ycombinator.com