How can I make team Javascript development less painful?

Question

We have a team working on an ExtJS web app. Right now, the interface and its functionality is all stuffed in one 1500-line JS file, which is of course terrible. It's bad form in general, of course, but it really makes merging changes a bear.

Since Javascript doesn't have a #include or @require, or any other dependency-specifying mechanism, I'm at a loss how to gracefully split out functionality into smaller logical units, without requiring a great big laundry list of includes in the consuming HTML. I figure this is a common enough problem that somebody has worked out an elegant solution. Help?

Answer 1

Two possibilities:

1. Use something like RequireJS or LabJS to dynamically import separate scripts;
2. Combine separate scripts at build time.

I use a home-made version of (2) made with an Ant task and Freemarker, and I'm happy with it.

Answer 2

What development environment are you working in?

In Visual Studio, for our simple ExtJS projects, we just add a Pre/Post build event that uses xcopy to merge all the individual JS files into one file when the project is built.

For example - all of the User Extensions get combined with this line:

copy $(ProjectDir)..\Javascript\Extensions\*.js $(ProjectDir)JS\Extensions\_all.js /b

And then on the HTML page, we just include /JS/Extensions/_all.js

Answer 3

Highly recommend Require JS :

RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.

Answer 4

Maybe you should have a look at haXe. However currently there are no recent ExtJS-wrappers. So you may have to wrap at least the part you really need.

Answer 5

First, read JavaScript: The Good Parts by Douglas Crockford. There you will learn how to effectively use JavaScript's object structure, and various patterns that can help to divide your programs into reasonable pieces without putting every variable and function into the global namespace.

You will also want to use the Jasmine BDD framework to test your JavaScript. Because no matter how you slice it, 1500 lines of untested codes is well on its way to a BBOM

Answer 6

try my little contribution to the github network. i hope you can enjoy it.

https://github.com/dazagrohovaz/Require5.JS

almost like the Node.JS require function, but for the browser.

Features:
- load and eval javascripts files once
- no appendChild command
- support sync and async XHR requests
- save the scripts on HTML5 Storage if available
- data transfer only if required, load scripts from storage or cache
if available (no transfer), otherwise load scripts via XHR (data transfer)

For developers, look into the file require5.js:

if(!global) var global = window.global = window;

// For development, IMPORTANT..!!! Ignore the cache and storage
if(false /** development??? Set this to true */){
if(!global.runUnitTest) global.runUnitTest = {};
global.runUnitTest.require = true;
global.runUnitTest.resolveUri = true;
}

regards

Answer 7

Well I am a 1 person team but there are a few things I do to keep myself sane:

• First use JSLint on everything!

• Keep things formated, I use a script to do this

• small files, you can merge them before shipping the code if you want too

Use jquery or something similar.