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:  

• Design Patterns in WinJS #1: Introduction to Series
• Design Patterns In WinJS #2: Abstract Factory 

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:

1. We create a new University object
2. We build our student using StudentBuilder object.
3. Relation our Student with University
4. Add Student's message
5. 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.