How do you stay on top of a complex JavaScript pro

Question

I'm using Firebug to help figure out what's going on in my JavaScript (+JQuery) code. I'm mainly using it to print out tons of console.log statements. This is probably not the most efficient way to stay on top of the project. As it has grown from just a few functions to over a hundred I am starting to get confused about how everything fits together. I mean, it works somehow but when I look at the code now I almost feel like someone else wrote it because it's so confusing.

Now I have a crazy amount of console.log statements appearing in the console whenever I run my app in Firebug and I've been leaving it there because I always end up recreating it whenver I take some of it out. This is making things even more confusing, I think, than if I had no logging at all. I never really explored real debugging - breakpoints, watch variables, etc - would that be a good way to regain control of this project or are there any other tools that might help?

I've thought about trying to draw a diagram of all of my CSS and try to map out the classes and IDs to the corresponding functions in my JavaScript. This project uses a lot of rich interaction and show/hide functionality based on a complex set of combinations of application states, closer to what you would find in a Flash/Flex application perhaps.

Any suggestions for tools or approaches that might help to regain control of this project would be appreciated. When I started this project I felt really good about it because it looked so good and people would give me compliments on how cool it was but now it just feels like a failure because I don't think I could even explain how it works in a job interview if I had to.

Answer 1

You might want to think about using GWT.

• Superior support.
• Classes
• Ability to refactoring.
• No name space conventions - use packages.

For a more comprehensive list of "reasons" read those given by the GWT team.

Answer 2

Any time a program starts to slip away from you you need to stop and take a close look at how to break it into pieces. Think about breaking the js into separate files so you don't have to keep the whole thing in your head at once. Anything you can treat as "done" can be made into an interface where you don't care about the guts of it anymore.

It's all about hiding the mess. Whether it's OO or procedural. Many people have the same problem with PHP and C as you are having with JavaScript, so you can search for "PHP spaghetti" and get some good tips.

Answer 3

Use a good JavaScript debugger like Firebug and the debugger statement to add breakpoints to your JavaScript. Just be careful to remove them after you're done.

Answer 4

You might want to invesigate introducing actual unit tests into your code. There are a variety of javacscript unit test platforms available, such as fireunit. If your already have FireBug installed this is a pretty short jump to the happy comfort zone!

Give it a shot, even small amounts of unit test coverage will help ease your mind!

Answer 5

Keep your code organized. Use namespaces to break it down into logical modules. It might also be wise to look for common interaction patterns and develop generic reusable code.

I try to write every new feature as a jQuery plugin. That forces me to write reusable code that is not so coupled with the style and markup.

Answer 6

If it's getting too complex you are doing too much so keep it simple (ie: break it into manageable and reusable chunks so instead of having one Titanic you have many compact lifeboats). This might be the best non-technical advice anyone can give you--and it's valid.