Designer friendly JSP/Servlet web development in both Windows and Linux (Ubuntu, et. al.)

Question

I'm a front-end developer for my college JSP project and so far I was using Sublime Text 2 for writing markup and my CSS/Less and ran the project directly from Apache Tomcat configured manually where I placed my project directory in webapps folder, but later, the project required to use Servlets (obviously) and I realized the need of IDE, while my colleagues at the development part are now insisting to use IDE.

We have ported the entire project to NetBeans 7.1.1 and so far, project works fine and NetBeans takes care of all the hassle of creating/managing Servlets and its web.xml configurations, but I mainly deal with the markup and Less, which is real tedious here. Following are the issues I face:

• Less file is not syntax-highlighted at all. (although I referred this way of adding Syntax highlight to .less files).

• Every time I make a change to markup or CSS, I need to hit F5 and wait till a new tab launches in browser to reflect the changes. (Refreshing page in the browser doesn't work as it used to work in my older way of JSP development). Imagine 10 tabs for 10 changes if I don't close the tab after I see.

• I've used jQuery a lot, and it really annoys me to see warnings in my .js files (I know NetBeans might be pointing to correct issues, but I simply don't want it to be "over-smart" with my code).

• A Web designer would know how frequent it is to "save-changes-to-css-and-refresh-page-in-browser". And the IDE just slows down this whole process.

I know the obvious advantages of using IDE, but is there any fix for above issues?

Also, I tried porting my project to Eclipse (and it just went crazy on minified jQuery files), before turning to NetBeans, but it just refused to use relative paths for my .js,.css and .less in <script> and <alt> tags, even though all the files and folders existed within Web-Content directory. And all I got was 404 errors for my scripts and stylesheets, in spite the fact that I could access those files my manually visiting to URL. As follows:

<link rel="stylesheet/less" href="less/styles.less" media="all" />
<!-- Above line doesn't include the file and I get 404 error -->

but

Visiting to localhost:8080/MyProject/less/styles.less 
   shows me its content in the browser.

Also, I tried to work with Servlets without using IDE (my Java code is simple such that I don't feel any need of IntelliSense-like editing) and refered this link, and ya it works if I do it in the same way as explained, but I don't get why I need to specify servlet-api.jar of apache-tomcat\lib in classpath at the time of compilation inspite the fact that I have path to Apache's lib folder already added to CLASSPATH variable in Windows.

I know there are too many questions within this single question that it is likely to be "moderated-out" by SO moderators but my all questions hint to a single problem of having to develop JSP/Servlets and designing the pages without using IDE, and just fairly capable text-editor AKA Sublime Text.

Please suggest me a firm solution.

Answer 1

I believe you will ultimately gain from using an IDE for Java web application development (e.g. NetBeans) in the long run although changing to new tools is never easy.

NetBeans is a good text editor for HTML, JavaScript and CSS. It provides syntax highlighting, formating, code completion, inline documentation, previews for CSS colors/effects and validation.

NetBeans can easily be configured to deploy to a Tomcat instance running on your machine. After which time any editing of HTML, JSPs and CSS within NetBeans is usually automatically reflected in your running application (requiring only an F5 page refresh).

There are situations when CSS changes will not be automatically reflected in the running application.

• if you are minifying the CSS during your build process, so your browser is loading a minified version of your CSS (e.g. using the YUI compressor, best to leave using this until after you have finished the CSS development).
• if you are using some kind of CSS file caching filters. e.g. you are explicitly setting an expiry header for the CSS file and thus causing the browser to cache the CSS for a period of time.
• You can edit your JS/CSS in an external editor, NetBeans does a pretty good job of detecting changes made by external editors but sometimes it doesn't detect these unless the most recent change has been made inside the NetBeans editor itself.

Since you are not experiencing instant update I would assume this is an issue with your usage of LESS rather than due to NetBeans itself.

I've not used LESS myself but found a solution at Quick tip: LESS.js in development and watch mode, apparently if you are running less.js in a HTML5 browser local storage will be used to cache the generated CSS. This is a good feature for normal usage but not something you want when you are developing your CSS as you will not immediately see the results of your CSS changes. The solution is to use LESS's watch and development modes. Watch mode enables your CSS to be refreshed automatically (no need to hit F5) and development mode will prevent the CSS from being cached.

You can enable watch mode by adding the following JavaScript after your less stylesheets and less.js script is loaded.

<script type="text/javascript">
     less.env = "development";
     less.watch();
</script>

If you think NetBeans is being too smart about your JavaScript you should see what JSLint would make of it! It can be a little soul destroying to run too many quality tools against your code, that said I always use the Firefox HTML Validator extension (I live to see the green ticks!). The NetBeans warnings may look a little scary but it is only trying to keep you standards compliant to help you avoid problems further down the line.

I was a little concerned when I saw your phrase "ported the entire project to NetBeans 7.1.1", personally I would advise that your project should be built using a build tool that was IDE agnostic (such as Ant or Maven). NetBeans has very good support for both of these tools, I'm a big Maven fan myself. Using these build tools would mean you could avoid using an IDE and build your instance of the application using the command line instead.

Incidentally, I would hope you are using a version control system such as Git or Subversion to share project file changes, IDEs also make it easy to work with version control systems.

In relation to your other question. Apache and Apache Tomcat are two different types of server software. Often Apache server is installed in front of a Tomcat server. When compiling a Servlet your Java compiler will need access to a copy of servlet-api.jar. Tomcat's lib directory contains Java library files (e.g. servlet-api.jar), the Apache's lib directory will contain compiled C libraries used by the Apache native executables rather than Java library files (these are different types of library for different purposes).