MVC & backbone.js

MVC & backbone.js

Transcript

1. MVC & backbone.js April 18 2012 Mohammed Arif Manager Interactive Development @ SapientNitro www.mohammedarif.com https://twitter.com/#!/arif_iq 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*/ Demos – model_basic.html, model_setter_getter.html, model_advance.html
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; Demos – view_basic.html, view_advance.html
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 }); Demo – collection.html
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 Demo – template.html
23. Questions/Feedback April 18 2012