How do we structure our JavaScript so that it is easily editable, testable, and can make calls to render a view without knowing specifics about it?

Question

I am working on a web application that displays some data and uses JavaScript.

Right now, we are serving up parts of our JavaScript code (to display certain types of information, that is, "Render a View") via our server which dynamically writes the JavaScript code with the needed data embedded in it using JSPs.

Three main points/ requirements we need to consider are:

• We need to be able to easily edit our JavaScript code (spread through multiple files right now with global variables). We can't edit anything without maybe (no testing framework) breaking everything.

• We want to be able to make calls on the client side to render a view without knowing specifics about the View (in case we add/ change a View).

• We need to test our JavaScript code (for obvious reasons)

Currently we have our JavaScript code very spread around and in large files which makes it hard to make edits. I've been looking into the module pattern to address this concern, but many of the posts I've been reading have been:

(a) Older (most recent from 2010)

(b) Had some disagreement about how to make modules that are also testable

Any ideas about ways we should change/ restructure our application to accomplish all three goals? Do these goals have too much inherent conflict, or is there hope? Also, any helpful blog posts are appreciated.

Answer 1

So as a follow up, doing almost exactly as Benjamin Gruenbaum said worked in this instance.

"templating" the code, or having one piece of code write another one was bad for many reasons, including performance (no caching of JavaScript code), maintainability and test-ability. I combed apart the system into a server part that encoded the needed data into JSON and then sent it to our JavaScript code on the client side, as well as started to organize the code into modules, which helped tidy things up a lot so far, and I foresee leading to better (again) maintainability and test-ability.

I can also endorse http://addyosmani.com/resources/essentialjsdesignpatterns/book/ as a great, current resource on how to write bigger pieces of JavaScript code in a well-organized and generally right way.