What is the JavaScript MVC Architecture and How does it Work?

In the development process of object-oriented programming, model-view-controller (MVC) is a methodology or design pattern that helps you in relating the user interface to underlying data models efficiently and successfully. In this article, we will learn about the JavaScript MVC architecture in the following sequence:

JavaScript MVC Architecture

In recent times, the MVC pattern is applied to a diverse range of programming languages, including JavaScript. JavaScript consists of a number of frameworks to support MVC architecture or variations on it. It allows the developers to add structure to their applications easily and without much effort.

MVC consists of three components:

• Model
• View
• Controller

Now, let’s move on and get into the depth of these three JavaScript MVC components.

Models

Models are used for managing the data for an application. They are not concerned with the user-interface or presentation layers. Instead, they represent unique forms of data that an application may require. When a model is changed or updated, it will typically notify its observers about the change that has occurred so that they can act accordingly.

Let’s take an example of a simplistic model implemented using Backbone:

var Photo = Backbone.Model.extend({
// Default attributes for the photo
defaults: {
src: "placeholder.jpg",
caption: "A default image",
viewed: false
},
// Ensure that each photo created has an `src`.
initialize: function() {
this.set( { "src": this.defaults.src} );
}
});

In a photo gallery, the concept of a photo would merit its own model, as it represents a unique kind of domain-specific data. Such a model may contain related attributes such as a caption, image source, and additional metadata. In the above example, a specific photo would be stored in an instance of a model.

Views

Views are a visual representation of models that provide a filtered view of their current state. The JavaScript views are used for building and maintaining a DOM element. A view typically observes a model and is notified when the model changes, allowing the view to update itself accordingly. For example:

var buildPhotoView = function ( photoModel, photoController ) {
var base = document.createElement( "div" ),
photoEl = document.createElement( "div" );
base.appendChild(photoEl);
var render = function () {
// We use a templating library such as Underscore
// templating which generates the HTML for our
// photo entry
photoEl.innerHTML = _.template( "#photoTemplate" , {
src: photoModel.getSrc()
});
};
photoModel.addSubscriber( render );
photoEl.addEventListener( "click", function () {
photoController.handleEvent( "click", photoModel );
});
var show = function () {
photoEl.style.display = "";
};
var hide = function () {
photoEl.style.display = "none";
};
return {
showView: show,
hideView: hide
};
};

The benefit of this architecture is that each component plays its own separate role in making the application function as needed.

Controllers

Controllers act like intermediates between models and views, which are responsible for updating the model when the user manipulates the view. In the above example of our photo gallery application, a controller would be responsible for handling changes the user made to the edit view for a particular photo, updating a specific photo model when a user has finished editing. For more about Javascript, check out this web developer course online.

var PhotosController = Spine.Controller.sub({
init: function () {
this.item.bind( "update" , this.proxy( this.render ));
this.item.bind( "destroy", this.proxy( this.remove ));
},
render: function () {
// Handle templating
this.replace( $( "#photoTemplate" ).tmpl( this.item ) );
return this;
},
remove: function () {
this.el.remove();
this.release();
}
});

This example will provide you with a very lightweight, simple way to manage changes between the model and the view.

JavaScript MVC Frameworks

In the last few years, a series of JavaScript MVC frameworks have been developed. Each one of these frameworks follows some form of MVC pattern with the goal of encouraging developers to write more structured JavaScript code. Some of the Frameworks are:

• backbone.js
• Ember.js
• AngularJS
• Sencha
• Kendo UI

With this, we have come to the end of the JavaScript MVC article. I hope you understood the three components involved in the MVC architecture.

Now that you know about JavaScript MVC, check out the Full Stack Developer Training by Edureka. Web Development Certification Training will help you learn how to create impressive websites using HTML5, CSS3, Twitter Bootstrap 3, jQuery and Google APIs and deploy it to Amazon Simple Storage Service(S3). 

If you want to get trained in React and wish to develop interesting UI’s on your own, then check out the React Certification Course by Edureka, a trusted online learning company with a network of more than 250,000 satisfied learners spread across the globe.

Got a question for us? Please mention it in the comments section of “JavaScript MVC” and we will get back to you.