"Hello World" in MVC Pattern

Question

In an interview for some company, I was asked this question.

What design patterns do you know...then I was told to write simplest "hello world" application based on MVC Design Pattern.

I came up with a JavaScript program

var arr = ["a","b","c","d"];   // this is an array, same as store or model
alert(arr[0]);                // this is controller
//and browser alert is a view.

later I was told that alert is a view. The basic concept about MVC I know is any changes in Model are reported to View. And there is a controller in between to call the methods.

Can you correct my approach, or come up with an alternate solution for hello world MVC application. Also explain subtle aspects of MVC.

Thanks.

Answer 1

var M = {}, V = {}, C = {};  M.data = "hello world";  V.render = function (M) { alert(M.data); }  C.handleOnload = function () { V.render(M); }  window.onload = C.handleOnLoad; 

Controller (C) listens on some kind of interaction/event stream. In this case it's the page's loading event.

Model (M) is an abstraction of a data source.

View (V) knows how to render data from the Model.

The Controller tells to View to do something with something from the Model.

In this example

• the View knows nothing about the Model apart from it implements some interface
• the Model knows nothing of the View and the Controller
• the Controller knows about both the Model and the View and tells the View to go do something with the data from the Model.

Note the above example is a severe simplification for demonstrating purposes. For real "hello world" examples in the JS MVC world go take a look at todoMVC

Answer 2

Better Example

var M = {}, V = {}, C = {};

/* Model View Controller Pattern with Form Example */


/* Controller Handles the Events */

M = {
    data: {
        userName : "Dummy Guy",
        userNumber : "000000000"
    }, 
    setData : function(d){
        this.data.userName = d.userName;
        this.data.userNumber = d.userNumber;
    },
    getData : function(){
        return data;
    }
}

V = {
    userName : document.querySelector("#inputUserName"),
    userNumber : document.querySelector("#inputUserNumber"),
    update: function(M){
        this.userName.value = M.data.userName;
        this.userNumber.value = M.data.userNumber;
    }
}

C = {
    model: M,
    view: V,
    handler: function(){
        this.view.update(this.model);
    }
}

document.querySelector(".submitBtn").addEventListener("click", function(){
    C.handler.call(C);
}); 

/* Model Handles the Data */

/* View Handles the Display */

Answer 3

MVC Architecture

I have written an article about MVC architecture. Here is only some code present,hope anyone finds it helpful.

---

//Modal
var modal = { data: "This is data"};

//View
var view =  { display : function () { 
    console.log ("////////////////////////////");
    console.log ( modal.data);
    console.log ("////////////////////////////");
    }
};

//Controller
var controller = ( function () {
    view.display();
    })();

---

From the above example just understand that there are three different units in this design where each has a specific job to perform. Let's build the MVC design from the above infra structure .There can be more than one view and Observer, here only another view is created first.

---

// Modal
var modal = { data: "This is data"};
// View
var slashView =  { display : function () { 
    console.log ("////////////////////////////");
    console.log ( modal.data);
    console.log ("////////////////////////////");
    }
};
var starView =  { display : function () { 
    console.log ("****************************");
    console.log ( modal.data);
    console.log ("****************************");
    }
};

// Controller
var controller = ( function () {
    slashView.display();
    starView.display();
})(); 

---

What is understood here is that the modal must not be dependent upon either the view or viewers or the operations performed on the data. The data modal can stand alone but the view and controller are required because one needs to show the data and the other needs to manipulate it. Thus view and controller are created because of the modal and not the other way round.

---

//Modal
var modal = { 
data : ["JS in object based language"," JS implements prototypal   inheritance"]
};

// View is created with modal
function View(m) {
    this.modal = m;
    this.display = function () {
        console.log("***********************************");
        console.log(this.modal.data[0]);
        console.log("***********************************");
    };
}

function Controller(v){
    this.view = v;
    this.informView = function(){
        // update the modal
        this.view.display();
    };
}
// Test
var consoleView = new View(modal);
var controller = new Controller(consoleView);
controller.informView();

---

From the above it can be seen that there has been a link established between view and the controller. And this is one of the requirement of MVC pattern. To demonstrate the change in the modal let's change the program and observe that change in the state of modal is done independently and reflects in view.

//Modal
function Modal(){
this.state = 0;
this.data = ["JS is object based language","JS implements prototypal inheritance"];
//
this.getState = function (){
    return this.state;
};
this.changeState = function (value) {
    this.state = value;
};
}

// View is created with modal
function View(m) {
    this.modal = m;
    this.display = function () {
        console.log("***********************************");
        console.log(this.modal.data[modal.getState()]);
        console.log("***********************************");
    };
}
//controller is created with the view
function Controller(v){
    this.view = v;
    this.updateView = function(){
        // update the view
        this.view.display();
    };
}
// Test
var modal = new Modal();
var consoleView = new View(modal);
var controller = new Controller(consoleView);
controller.updateView();
// change the state of the modal
modal.changeState(1);
controller.updateView();

---

When the state of the modal is changed the controller has sent the message to the view to update itself. It is fine, but still one main concept is left to be implemented and that is the observer or controller needs to be identified by the modal . In order to see this happening, there has to be a link between modal and the controller so that any number of controller can show the interest in the modal, this is considered as registering the observer to the modal. This relation ship is implemented using the concept that observer does not exist in the air. Its existence come because of having interest in the modal thus when it is created it has to be created using the modal that it needs to show interest or in other words it has an access to the modal. Let's look at the example below and see how this MVC design pattern is achieved simply and elegantly using JavaScript.

