Coding Guru

Code never does the mistake, we make the mistakes in the code. Think, Imagine, Phrase and then Code.

JavaScript Design Patterns : Introduction

Introduction

“Have you ever met with brain storming problem where a solution for one created trouble for many more, or you need to repeat the code various times to carry out a functionality. If  YES then this article and child ones are specially for you!!!! Read Once …. ”

Design patterns are nothing but the basic building block for maintainable, reliable and durable software applications. We are being frequently asked about the design patterns in technical discussions or interviews. In this article, we'll discuss a few javascript design patterns that we can think of and use in our applications.

As I say "The implementation and invoking of a design pattern into the application keeps the angry QA and Manager far away."

What is a Design Pattern?

A design pattern is a reusable solution component that is applied to commonly occurring problems or tasks in software applications and when we talk about javascript design patterns these are used on web applications. Another way of looking at patterns are as common templates for how you carry a task or solve a problem. Over the many years of experience in software development, experts have figured out ways of making the solution much easy and perfect. These solutions have been names as design patterns. So:

  • patterns are proven solutions for software development problems
  • patterns are scalable as they are structured and have the rules that we should follow
  • patterns are reusable for similar tasks and problems
  • patterns prevents minor issues that can arise and cause major problems in the application development process.

Why are design patterns important?

Design patterns are established and tested ways of programming that help us facilitating the scalable and maintainable code, all of which are very much important concepts when engineering or developing large JavaScript applications. When a javascript design pattern is implemented correctly, it makes the code easier for others to grab and understand. Having a design pattern in force assist us to keep our code clean and promotes a declarative standard method for us and our team to follow.

Let's have a look at few reasons as to why design patterns are extremely useful.

  • Patterns are an easy and tested way to refer to a specific implementation of code while avoiding the errors and additional discussion, it would take to get everyone on the same page if the vocabulary used for patterns didn't exist.
  • Patterns help to avoid minor issues that can create major impact later down the road.
  • Patterns simplify a level of sophistication that can provide both performance boosts and effort cost reduction.
  • Patterns are rigorously tested which means for the most part, they are "tried and true" and do aid in solving a particular type of problem.

 

A Note About Classes in JavaScript

When reading about design patterns, we often see references to classes and objects. This seems to be a bit confusing, as JavaScript does not have the construct of "class"; or lets say "data type".

Data Types in JavaScript

JavaScript is partial object-oriented language where objects may inherit from other objects in a concept which is known as prototypical inheritance. A data type is being created by defining a constructor function, like this:

function Student(config) {

<span class="sk-unlink">this.name</span> = <span class="sk-unlink">config.name</span>;

<span class="sk-unlink">this.age</span> = <span class="sk-unlink">config.age</span>;

}

Student.prototype.getMyAge = function() {

return <span class="sk-unlink">this.age</span>;

};

var tilo = new Student({name:"Tilo", age:23 });

<span class="sk-unlink">console.log(tilo.getMyAge</span>());

Note the use of the prototype when defining methods on the Student data type. Since multiple Students objects reference the same prototype, this allows the getMyAge() method to be shared by all instances of the Student, rather than declaring it for every object. Additionally, any data type that inherits from Student will also have access to the getMyAge() method.

Dealing with Privacy

Another common issue in JavaScript is that there is nothing like private variables. However, we can use closures to simulate privacy but to a limited extent. Let’s see following snippet:


In the above example, we created a Computer object, with public and private variables and functions. This is the way we would use it:

var Computer = (function() {


//Private variables

var RAM, addRAM;
RAM = 4;

//Private method

addRAM = function (additionalRAM) {

RAM += additionalRAM;

};

return {

//Public variables and methods

USB: undefined,

insertUSB: function (device) {

<span class="sk-unlink">this.USB</span> = device;

},


removeUSB: function () {

var device = <span class="sk-unlink">this.USB</span>;

<span class="sk-unlink">this.USB</span> = undefined;

return device;

}

};

})();

Computer.insertUSB("myUSB");

<span class="sk-unlink">console.log(Computer.USB</span>); //logs out "myUSB"

<span class="sk-unlink">console.log(Computer.RAM</span>) //logs out undefined

There's a lot more that we can do with functions and closures in JavaScript, but we won't get into all of it in this article. With this little description on JavaScript data types and privacy behind us, we can continue to learn about design patterns.

Types of Design Patterns

In software development, design patterns are generally grouped into a many categories. The three most important ones are as below:

  1. Creational patterns focus on ways to create objects, instances or classes. This may look, but large applications always need to track and control the object creation process. Without knowledge about how objects are being created, a level of complexity should be added to the application design. Creational design patterns solve this problem by adding a layer to the object creation process.
  2. Structural design patterns focus on ways to manage relationships between objects so that your application architecture becomes more scalable. Structural patterns ensure that a change in one part of your application does not affect other parts. These patterns help to provide stability by making sure that if one part of the app changes, the entire thing doesn't need to as well.
  3. Behavioral patterns focus on communication between objects.

Modern Day JavaScript Design Patterns

Below is a list of each JavaScript design pattern I've had the opportunity to work and write about with breakdowns on various aspects. Browse each to know more!

The Module Pattern
The Revealing Module Pattern
The Singleton Pattern
The Observer Pattern
The Mediator Pattern
The Prototype Pattern
The Facade Pattern
The Factory Pattern

Conclusion

The idea behind this article, and the individual pattern articles listed above is to make others aware of these modern day JavaScript design patterns and programming concepts.

Also to add : There is no one design pattern that is perfect but rather the use of multiple design patterns can help to facilitate a better approach to the web applications you write.

Always remember: “Someone has already applied it successfully in the past”

 If you have any questions, please feel free to drop a comment as I would be happy to help wherever I can.

Loading