April                                                   18                                                   2012MVC      ...
Agenda•   What is MVC•   Why MVC•   MVC Advantages•   What is backbone•   Why backbone•   What is JavaScript templating•  ...
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...
What is MVCIn the past it has been heavily used for structuring desktop and server-sideapplications, but its only been in ...
Design PatternA pattern that has been developed to help programmers cope with commonproblemsBlueprints on how to construct...
MVC - ModelData representationCan be database/xml/etcBusiness Logic
MVC - ViewData presentation and user inputRenders the Model in to a ViewCan be HTML/PDF/WML/JavascriptNo computations, ver...
MVC - ControllerDispatches Requests and controls flowCentralizes accessInteracts with Model and View
Why MVCIf you do a lot of JavaScript, things tend to get messy!Backbone provides a way to organize your code, by using the...
MVC Advantages…Separation of interests    Model centralizes business logic    View centralizes display logic    Controller...
MVC AdvantagesClean separation of content/styleImproved decouplingEasier testingAllow multiple people to work on different...
What is backbone.jsBackbone.js is one of a number of JavaScript frameworks for creating MVC-like web applications, its rel...
Why backboneOrganize the structure to your applicationSimplify server-side persistenceDecouple the DOM from your pages dat...
Backbone.js - ModelModels are the heart of any JavaScript application, containing the interactivedata as well as a large p...
Backbone.js - Model/*Let’s create a model*/Person = Backbone.Model.extend({         initialize: function(){               ...
Backbone.js - ViewBackbone views are used to reflect what your applications’ data models looklikeThey are also used to lis...
Backbone.js - ViewSearchView = Backbone.View.extend({   initialize: function(){       alert("Alerts suck.");   } }); // Th...
Backbone.js - Collection Backbone collections are simply an ordered set of models.var Song = Backbone.Model.extend({   ini...
What is JavaScript templatingA template contains markup with binding expressions. The template isapplied to data objects o...
Why JavaScript templatingLoading all data from the server especially in rich list displaysAdding or updating new items in ...
MVC & backbone.js
Upcoming SlideShare
Loading in …5
×

MVC & backbone.js

4,129 views

Published on

Published in: Technology
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total views
4,129
On SlideShare
0
From Embeds
0
Number of Embeds
889
Actions
Shares
0
Downloads
127
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

MVC & backbone.js

  1. 1. April 18 2012MVC Mohammed Arif Manager Interactive Development @ SapientNitro & www.mohammedarif.com https://twitter.com/#!/arif_iqbackbone.js http://in.linkedin.com/in/mohdarif
  2. 2. Agenda• What is MVC• Why MVC• MVC Advantages• What is backbone• Why backbone• What is JavaScript templating• Why JavaScript templating• Questions/Feedback
  3. 3. What is MVC…MVC stands for Model-View-Controller.
  4. 4. What is MVC…MVC is a Architectural Design Pattern
  5. 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. 6. What is MVCIn the past it has been heavily used for structuring desktop and server-sideapplications, but its only been in recent years that come to being applied toJavaScript.As the majority of JavaScript developers currently using these patterns opt toutilize libraries such as Backbone.js for implementing an MVC/MV*-likestructure.
  7. 7. Design PatternA pattern that has been developed to help programmers cope with commonproblemsBlueprints on how to construct something
  8. 8. MVC - ModelData representationCan be database/xml/etcBusiness Logic
  9. 9. MVC - ViewData presentation and user inputRenders the Model in to a ViewCan be HTML/PDF/WML/JavascriptNo computations, very little logic, display logic i.e. loops
  10. 10. MVC - ControllerDispatches Requests and controls flowCentralizes accessInteracts with Model and View
  11. 11. Why MVCIf you do a lot of JavaScript, things tend to get messy!Backbone provides a way to organize your code, by using the MVC patternOnly the View accesses the DOM (e.g. with jQuery, Dojo,…)
  12. 12. MVC Advantages…Separation of interests Model centralizes business logic View centralizes display logic Controller centralizes application flow
  13. 13. MVC AdvantagesClean separation of content/styleImproved decouplingEasier testingAllow multiple people to work on different parts
  14. 14. What is backbone.jsBackbone.js is one of a number of JavaScript frameworks for creating MVC-like web applications, its relatively lightweight and can be easily tested usingthird-party toolkits such as Jasmine or QUnit. OrBackbone.js gives structure to web applications by providing models withkey-value binding and custom events, collections with a rich API ofenumerable functions, views with declarative event handling, and connects itall to your existing API over a RESTful JSON interface.
  15. 15. Why backboneOrganize the structure to your applicationSimplify server-side persistenceDecouple the DOM from your pages dataModel data, views and routers in a succinct mannerProvide DOM, model and collection synchronization
  16. 16. Backbone.js - ModelModels are the heart of any JavaScript application, containing the interactivedata as well as a large part of the logic surrounding it: conversions,validations, computed properties, and access control.
  17. 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. 18. Backbone.js - ViewBackbone views are used to reflect what your applications’ data models looklikeThey are also used to listen to events and react accordingly
  19. 19. Backbone.js - ViewSearchView = 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. 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. 21. What is JavaScript templatingA template contains markup with binding expressions. The template isapplied to data objects or arrays, and rendered into the HTML DOM.
  22. 22. Why JavaScript templatingLoading all data from the server especially in rich list displaysAdding or updating new items in listsAnywhere you need to add new complex content to the pageAnything that requires client side HTML rendering

×