• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Backbone.js
 

Backbone.js

on

  • 4,072 views

A little presentation about Backbone.js

A little presentation about Backbone.js

Statistics

Views

Total Views
4,072
Views on SlideShare
2,635
Embed Views
1,437

Actions

Likes
7
Downloads
76
Comments
1

4 Embeds 1,437

http://mobicon.tistory.com 1432
http://webcache.googleusercontent.com 2
http://localhost 2
https://si0.twimg.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Quote from Backbone website:
    'If it helps any, in Backbone, the View class can also be thought of as a kind of controller'
    http://backbonejs.org/#FAQ-mvc
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Models manage the data for an application. They are concerned with neither the user-interface nor presentation layers but instead represent unique forms of data that an application may require. When a model changes (e.g when it is updated), it will typically notify its observers (e.g views, a concept we will cover shortly) that a change has occurred so that they may react accordingly.To understand models further, let us imagine we have a JavaScript photo gallery application. 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 meta-data. A specific photo would be stored in an instance of a model and a model may also be reusable. Below we can see an example of a very simplistic model implemented using Backbone.The built-in capabilities of models vary across frameworks, however it is quite common for them to support validation of attributes, where attributes represent the properties of the model, such as a model identifier. When using models in real-world applications we generally also desire model persistence. Persistence allows us to edit and update models with the knowledge that its most recent state will be saved in either: memory, in a user's localStorage data-store or synchronized with a database.In addition, a model may also have multiple views observing it. If say, our photo model contained meta-data such as its location (longitude and latitude), friends that were present in the a photo (a list of identifiers) and a list of tags, a developer may decide to provide a single view to display each of these three facets.It is not uncommon for modern MVC/MV* frameworks to provide a means to group models together (e.g in Backbone, these groups are referred to as "collections"). Managing models in groups allows us to write application logic based on notifications from the group should any model it contains be changed. This avoids the need to manually observe individual model instances.

