How do you stay on top of a complex JavaScript project?

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

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.

Answer 2

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 3

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 4

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 5

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 6

Hi, I worked in a Web2.0 with many javaScript and etc.. I`ll give some tips that helped me:

Try aptana, help with code complete,validations, etc. (have ext-je,Jquery plugins)

Try JSLint, helps me allot to solve problems specially when dealing with Internet Explorer.

Try YSlow to see your site grades.

Try WATIR, tool that you could create many test cases like: clicking anywhere wait some text appear some where, write some string to some field, generate logs.

Remember to put Id`s in everywhere that you could.

Define a code conventions could help. (link1 - link2)

[Updating] I was looking in my bookmark and found a very great video about: Maintainable JavaScript take a look.

Hope these simple tips could help!

Cheers!

Answer 7

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 8

One thing that helped me get a handle on a complex JavaScript code base that I inherited was the AOP package in dojo.. Using it, you can get a nicely formatted execution path of your code (kind of like Firebug's profile but in a list in the order the methods were invoked).

I don't know if jQuery has something similar but it might be worth looking into because it beats the snot out of littering your code base with log statements that you may (or may not depending) have to remove.

Once you know how things are working, you can go about re-organizing it using some of the excellent tips here.