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.

  • 8
    "our server which dynamically writes the java script " This is your problem right there, why would you dynamically generate code? Jan 22, 2013 at 21:25
  • @BenjaminGruenbaum: I assume that is being done to provide the "render a view without knowing specifics about the view" capability. Jan 22, 2013 at 21:25
  • Our js is spread through multiple files (including the files that do the generation) there are also global variables used in every corner of every files (yes, includeing the generated files. its impossible to edit anything with out breaking everything right now.
    – hhamilton
    Jan 22, 2013 at 21:28
  • 2
    @BenjaminGruenbaum dynamically writes the java script with the needed data embedded in it - this is more commonly known as a "template" ...
    – Izkata
    Jan 22, 2013 at 21:31
  • 6
    @Izkata templating code is a horrible idea, code is code, you can just pass it the required data, dynamically generated code is not maintainable and testable. OP, the module pattern is a way to organize your code, you can read about organizing javascript code in this excellent book by addy osmani addyosmani.com/resources/essentialjsdesignpatterns/book My first thought for you is to get rid of all the globals, stop writing code dynamically, and organize the code into modules using require.js or such. Jan 22, 2013 at 21:34

1 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.

  • I have now checked out both those frameworks (and wandered into angular.js which looks very useful to me). Thanks for the reminder.
    – hhamilton
    Feb 27, 2013 at 19:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.