function Modal(){
    var stateChanged =  false;
    var state = 0;
    var listeners = [];
    var data = ["JS is object based language","JS implements prototypal inheritance"];
    // To access the data
    this.getData = function(){
        return data;
    };
    // To get the current state
    this.getState = function (){
        return state;
    };
    // For simplicity sake we have added this helper function here to show 
    // what happens when the state of the data is changed
    this.changeState = function (value) {
            state = value;
        stateChanged = true;
        notifyAllObservers();
    };
    // All interested parties get notified of change
    function notifyAllObservers (){
    var i;
        for(i = 0; i < listeners.length; i++){
            listeners[i].notify();
        }
    };
    // All interested parties are stored in an array of list
    this.addObserver = function (listener){
        listeners.push(listener);
    };
}

// View class, View is created with modal

function View(m) {
    this.modal = m;
    this.display = function () {
        console.log("***********************************");
        var data = this.modal.getData();
        console.log(data[modal.getState()]);
        console.log("***********************************");
    };
}


// Controller or Observer class has access to both modal and a view
function Controller(m,v){
    this.view = v;
    this.modal = m;
    this.modal.addObserver(this);

    // update view
    this.updateView = function(){
        this.view.display();
    };
    // Receives notification from the modal
    this.notify = function(){
        // state has changed
        this.updateView();
    };
}

// Test
var modal = new Modal();
var consoleView = new View(modal);
var controller = new Controller(modal,consoleView);
// change the state of the modal
modal.changeState(1);
modal.changeState(0);
modal.changeState(1);
modal.changeState(0);

---

From the above it can be seen that the observer has register itself using modal addObsever function and establishes a link to the modal. Once all instances are created. Modal state was changed manually to show the effect in the view. Typically in GUI environment, the change is usually done either with a user pressing any button or from any other external input. We can simulate the external input from the random generator and observe the effect. Here in the example below, some more elements are added in the data to show the effect clearly.

function Modal(){
var stateChanged =  false;
var state = 0;
var listeners = [];
var data = [
"JS is object based language","JS implements prototypal inheritance",
"JS  has many functional language features", "JS is loosely typed language",
"JS still dominates the Web", "JS is getting matured ","JS shares code               
through prototypal inheritance","JS has many useful libraries like JQuery",
"JS is now known as ECMAScript","JS is said to rule the future of Web for      
many years"];

//
this.getData = function(){
    return data;
};
//
this.getState = function (){
    return state;
};

this.changeState = function (value) {
    state = value;
    stateChanged = true;
    notifyAllObservers();
};

function notifyAllObservers (){
var i;
    for(i = 0; i < listeners.length; i++){
        listeners[i].notify();
    }
}
this.addObserver = function (listner){
    listeners.push(listner);
};
}

// View is created with modal

function View(m) {
    this.modal = m;
    this.display = function () {
    console.log("****************************************************");
        var data = this.modal.getData();
        console.log(data[modal.getState()]);
    };
    //Adding external simulation of user sending input 

    this.pressButton = function(){
        var seed = 10;
        var number = Math.round(Math.random() * seed) ;
        // change the state of modal
        this.modal.changeState(number);
    };
}
// Controller class needs modal and view to communicate

function Controller(m,v){
    this.view = v;
    //console.log(this.view.display);
    this.modal = m;
    this.modal.addObserver(this);

    this.updateView = function(){
        // update the view
        //console.log(this.view);
        this.view.display();
    };
    this.notify = function(){
        // state has changed
        this.updateView();
    };
}

// Test
var modal = new Modal();
var consoleView = new View(modal);
var controller = new Controller(modal,consoleView);
// change the state of the modal
for ( var i = 0 ; i < 10; i++){
    consoleView.pressButton();
}

---

The above example demonstrates the use of MVC frame work where a modal is kept independent of the view and and the controller. The modal representing the data is responsible of notifying all the interested parties that has shown the interest and registered themselves with the modal. As soon as any change happens notification is send to the parties and action is left upon them. The example below is slightly different from the above where only newly added data is shown by the observer.

    function Modal(){
var stateChanged =  false;
var listeners = [];
var data = ["JS is object based language"];
// To retrieve the data
this.getData = function(){
    return data;
};
// To change the data by any action
this.modifyData = function (string) {
    ( data.length === 1 )? data.push(string): data.unshift(string);
    stateChanged = true;
    notifyAllObservers();
};

// Notifies all observers
function notifyAllObservers (){
var i;
    for(i = 0; i < listeners.length; i++){
        listeners[i].notify();
    }
}
// Requires to register all observers
this.addObserver = function (listener){
    listeners.push(listener);
};
}
// View is created with modal
function View(m) {
    this.modal = m;
    this.display = function () {
    console.log("****************************************************");
        var data = this.modal.getData();
        console.log(data[0]);
    console.log("****************************************************");
    };
    //Adding external simulation of user sending input 
    this.pressButton = function(string){
        // change the state of modal
        this.modal.modifyData(string);
    };
}

// View class

function Controller(m,v){
    this.view = v;
    this.modal = m;
    this.modal.addObserver(this);

    // Updates the view
    this.updateView = function(){
        this.view.display();
    };
    // When notifies by the modal send the request of update 
    this.notify = function(){
        // state has changed
        this.updateView();
    };
}

// Test
var modal = new Modal();
var consoleView = new View(modal);
var controller = new Controller(modal,consoleView);
consoleView.pressButton();
consoleView.pressButton("JS dominates the web world");
consoleView.pressButton("JQuery is a useful library of JS");

---

The last thing which one may like to add is to delete the observer when not needed.This can be done through adding a method called removeObserver(object) in the modal calls. The above MVC design pattern can be more refined by using subcalssing and having common function present in the top class making the design as simple as possible but it is left on some other article. Hope it helps.