Keeping a web app project organized?

Question

Hi,

I'm writing a web app, using jsp to create the page content. I need a pretty good amount of javascript to make the app work. Does anyone have any recommendations on how to structure my project, such that it doesn't become a mess?

This is a broad question, but the basic problem is that I'm insert javascript code directly into my jsp content. Then I might have some external js files. Ids and such are strewn between multiple files. I'm not really sure what a best practice is for keeping this type of project organized. Do you always keep your javascript in separate files? There has to be a few hooks in the jsp pages though for them, right?

I tried using GWT because I'm really a c/java developer, and I was hoping it would help keep my project more organized (definitely helps) - but GWT is a pain to use with jsp, it really wants you to do all UI generation client side after the page is done loading, doesn't work for what I need to do.

Again, broad question, any tips would be great,

Thanks

Answer 1

JavaScript should be unobtrusive. That means that you use your JavaScript like CSS - target selectors on the page. The only 'hooks' you need are HTML classes and ids.

So keep all your JavaScript in separate files. It doesn't matter if you have it all in one file or in separate files, whatever works for you. This isn't quite true, there are technical reasons why you might choose one JavaScript file or lots of separate ones, but probably for now organise the files so they make sense. You can always use a tool to compile all your JavaScript into one file and minify it at the same time.

Answer 2

Put page-specific code (event handlers) inside the .jsp files, at the bottom, in an unobtrusive way (like Skilldrick) suggested.

Put general purpose methods (those reused in several .jsp files) in one (or more) javascript file(s) that you will link using . Try to find patterns in javascript code and create reusable library methods/components.

Answer 3

Use Enterprise Architect, Visio or some other software to architect your application (you might already be familiar with the MVC concept from the Java world). Make sure you put your JS functions into logical components. Each of these components will be a JavaScript file. Takes a little bit more time upfront, but you'll save a headache further down the line.