TexasJetter
.NET Development Examined

Building a JavaScript Framework


Friday, February 6, 2015

In today's web development ecosystem it is more and more common to perform tasks on the client (browser). For better or worse the language of choice is JavaScript. It is essential that web developers have at least a basic understanding of JavaScript and there are many beginning tutorials available to help you get started.

There are also many frameworks available designed to either "help" you with JavaScript (like jQuery) or to provide various features to the client (think Angular, Knockout, even BootStrap has a lot of JavaScript). These are all great frameworks and are well worth getting to know. But even the best thought out framework will still fall short of filling all the developers needs. For this reason you will find that you will need a framework of your own to perform functions that are unique to your environment.

Tasks like making AJAX service calls, displaying system message, prompting users for information, even common values like empty GUID and base URL paths can be worked into your own JavaScript framework. So let's get started making a custom application framework that you can re-use on all your projects.

Getting Started

It's tempting to just create a .js file and just create a bunch of variables and functions. Before you do so it's important to understand just what happens when you type in "var foo = 'hello'".

Under the covers all JavaScript is contained in a global name space. So all variables are instantiated into this global space. You may be thinking 'why do I care?'. You should care because any framework and random JavaScript loaded into the document object model (DOM) will exist in this name space. If one of these scripts are loaded after yours happens to use the same variable or function name it will redefine the variable/function. As you can imagine this could lead to very unpredictable results.

So how can we over come this? There are literally dozens of JavaScript design patterns, but one of the most popular ones is the Module Pattern. The Module Pattern allows us to emulate the concept of classes (which is nice for us .NET developers). Beyond that it allows us to define public and private variables and functions that won't collide in the global name space. Let's look at how we can start our framework using the Module pattern.

If you want to dive deep into design patterns check out Learning JavaScript Design Patters by Addy Osmani

First test to see if our name space has been defined, if not create it.

if (typeof tj === "undefined") {
    tj = {};
}

Now that we have our name space locked up, create the basic function structure.

(function () {
   tj.newGuid = function() {
		return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
			var r = Math.random() * 16 | 0,
				v = c === 'x' ? r : (r & 0x3 | 0x8);
			return v.toString(16);
		});
    }
 })();

At this point we now have our custom name space, with a single function called 'newGuid' that we can call anywhere in our application using the code

var foo = ts.newGuid();

and have confidence that we are using our definition of 'newGuid', not one that may get renamed by other frameworks.

You will find a healthy discussion on the Internet on the topic of JavaScript creating a GUID. There are many different opinions, even as to what it really means to be a 'globally unique identifier'. This function has served me well, and if you are truly concerned about your GUIDs you can always replace the client side generated value with a server side generated one in your service layer.
We can also use our name space to stuff common variables that our application can reference. Sticking with our GUID theme, we often need to test for, or assign an empty GUID. Not only is it tiresome to type that many zeros, but it is error prone. So let's add a variable.

(function () {
   tj.emptyGuid = "00000000-0000-0000-0000-000000000000";
   . . .
 })();

So what's next? That in part depends on our needs. A couple of other common variables I find useful are a prefix for URLs and a flag control application debug messages.

(function () {
	tj.rootUrl = "../";
	tj.verbose = true;
	. . .
 })();

With that we're on our way to building a JavaScript framework that we can reuse on all our applications. Future articles will expand on this framework to provide common functions like system notifications, message boxes, prompts, and more.


Comments

Add Comment