Backbone.js

7,696 views

Published on

A little presentation about Backbone.js

Published in: Education, Technology

Backbone.js

  1. 1. INTRODUCTION THO VO
  2. 2. 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?
  3. 3. 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.
  4. 4. 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
  5. 5. 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.
  6. 6. 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.
  7. 7. 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?
  8. 8. MVC AND OTHER MODELS IN JAVASCRIPT.• MV*• MVC• MVP• MVVM• …
  9. 9. FRAMEWORKS• Backbone.js• Sprout Core 1.x• Sammy.js• Spine.js• Cappuccino• Knockout.js• JavaScript MVC• Google Web Toolkit• Batman.js
  10. 10. 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?
  11. 11. THIRD PARTY LIBRARY FOR BACKBONE.• Selector: • jQuery • YUI • Zepto• Template: • Underscore(hard dependency) • Handlebar • Tempo • Mustache
  12. 12. 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…
  13. 13. 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>
  14. 14. 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. });
  15. 15. 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. }
  16. 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?
  17. 17. 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. });
  18. 18. MODEL(CONT.)• Validation data.• Persistence data on server.• Allow multiple views on a model.• …
  19. 19. 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?
  20. 20. 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.
  21. 21. 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.});
  22. 22. 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?
  23. 23. 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.
  24. 24. 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.}
  25. 25. 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. }):
  26. 26. 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.
  27. 27. 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.• …
  28. 28. PLUGIN• Deeply nested models: • Backbone Relational • Ligament• Store data: • Backbone localStorage • Small Backbone ORM• View: • LayoutManager • Backbone.Marionette• More at here.
  29. 29. DEMO• Other demo can view here: • Todos • Backbone Google Book • Todos of Niquet • …
  30. 30. QUESTION AND ANSWER
  31. 31. THANK YOU FOR YOUR ATTENTIONS !

×