21

Possible Duplicate:
IDE for JavaScript development

I want to teach myself HTML5 and Javascript (or if not Javascript, whatever the preferred technology is for manipulating HTML 5 and the DOM these days). Can anyone recommend a good development environment for this (on a Windows 7 PC)? I can make a start with notepad and Google chrome, but I was kind-of hoping a developer friendly IDE exists for this kind of thing.

Also, as a follow up question, is Javascript THE way to manipulated the DOM, or is there some other technology out there I don't know about that's superior and supported across the board?

Thanks.

Edit: Ok, I would like to expand the scenario somewhat, because I didn't really put the question into context. I'm interested in designing and writing GUI components with HTML5/Canvass. I already do this for a living with native development and wanted to extend my skills onto the web, so I've still got that base covered from a skills point of view. So my goal here is to provide some "drag and drop" (not an appropriate metaphor for web development I'm sure) components that others can use. I'm assuing HTML5/Javascript is the way to go, but I'm used to a good debugger, so was kind-of hoping to have that ability too. I'm not sure if browsers support this in any reasonable sense - but an embedded browser in a specialised IDE might.

4

5 Answers 5

12

Check out Aptana (http://www.aptana.com/). It's free and has almost everything you will ever need as well as an awesome debugger.

Also, grab yourself a copy of FireFox with FireBug extension. It's amazing for real time debugging in the browser and allows you to make changes to live code to see how it might look/work if you actually coded it that way.

Hope this helps!

Jeffrey Kevin Pry

5

It's a tricky question to answer as it's very much down to personal preference.

It sounds as though you are starting out, so to guess a couple of requirements I'm guessing you'll probably want it to be free (or cheap), easy to use, easy to install?

If so I'd reccomend checking out either Mirosoft WebMatrix or Visual Studio Web Developer Express.

Both are free, WebMatrix is geard towards early learning. So I'd suggest starting with WebMatrix.

Visual Studio Web Developer Express is more complex, but I'd recommend using this if you're planning to become a professional web developer as it's very similar to Visual Studio Professional.

Web Developer Express has intellisense (auto complete) for html and javascript and since sp1 (I think automatically installed) also includes support for HTML5. I believe WebMatrix does as well, but probably not as sophisticated intellisense.

I'd especially recommend these tools if you are later planing to learn ASP.net.

Both can be very easily installed using the web platform installer via this site: http://www.microsoft.com/web/platform/tools.aspx


EDIT: My mistake, I thought Robinson was a beginer to development (I was very wrong!) :-) Instead just getting back into the web side of things.

If you're looking for a full blown IDE; debugger / web server / intellisense / live(ish) preview of changes etc etc and perhaps in the future thinking of ASP.net: I'd reccomend Visual Studio Web Developer Express.

6
  • Note quite. I'm a native app developer and have been for 10 years :p. I wasn't too sure what the deal was with web development these days as I haven't done any for... about 10 years.
    – Robinson
    Jun 28, 2011 at 11:25
  • Ha ha @Robinson, I was a bit off! I'll update my answer! Are Jun 28, 2011 at 12:09
  • Also, I've got Visual Studio 2010 Professional - but it only has templates for ASP projects. What is the difference between Web Developer Express and 2010?
    – Robinson
    Jun 28, 2011 at 14:49
  • 1
    @Robinson Ah I see, that changes everything :-) Visual Studio 2010 Proffessional has everything that Web Developer Express has. You can add plain HTML/JavaScript pages straight in the ASP.net projects / website projects. These project templates have the benifit of launching with the built in webserver with no configuration. Or you can simply create individual html files if you don't want any ASP.net. If you haven't done so already install SP1 as it'll add HTML5 support. Seeing as your already more than familer with VS, I wouldn't consider another IDE. Jun 28, 2011 at 15:03
  • Ok, that makes sense. I probably just use that then.
    – Robinson
    Jun 28, 2011 at 15:14
2

I suppose, technically if you're just coding HTML and JavaScript then any IDE or text editor would do, even Notepad. You can save files locally and everything would work because HTML and JS don't require a server to run anything, just a browser.

One thing to note is, if you're using ajax at all in your development environment you may get one or two issues with cross-domain scripting errors. I'm not sure if this is still an issue with the latest versions of jQuery (which I'd recommend using a basis framework for your javascript) but I remember it always used to be.

As for IDE, there are so many choices out there it really is probably a case of trying a few and seeing which you like. I would recommend Aptana Studio for the JS/HTML side of things because I've always found to be well-highlighted and easy to use, plus has good control over project management. Plus it's free and open source, so you can't really go wrong.

Edit: Oh, Sencha (as posted here too) is also a really good choice!

And, in answer to your follow-up question: yes, JavasScript is the way to go for DOM manipulation, especially when you use a framework like jQuery that has all the hard cross-browser stuff built in and just works out of the box. On top of that you have 1000's of plug-ins at your disposable to make everything nice and easy :-)

1
  • 2
    @Alex... Notepad isn't an IDE, it's a text editor. IDEs have different features than text editors. Jun 28, 2011 at 11:19
2

HTML5/Javascript framework : I would recommend Sencha . I've used extjs library in the past which is part of this framework now. The tool set is also useful.

IDE : Eclipse or Aptana IDE (both are free)

Also see this question on SO : Any good, visual HTML5 Editor or IDE?

1

To answer the follow up first. Yes. JavaScript is the way to manipulate the DOM.
Not that it is the only way to parse a DOM, but it is the only widely accepted way to do it in a browser. That goes for both desktop versions as well as the mobile browsers.

As for IDE's. I personally use a mix of Visual Studio 2010( it actually has good support for both HTML5 and JavaScript, JQuery included), Monodevelop, JsFiddle.net. And Firefox with Firebug for debugging.

Not the answer you're looking for? Browse other questions tagged or ask your own question.