Deep Dive Into Backbone.js and Underscore.js Internals
•
5 gefällt mir•1,426 views
Backbone.js is a popular JavaScript framework with over 1400 lines of code. It is made up of several key components including Models, Collections, Views and a Router. The framework relies heavily on Underscore.js for functions like each and extend. It allows developers to easily build single page applications by providing structure for common tasks like syncing models with the server and handling browser history.
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (11)
Ähnlich wie Deep Dive Into Backbone.js and Underscore.js Internals
Ähnlich wie Deep Dive Into Backbone.js and Underscore.js Internals (20)
Deep Dive Into Backbone.js and Underscore.js Internals
- 1. Deep Dive Into Backbone.js Internals + Underscore.js. Mauvis Ledford CTO, Pathbrite
- 2. Backbone.js: Quick Facts • 0.1.0 released Oct 13, 2010, latest stable 0.9.2 – 7 months ago • Used in dozens of popular web and mobile web sites out there: • Soundcloud, Stripe, Grooveshark, Do, BitTorrent, Nike+, … 2
- 3. Backbone.js: Source Code Analysis Lines of code • 1432 lines w/ comments. • 856 lines without. Size • 52kb raw w/ comments • 30k without • 5.6kb packed and gzipped Underscore • 4kb packed and gzipped 3
- 4. Backbone.js: 856 line breakdown • Model (234) inheritance, 2% • Collection (218) misc, .sync, 3% • View (75) 8% Model, • Router (46) 29% • History (116) History, 15% • Event (65) • Sync (29) Router, 6% • Inherit (17) View, Collection, • Misc (55) 10% 27% 4
- 5. How to build a good framework? Starts with these 3. 5 Taken from the PunyMCE framework.
- 6. Same three functions in other libraries jQuery • jQuery.each • jQuery.extend • jQuery.isFunction, jQuery.isArray, jQuery.isEmptyObject, jQuery.isNumeric Underscore • _.each • _.extend • _.isFunction, _.isArray, _.isEmpty, _.has, _.isEqual 6
- 7. _.extend({},{},…) Backbone source uses this heavily. 7
- 8. Diving into the code: top down Environment setup. Anonymous function to encapsulate framework setup. Calling anonymous function in the context of global object. Node: global DOM: window 8
- 9. Diving into the code: top down Two checks: “exports” and “require”. Preparing for jQuery- … like “noConflict” Checks for existence of global “exports” variable. If exists, assume we are serverside. … Similarily, if underscore isn’t loaded and global “require” exists include underscore lib. 9 Let your knowledge shine
- 10. Diving into the code: top down Supports jQuery, NoConflict and optional DOM library. Zepto, or Ender … Allows you to restore Backbone namespace to previous Backbone. … Used with Backbone.sync method. 10
- 11. Diving into the code: top down Event class, so important! … All of Backbone’s classes inherit this class and now have these methods. … Backwards compatibility 11
- 12. Diving into the code: top down Mixing Event class in to custom class. … … 12
- 13. Diving into the code: top down Model class … Every new model gets a unique id. Attributes are set silently on model creation. Last step, call the models init. … 13
- 14. Diving into the code: top down Model class … Notice that `Events` class extends `Model.prototype` which is then extended by an anonymous object. … 14
- 15. Diving into the code: top down Collection class If `comparator` function is passed new models are sorted in order. … … 15
- 16. Diving into the code: top down Collection class … Notice that `Events` class is mixed in again. Additional underscore methods are added directly to `Collection.prototype`. … 16
- 17. Diving into the code: top down Demonstrating models and collections on https://pathbrite.com/portfolios . // Count portfolios rrripple.data.portfolios.length; // Get collection JSON list. rrripple.data.portfolios.toJSON(); // Get model JSON list. rrripple.data.portfolios.first().toJSON(); // Add new portfolio item. rrripple.data.portfolios.add({ title : 'Watermelon' }); 17
- 18. Diving into the code: top down Router class. … … Show sample routes. 18
- 19. Diving into the code: top down History class … … Backbone.history.navigate('/portfolios', { trigger: true }); 19
- 20. Diving into the code: top down View class … `ensureElement` sets `this.el` to a detached div if no el or tagName specified. Arguments passed with these keys are applied directly to the instantiated view during `this._configure`, the rest can be found in `view.options`. … Show: rp.classes.views.popup in editor. var view = new rrripple.classes.views.par>als.Se?ngsPopup(); 20
- 21. Diving into the code: top down Inherits functionality … User.prototype.save = function(attrs) { // modify attrs code User.__super__.save.apply(this, arguments); }; Shh! Saved referenced to parents prototype. Let’s you access parents method you could have overwritten on the child. … 21
- 22. Diving into the code: top down Giving all classes extend ability … … Notice `_.extend` != `Collection.extend`!!! 22
- 23. Live Demos Frontend and backend Backbone examples Pathbrite: Backbone as a frontend plaGorm. pathbrite.com Kbot: Turntable robot built on Node and Backbone. github.com/krunkosaurus/kbot 23
- 25. Last year: Don’t Break the Chain Sample responsive Backbone app. hKp://dontbreak.me/ 25