What is a rich web application?

In short a web application is a piece of software hosted somewhere on the Internet. Compared to a typical informational website, a web application is a program that simplifies a process for a user. Much like web services, a web application is data driven, providing many different user flow paths.

So, where does JavaScript come into play with all of this?

As technology improves over time, the experiences get even richer. JavaScript is a great way to improve the overall experience of any web interface by creating a more smooth experience for the user.

How does the word “rich” apply to JavaScript?

We have access to many different JavaScript frameworks now, such as jQuery. Most JavaScript frameworks can make a developer’s life a lot easier, but not necessarily for other developers that may want to jump on the project after you.

Well, what is the problem?

As you all know JavaScript is what’s called a prototyped language. By being a loosely typed language, it gives developers a lot of power over speedy development, but herein lies its downfall, as well. With great power comes great responsibility—just because the language allows you to, doesn’t really mean you should.

As a web developer, myself, I see a lot of JavaScript that was typed in a top-to-bottom approach. Since JavaScript is an event-driven language, you have to create callback functions to handle events. Most other client-side languages are the same way. JavaScript’s prototyped structure makes it way too tempting to have nested callbacks. If you look at it from another developer’s perspective, all they see is a big chunk of code that looks like the letter “v” flipped on its side—like this “>.” Nesting functions need to be used very carefully.

Since the invention of SmallTalk, developers have had access to a design pattern called object-oriented programming. So, in short, rich JavaScript should really mean “strict object-oriented JavaScript.”

How we can write strict object-oriented JavaScript?

Well, first I want to explain how it can help solve JavaScript’s loosely typed issues. In general, OOP has been one of the most adapted patterns in development. OOP saves developers from writing redundant code. In most cases, it also gives an application a layer of organization, which improves maintainability.

If we are talking about large-scale web applications, then we must stick to a very strict JavaScript OOP standard. Large applications tend to leak money through maintainability if programed in a loose fashion, but when coded in a modular fashion using objects, the application is positioned for success from the start. It will also lead to more profit later, when maintaining.

How do we apply OOP standards to JavaScript?

Well believe it or not, JavaScript is pretty much OOP out of the box. The only difference that we are applying is the way we think about it. Let’s create some classes in JavaScript that we can later turn into objects.

var Person = function() {

	//This is the code of a person

}

We created a class called “Person.” In JavaScript, we define a class through a function. The function can also be referred to as the “constructor” of the class. A class is really just a function that contains code to set up an object.

Now we will get to the good OOP patterns. Normally, in any standard object oriented language, you will encounter private, protected, and public properties of an object. JavaScript doesn’t have an idea of what protected means, but we can create private and public properties, and methods in our object.

Below we will create a private property that only our object can see, as well as a public property that can be seen both in and outside our object. We will create the internal and external parts of a human.

var Person = function() {

	//This is the code of a person

	// Private properties that only person can control
	var heart		= new Heart();
	var brain		= new Brain();
	var stomach		= new Stomach();

	// Public properties that anybody can see
	this.leftLeg	= new Leg();
	this.rightLeg	= new Leg();

}

As you can see, if you want to make something public, we just add “this” in front of the name. It will add it to the scope of the Person object. If we place a “var” in front of the name, then the scope of the variable is locked inside the Person object.

Now we need to add functionality to the Person object so that we can manipulate its properties. In the example, we are assuming we have all of the other objects defined somewhere else. We will make a public method that we can access from anywhere, and a private method that only the Person object can call.

var Person = function() {

	//This is the code of a person

	// Private properties that only person can control
	var heart		= new Heart();
	var brain		= new Brain();
	var stomach		= new Stomach();

	// Public properties that anybody can see
	this.leftLeg	= new Leg();
	this.rightLeg	= new Leg();

	this.run = function() {

		this.leftLeg.stepForward(
			rightLeg.stepForward
		);

		//Heart rate increases
		heart.increaseRate();

	}

	this.eat = function() {

		stomach.digest(
			new Salad() // Foot to eat
		);

	}

	//This will be executed when hungry
	var onHungryFeeling = function() {

		this.eat();

	}

	// Bind to the Brain's hungry feeling
	brain.onFeeling(
		brain.HUNGRY_FEELING,	//Feeling type
		onHungryFeeling			//Execute onHungryFeeling callback
	);

}

We declared a private method called “onHungryFeeling” using the keyword “var.” This will be the main delegated callback that will handle the Brain’s hungry feeling. We also made some public methods like “eat” and “run.” These methods can be executed anywhere outside of Person.

These are the basic principles of JavaScript OOP. The level of abstraction in the example I showed might be a little overboard, but it’s all in an effort to teach the basic principles of OOP JavaScript. In a real-world scenario, you can use frameworks like Backbone.js. These are great frameworks, because of their object-oriented approach to JavaScript.

All in all, OOP can dramatically improve maintainability in your code, as well as reusable code. I often find myself using a combination of jQuery factory objects with actual custom JavaScript classes. It is important to have a balanced approach to loosely typed languages. Remember: Just because you can write loosely with JavaScript, doesn’t mean you should.

Knowledge Share: Making that JavaScript Rich

Webinar: Mobile-Friendly Social