MVC&

backbone.js

April182012

Mohammed ArifManager Interactive Development @ SapientNitro

www.mohammedarif.comhttps://twitter.com/#!/arif_iqhttp://in.linkedin.com/in/mohdarif

Agenda

• What is MVC

• Why MVC

• MVC Advantages

• What is backbone

• Why backbone

• What is JavaScript templating

• Why JavaScript templating

• Questions/Feedback

What is MVC…

MVC stands for Model-View-Controller.

What is MVC…

MVC is a Architectural Design Pattern

What is MVC…

Separates a web application into three parts: the data (Model), the presentation of that data to the user (View), and the actions taken on any user interaction (Controller or routers).

What is MVC

In the past it has been heavily used for structuring desktop and server-side applications, but it's only been in recent years that come to being applied to JavaScript.

As the majority of JavaScript developers currently using these patterns opt to utilize libraries such as Backbone.js for implementing an MVC/MV*-like structure.

Design Pattern

A pattern that has been developed to help programmers cope with common problems

Blueprints on how to construct something

MVC - Model

Data representation

Can be database/xml/etc

Business Logic

MVC - View

Data presentation and user input

Renders the Model in to a View

Can be HTML/PDF/WML/Javascript

No computations, very little logic, display logic i.e. loops

MVC - Controller

Dispatches Requests and controls flow

Centralizes access

Interacts with Model and View

Why MVC

If you do a lot of JavaScript, things tend to get messy!

Backbone provides a way to organize your code, by using the MVC pattern

Only the View accesses the DOM (e.g. with jQuery, Dojo,…)

MVC Advantages…

Separation of interests

Model centralizes business logic

View centralizes display logic

Controller centralizes application flow

MVC Advantages

Clean separation of content/style

Improved decoupling

Easier testing

Allow multiple people to work on different parts

What is backbone.js

Backbone.js is one of a number of JavaScript frameworks for creating MVC-like web applications, it's relatively lightweight and can be easily tested using third-party toolkits such as Jasmine or QUnit.

Or

Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.

Why backbone

Organize the structure to your application

Simplify server-side persistence

Decouple the DOM from your page's data

Model data, views and routers in a succinct manner

Provide DOM, model and collection synchronization

Backbone.js - Model

Models are the heart of any JavaScript application, containing the interactive data as well as a large part of the logic surrounding it: conversions, validations, computed properties, and access control.

Backbone.js - Model

/*Let’s create a model*/

Person = Backbone.Model.extend({

initialize: function(){

alert("Hello Studio");

}

});

var person = new Person;/*initialize() is triggered whenever you create a new instance of a model*/

Backbone.js - View

Backbone views are used to reflect what your applications’ data models look like

They are also used to listen to events and react accordingly

Backbone.js - View

SearchView = Backbone.View.extend({

initialize: function(){

alert("Alerts suck.");

}

});

// The initialize function is always called when instantiating a Backbone View.

// Consider it the constructor of the class.

var search_view = new SearchView;

Backbone.js - Collection

Backbone collections are simply an ordered set of models.

var Song = Backbone.Model.extend({

initialize: function(){

console.log("Music is the answer");

}

});

var Album = Backbone.Collection.extend({

model: Song

});

What is JavaScript templating

A template contains markup with binding expressions. The template is applied to data objects or arrays, and rendered into the HTML DOM.

Why JavaScript templating

Loading all data from the server especially in rich list displays

Adding or updating new items in lists

Anywhere you need to add new complex content to the page

Anything that requires client side HTML rendering