The document discusses Model-View-Controller (MVC) architecture and Backbone.js. It defines MVC as separating a web application into three parts: the model (data), view (presentation), and controller (user interaction). It explains that Backbone.js implements an MVC-like structure using models, views, and routers to organize JavaScript code. The document also introduces JavaScript templating as a way to render templates with data bindings into the HTML DOM.

1. April
18
2012
MVC Mohammed Arif
Manager Interactive Development @ SapientNitro
& www.mohammedarif.com
https://twitter.com/#!/arif_iq
backbone.js http://in.linkedin.com/in/mohdarif

2. Agenda
• What is MVC
• Why MVC
• MVC Advantages
• What is backbone
• Why backbone
• What is JavaScript templating
• Why JavaScript templating
• Questions/Feedback

3. What is MVC…
MVC stands for Model-View-Controller.

4. What is MVC…
MVC is a Architectural Design Pattern

5. 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).

6. 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.

7. Design Pattern
A pattern that has been developed to help programmers cope with common
problems
Blueprints on how to construct something

8. MVC - Model
Data representation
Can be database/xml/etc
Business Logic

9. 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

10. MVC - Controller
Dispatches Requests and controls flow
Centralizes access
Interacts with Model and View

11. 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,…)

12. MVC Advantages…
Separation of interests
Model centralizes business logic
View centralizes display logic
Controller centralizes application flow

13. MVC Advantages
Clean separation of content/style
Improved decoupling
Easier testing
Allow multiple people to work on different parts

14. 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.

15. 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

16. 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.

17. 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*/

18. 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

19. 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;

20. 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
});

21. 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.

22. 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