Thursday, March 20, 2008

NetBeans 6.1: A JavaScript IDE

I have started using NetBeans 6.1 (beta) and have found its JavaScript support to be welcome and helpful. JavaScript and DOM differences among the major browsers have long been a source of deep consternation for web developers and NetBeans does much to deal with browser idiosyncrasies. In this blog entry, I will demonstrate some of these NetBeans JavaScript functions.

One frustration of working with JavaScript and DOM across different browser implementations is the availability of objects and methods in one browser but not another. NetBeans auto-completion feature for JavaScript/DOM really helps here. The next screen snapshot (click on all screen snapshots to see larger versions) displays the auto-completion popup for the document object and the getElementById method that returns a Document.



The line through the getElementById method may look familiar to Java developers as used to indicate a deprecated Java method. In this case, it indicates that one or more of my targeted web browsers does not support this method. The auto-completion popup clearly shows that Internet Explorer 5.5 and Internet Explorer 6 are my "targeted browsers" that do not support this particular method.

The "targeted browsers" idea is useful because there may be situations in which we have the luxury of knowing which browsers we must support or, better yet, which we don't need to support. If we don't need to support a particular browser, that is one more source of potential inconsistency we do not need to worry about.

It is easy in NetBeans 6.1 to specify the targeted browsers. This is done by selecting Tools -> JavaScript Browser Compatibility from the top menu bar of NetBeans. This is shown in the next screen snapshot.



With a click on "JavaScript Browser Compatibility" from the "Tools" drop-down, one is taken to the "Choose Supported Browsers" window. The next screen snapshot shows this window, which indicates that Microsoft Internet Explorer 5.5 and later versions are targeted browsers. If I select "7 and later" (as shown in the next screen snapshot), then Microsoft Internet Explorer 5.5 and 6 are no longer considered my targeted browsers.



With the targeted browsers now only including Microsoft Internet Explorer versions 7 or later, the same auto-completion for document.getElementById no longer shows the method struck out and also does not list any targeted browsers not supporting it. This is because I removed the browser versions that did not support this method from my targeted browsers. See this in the next screen snapshot.



In the process of demonstrating the ability of NetBeans to provide browser compatibility information, my examples also showed how easy it is to use JavaScript method completion in exactly the same way one would use Java method completion in NetBeans.

Another advantage we take for granted with Java IDEs is color-coded syntax. NetBeans 6.1 provides this for JavaScript as shown in the next Hello World example.



With Java IDEs, we have become accustomed to the IDE warning us about problems that may not break compilation, but are likely not what we really want either. NetBeans 6.1 brings this ability to JavaScript. In the next screen snapshot, we can see that NetBeans warns us about an assignment operator that is most likely supposed to be an equality comparison.



Another example of one of these warnings follows, this time demonstrating a warning that the given function will return a value in some cases, but not in all cases.



Of course, while warnings about things that compile but are probably not intended is nice, but it is also nice to know about syntax problems before trying to run the JavaScript application. A JavaScript IDE may never be able to do this as well as a Java IDE due to Java's static typing, but NetBeans 6.1 does provide feedback on definitive errors that cannot be due to dynamic typing. This is demonstrated in the next screen snapshot that shows a curly brace missing. It is nice to see this before trying to run the web application using this JavaScript.



My final example for this blog entry shows a double message with an error message about using a reserved keyword ("double") and a warning message about a declaration that doesn't do anything ("no side effects").



There are many reasons that I have always preferred Java over JavaScript and one of these has been the vastly superior tooling (especially IDEs) for Java. However, with NetBeans 6.1, that gap has been narrowed considerably. With NetBeans 6.1, development of Ajax/DHTML applications and other web applications should be considerably easier. I also look forward to taking advantage of this NetBeans 6.1 JavaScript support with my OpenLaszlo development.

More details on NetBeans 6.1's new JavaScript support features can be found in this NetBeans wiki.

By the way, as you've likely heard by now, there is a NetBeans IDE 6.1 Beta Blogging Contest that ends on April 19. This blog entry has been submitted as an entry into that contest.

1 comment:

Neil's netbeans stuff said...

Check out my blog if you are interested in minified javascript/css files in your nb6.1 builds.

http://nnbs.blogspot.com/