tips for working on a large javascript project

Question

I have some experience with JavaScript - but mainly with some small stuff, I never did anything really big in Javascript previously.

Right now, however, I'm doing quite a large javascript-related project, a jquery-powered frontend that communicates with the server-side backend by sending/receiving JSON via Ajax.

I'm wondering if you could provide some useful information on how to deal with large javascript projects - are there any helpful tools/libaries/good practices?

Thanks in advance.

Make sure you minify and gzip your javascript for the client. — Asaph, Dec 17 '10 at 16:32
@grigory there is no need of any tools , write some generic helper functions and common fucntions for repeated code — kobe, Dec 17 '10 at 16:33
@Avinash: He asked for advice on large javascript projects in an open ended way. I think my advice on minify and gzip is highly relevant to the question. — Asaph, Dec 17 '10 at 16:38
@asaph , your advice will be used at later stages during deployment and improving performance on production — kobe, Dec 17 '10 at 16:41
answer I submitted for a similar question http://stackoverflow.com/questions/4359991/how-to-develop-a-plan-for-your-javascript/4360498#4360498 Also, another link that deals with using the Module Pattern with JS http://stackoverflow.com/questions/2718172/using-the-module-pattern-for-larger-projects — subhaze, Dec 17 '10 at 16:49

score 5 · Answer 1 · answered Dec 17 '10 at 17:07

My one big tip would modularize

In JavaScript, it is very easy for variables to clobber other variables. In order to avoid this, modularization is a must. There are several ways to take advantage of JavaScripts scope rules to minimize the possibility of variable conflicts.

var myProject = {};

myProject.form = function(p_name, p_method, p_action)
{
    var name = p_name,
        method = p_method,
        action = p_action;
    var addInput = function(p_input)
    {
        // etc...
    }

    return {
        addInput: addInput,
        name: name
    };
}

myProject.input = function(p_name, p_type, p_value)
{
    var name, method, value;
    var setValue = function(p_value)
    {
        value = p_value;
        return true;
    }

    return {
        setValue: setValue,
        name: name
    };
}

// etc...

If you're careful about using var, and keep track of your function scope, then you have only one global variable - myProject.

In order to get a new form Object, you'd simply do the following: var myForm = myProject.form('form1', 'post', 'post.php').

score 4 · Answer 2 · answered Dec 17 '10 at 17:03

You may want to check out Backbone.js

Backbone supplies structure to JavaScript-heavy applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing application over a RESTful JSON interface.

score 2 · Answer 3 · answered Dec 17 '10 at 16:32

2

jQuery and YUI 3: A Tale of Two JavaScript Libraries is a nice comparison of them in the context of a complex application, and gives useful hints for jQuery programmers as well.

answered Dec 17 '10 at 16:32

Marco Mariani

13,556
6
39
55

Why was this voted down? Seemed extremely relevant to me. Even if the poster is not going to move away from jQuery he should know what he's up against. – mwilcox Dec 17 '10 at 16:58
If you want to vote down answers to such a broad question, at least add why the answer is wrong/dangerous - even if it is not *the* right answer. – Konerak Dec 17 '10 at 17:01

score 2 · Accepted Answer · edited Dec 17 '10 at 17:00

2

Grigory ,

Even i moved from a backend to UI few months back only follow this approach

read all the concepts of jquery either from google or through some book or through jquery documentation.
follow some of the jquery best practices http://psdcollector.blogspot.com/2010/03/77-best-jquery-tips-i-have-ever-read.html
write utitlity functions for all repeated code like getcookie ,subsstrings etc etc
keep getting your code reviewed by experienced person who can guide you
post to stackoverflow if you get stuck anywhere.
as it is big project divide into mutiple files and use proper naming convintion.

please let me know if you need anything else

edited Dec 17 '10 at 17:00

Konerak

39,272
12
98
118

answered Dec 17 '10 at 16:46

kobe

15,671
15
64
91

+1, use Naming conventions, namespaces, objects! Don't be tempted by old-school javascript or its tutorial - the web is full of outdated resources on JS. – Konerak Dec 17 '10 at 16:51
@grigory , let us know whenver you need any help , i am also working on large jquery json project – kobe Dec 17 '10 at 16:55
and custom events: http://stackoverflow.com/questions/399867/custom-events-in-jquery – Marco Mariani Dec 17 '10 at 17:11

score 1 · Answer 5 · answered Dec 17 '10 at 17:04

The best advice is to keep your code segmented in different files as "classes". I personally hate working in a file that's more than a few hundred lines long.

Then assemble and minify your code with one of the tools on the web, like Shrinksafe or Google Closure Compiler

Note that Dojo, YUI, and Ext are all designed to handle large Ajax applications. You'll struggle a bit with jQuery. But I'm guessing this app isn't all that big and you should be fine.

KJYe.Name · Answer 6 · 2010-12-17T17:10:37.683

0

Have you consider checking out MooTools?

MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.

edited Dec 17 '10 at 17:10

answered Dec 17 '10 at 17:05

KJYe.Name

16,969
5
48
63

tips for working on a large javascript project

6 Answers6