Design Patterns In WinJS #3: Builder

I've decided to write more OOP articles in WinJS library regarding the use of Design Patterns we all love! You can learn my previous parts:

Let's start with what this design pattern means.

What is Builder Design Pattern?

Builder pattern allows you to create objects by specifying type and content. Client will not know the details of what happens in the background but will know the steps taken till the work ends.

According to DoFactory,Builder is:

Since Interfaces cant be used in AbstractBuilder object,it will be removed out of picture. Builder is a pattern when you know which steps needed to complete a job and thus create a new object afterwards.

A much more easy to understand example can be given about Universities-Lessons-Professional triangle of relationship. Student goes to a university, attends a class, passes exams, finishes school and then become a professional:

You let others see what steps are taken but dont show the entire work at background.

According to the above sample, people know you need to pass 3-4 years of exams but they dont know which classes you get or which points you get from each exam.They only know whether you finished school or not.

Builder class is similar to this, we will create a few steps then finish our job.

Implementation

Let's create our University object:

var University = WinJS.Class.define(
function() {
this.construct = function (Lessons) {
Lessons.step1();
Lessons.step2();
return Lessons.get();
}
});

As you can see University has steps to complete. I added only 2 as an example.

Lets add our StudentBuilder class

var StudentBuilder = WinJS.Class.derive(Student,
function() {
this.student = null;
this.step1 = function () {
this.student = new Student();
};
this.step2 = function () {
this.student.Finalize();
};
this.get = function () {
return this.student;
};
});

which derives from Student class:

var Student = WinJS.Class.define(
function() {
this.years = 0;
this.Finalize = function () {
this.years = 4;
};
this.say = function () {
Helper.Func.add("I graduated a " + this.years + " years university");
};
});

We've once more defined our Helper class for logging to console:

WinJS.Namespace.define("Helper");
var log = "";
Helper.Func =
{
add: function (msg) { log += msg + "\n"; },
show: function () { console.log(log); log = ""; }
};

To use the Builder pattern,we simply call them by:

var uni = new University();
var studentBuilder = new StudentBuilder();
var student = uni.construct(studentBuilder);
student.say();
Helper.Func.show();

Finalize

The steps to Builder pattern is as below:

We create a new University object
We build our student using StudentBuilder object.
Relation our Student with University
Add Student's message
Log Student's message

Here is what you see after build&run:

Why should you use it?

The Builder pattern simplifies complex architectures by splitting types of objects and theirs contents. It's a useful pattern for defining step-by-step jobs.

10 Comments

Join the conversation! Your thoughts help the community grow.

Debasis Saha10y ago
Good One..
- Ibrahim Ersoy10y ago
  Thank you
Bhuvanesh Mohankumar10y ago
Worth reading, shared to my team :)
- Ibrahim Ersoy10y ago
  Thank you, Bhuvanesh Mohankumar :)
Neeraj Kumar10y ago
Nice article
- Ibrahim Ersoy10y ago
  Thank you
Munesh Sharma10y ago
good one
- Ibrahim Ersoy10y ago
  Thank you
Vignesh Mani10y ago
Nice
- Ibrahim Ersoy10y ago
  Thank you