Experience in Writing Lots of JavaScript for Web App

I am working on revamping a web application for the past few months by myself.

Re-design the UI and Re-code the logic to make it nicer,faster, and maintainable.

But I don’t know how, and I code alone.

This is poorly managed web app, and its JavaScript codes go beyond 20000 lines in a single file.

Many people have edited the codes, and added in many functionalities.

Company hires interns to do the coding, and many of them really don’t know how it works.

Right codes copied, and so were the buggy ones.

It works so far, although it is very ugly.

My consideration is to re-write this web in a module pattern, and keep the core functionalities away from growing requirements.

Basically I try to adapt the JavaScript Module Pattern, and use RequireJS to manage the dependencies.

I also use Object literal notation to manage global values in each module.

I didn’t integrate RequireJS with jQuery for AMD.

I used script tag for jQuery and for other external libraries depends on global jQuery.

The structure likes the following:

index.html
init.js  => RequireJS data-main mapping JavaScript
config.js  =>  configuration of global data
util.js => helper functions
core.js  => core logic
ux.js => UI handling
lib/jquery.js, googleapi.js, googlechart.js etc

Inside init.js:

var APP = {}; // define a global value for app
require([‘config’,’util’,’core’,’ux’],function(){
//do init function call in core
APP.core.init();
});

Inside config.js:

define([],function(){
APP.global = {
host:host,
url:url
}
});

Inside util.js,core.js:

define ([‘config’,’core’,’ux’], function(){
var local = ‘’;
//here can use all values in APP.global, APP.core, and APP.ux
//avoid using ‘this’ in any function but instead APP.util if calling internal functions
APP.util = {
f1:function(){},
f2:function(){}
}
});

Inside core.js:

define ([‘config’,’util’,’ux’], function(){
//here can use all values in APP.global, APP.util, and APP.ux
//avoid using ‘this’ in any function but instead APP.core if calling internal functions
var local = ‘’;
APP.core = {
f1:function(){},
f2:function(){}
}
});

As you can figure out that you can add in modules or separate module in to small ones as many as possible.
And you don’t need to worry about their dependencies.

One thing to note is that if you don’t declare global values:
For example, inside util.js:

APP.util = {
f1:function(){
var div = $(‘#id1’);
var html = ‘<button onclick=“this.f2(’a’);”></button>’;
//error here. ‘this’ refers to global window, and won’t find f2 function
//should use onclick=“APP.util.f2(‘a’);”
div.html(html);;
},
f2:function(a){ alert(a); }
};

Or you can do:

f1:function(){
var div = $(‘#id1’),doc = document;
var btn = doc.createElement(‘button’);
btn.onclick = function(b){
return funciton(){ f2(b); };
}(a);
div.append(btn);
}

Use global values can save a lot of coding for dynamically creating div elements and binding corresponding event handlers, although I don’t think this is a good practice.

Reference:
JavaScript Module Pattern
JavaScript Design Pattern
RequireJS

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s