Backbone.js Backbone.js Presentation Transcript

  • INTRODUCTION THO VO
  • PLAN1. Introduction.2. MVC and other models in JavaScript.3. Third party library for Backbone.4. Model with Backbone.5. Collection with Backbone.6. View with Backbone.7. Demo.8. Question and Answer?
  • INTRODUCTION• JavaScript found in 1995(stable 1.8.5 in 2011).• JavaScript frameworks: • MochiKit(2008). • Rico(2009). • YUI(2011). • Ext JS(2011). • Dojo(2011). • Echo3(2011). • jQuery(2012). • …and other frameworks here.
  • COMPARISON jQuery Ext JS YUIFiles 1 1 1.js (LOC) 9047 13471 10526 • Is it easy to read? • Is it easy to upgrade? • How can I add a new feature? • Does these library support OOP? • 3 layers? • MVC? •  ‘spaghetti ’ code
  • COMPARISON( CONT. )• jQuery, Ext JS, YUI…write code focus on functions, these library provides api and the users use these functions to achieve what they want. • YUI API. • jQuery API. • Ext JS API.
  • WHY USE THIS?• A MVC like pattern to keep code clean.• A templating language to easily render view element.• A better way to manage events and callbacks.• A way to preserver back button.• Easy for testing.
  • PLAN1. Introduction.2. MVC and other models in JavaScript.3. Third party library for Backbone.4. Model with Backbone.5. Collection with Backbone.6. View with Backbone.7. Demo.8. Question and Answer?
  • MVC AND OTHER MODELS IN JAVASCRIPT.• MV*• MVC• MVP• MVVM• …
  • FRAMEWORKS• Backbone.js• Sprout Core 1.x• Sammy.js• Spine.js• Cappuccino• Knockout.js• JavaScript MVC• Google Web Toolkit• Batman.js
  • PLAN1. Introduction.2. MVC and other models in JavaScript.3. Third party library for Backbone.4. Model with Backbone.5. Collection with Backbone.6. View with Backbone.7. Demo.8. Question and Answer?
  • THIRD PARTY LIBRARY FOR BACKBONE.• Selector: • jQuery • YUI • Zepto• Template: • Underscore(hard dependency) • Handlebar • Tempo • Mustache
  • ARCHITECT OF A BACKBONE PROJECT• Assets: CSS, images, third party JavaScript library…• Modules: Our source, view.js, model.js• Have more directories when project come larger…
  • HTML1. <!doctype html>2. <html lang="en">3. <head>4. <meta charset="utf-8">5. <meta http-equiv="X-UA-Comptatible" content="IE=edge,chrome=1">6. <title>Backbone.js</title>7. <link rel="stylesheet" href="assets/css/main.css">8. </head>9. <body>10. <div id="content">11. <!-- Content goes here -->12. </div>13. <!-- Libraries, follow this order -->14. <script type="text/javascript" src="assets/js/libs/jquery.min.js"></script>15. <script type="text/javascript" src="assets/js/libs/underscore-min.js"></script>16. <script type="text/javascript" src="assets/js/libs/backbone-min.js"></script>17. <!-- Application JavaScript -->18. <script type="text/javascript" src="src/app.js"></script>19. </body>20. </html>
  • NAMESPACE1. var app = {2. // Classes3. Collections: {},4. Models: {},5. Views: {},6. // Instances7. collections: {},8. models: {},9. views: {},10. init: function () {11. // Constructor12. }13. };14. $(document).ready(function () {15. // Run on the first time the document has been loaded16. app.init();17. });
  • MODULES• src/modules/views.js :1. app.Views.main = Backbone.View.extend({2. initialize: function () {3. // View init4. console.log(Main view initialized !);5. }6. });• Add view in app.js• src/app.js :1. init: function () {2. // Init3. this.views.main = new this.Views.main();4. }
  • PLAN1. Introduction.2. MVC and other models in JavaScript.3. Third party library for Backbone.4. Model with Backbone.5. Collection with Backbone.6. View with Backbone.7. Demo.8. Question and Answer?
  • MODEL• Manage data(CVDP).• Change the data of a model  notify changes to view1. var Photo = Backbone.Model.extend({2. // Default attributes for the photo3. defaults: {4. src: "placeholder.jpg",5. caption: "A default image",6. viewed: false7. },8. // Ensure that each photo created has an `src`.9. initialize: function () {10. this.set({ "src": this.defaults.src });11. }12. });
  • MODEL(CONT.)• Validation data.• Persistence data on server.• Allow multiple views on a model.• …
  • PLAN1. Introduction.2. MVC and other models in JavaScript.3. Third party library for Backbone.4. Model with Backbone.5. Collection with Backbone.6. View with Backbone.7. Demo.8. Question and Answer?
  • COLLECTION• Group models .• Trigger events like add/remove/refresh.• Can fetch models from a given URL.• Can keep the model sorted.• Write application logic based on notifications from the group should any model it contains be changed. needn’t to watch every individual model instance.
  • COLLECTION(CONT.)1.var PhotoGallery = Backbone.Collection.extend({2. // Reference to this collections model.3. model: Photo,4. // Filter down the list of all photos5. // that have been viewed6. viewed: function() {7. return this.filter(function(photo){8. return photo.get(viewed);9. });10. },11. // Filter down the list to only photos that12. // have not yet been viewed13. unviewed: function() {14. return this.without.apply(this, this.viewed());15. }16.});
  • PLAN1. Introduction.2. MVC and other models in JavaScript.3. Third party library for Backbone.4. Model with Backbone.5. Collection with Backbone.6. View with Backbone.7. Demo.8. Question and Answer?
  • VIEW• Visual representation of models .• Observes a model and is notified when the model changes  update accordingly.• View in Backbone isn’t a CONTROLLER , it just can add an event listener to delegate handling the behavior to the controller.
  • 1.var buildPhotoView = function( photoModel, photoController ){2. var base = document.createElement(div),3. photoEl = document.createElement(div);4. base.appendChild(photoEl);5. var render= function(){6. // We use a templating library such as Underscore7. // templating which generates the HTML for our photo entry8. photoEl.innerHTML = _.template(photoTemplate, {src: photoModel.getSrc()});9. }10. photoModel.addSubscriber( render );11. photoEl.addEventListener(click, function(){12. photoController.handleEvent(click, photoModel );13. });14. var show = function(){15. photoEl.style.display = ;16. }17. var hide = function(){18. photoEl.style.display = none;19. }20. return{21. showView: show,22. hideView: hide23. }24.}
  • CONTROLLER• Backbone didn’t actually provide a Controller.• In Backbone, View and Router does a little similar to a Controller.• Router binds the event for a Model and have View for respond to this event.1. var PhotoRouter = Backbone.Router.extend({2. routes: { "photos/:id": "route" },3. route: function(id) {4. var item = photoCollection.get(id);5. var view = new PhotoView({ model: item });6. something.html( view.render().el );7. }8. }):
  • BENEFITS OF MVC1. Easier overall maintenance.2. Decoupling models and views  easy to write unit test and business logic.3. Duplication of low-level model and controller code is eliminated across the application.4. Work simultaneously between core logic and user interface.
  • NOTES• Core components: Model, View, Collection, Router.• Complete documentation.• Used by large companies such as SoundCloud and Foursquare.• Event-driven communication.• No default templating engine.• Clear and flexible conventions for structuring applications.• …
  • PLUGIN• Deeply nested models: • Backbone Relational • Ligament• Store data: • Backbone localStorage • Small Backbone ORM• View: • LayoutManager • Backbone.Marionette• More at here.
  • DEMO• Other demo can view here: • Todos • Backbone Google Book • Todos of Niquet • …
  • QUESTION AND ANSWER
  • THANK YOU FOR YOUR ATTENTIONS !