background preloader

Backbone.js

Facebook Twitter

Backbone Model view ... Persistence? - Safari Blog. A guest post by Tim Ruffles, a Ruby & JavaScript developer based in London who teaches and mentors developers, and works on SidekickJS, a code-quality tracker for teams. Previously he was a front-end tech-lead for Skimlinks and Picklive; he talks about Javascript at conferences and events and can be reached at @timruffles. In a previous post titled Decoupling Backbone.js Applications with pub/sub we looked at how pub/sub makes it easier to change, test and reuse your Backbone.js code by reducing coupling.

Follow along in this post for details on how to split your model from persistence in Backbone.js to bring the same advantages as splitting models from views. Backbone.js is an MVC library, but since there’s no place in the acronym for persistence, it’s a common anti-pattern to see persistence and model being entirely confused. Your Backbone model should be designed around your domain – these are the things your users care about and you could discuss with them. Let’s Look at an Example. README.md at master · jeromegn/Backbone.localStorage. Backbone.js: Hacker's Guide. There’s no denying the popularity and impact that Backbone.js (License: MIT, GitHub: documentcloud / backbone) by Jeremy Ashkenas and DocumentCloud has made. Although the documentation and examples are excellent, I thought it would be interesting to review the code on a more technical level. Hopefully this will give readers a deeper understanding of Backbone, and as the MVC series progresses these code reviews should prove useful in accurately comparing the many competing frameworks.

Follow me on a guided tour through Backbone’s source to really learn how it works and what it provides. Namespace and Conflict Management Like most client-side projects, Backbone.js wraps everything in an immediately-invoked function expression: (function(){ // Backbone.js}).call(this); Several things happen during this configuration stage. Var root = this;var previousBackbone = root.Backbone; Backbone.noConflict = function() { root.Backbone = previousBackbone; return this;}; var Backbone;if (typeof exports ! Extensions, Plugins, Resources · jashkenas/backbone Wiki. Dependencies Underscore.js Backbone's only hard dependency. JSON2.js Needed if you'd like to parse and serialize JSON in older browsers (read: "Internet Explorer") jQuery Recommended for DOM manipulation and Ajax.

Lo-Dash An Underscore alternative with customs builds and additional features. Zepto A jQuery alternative for mobile apps NB: Zepto isn't fully compatible with jQuery, use at your own risk Backbone.Native A tiny drop-in replacement for jQuery to allow Backbone to work while relying on only native DOM APIs. Exoskeleton A faster and leaner Backbone for your HTML5 apps. Backbone fork with 100% optional dependencies, speed improvements and other enhancements. Backbone Game Engine An elementary HTML5 Canvas game engine built on Backbone. Development Tools Backbone Eye. Theironcook/Backbone.ModelBinder. Backbone-boilerplate/backbone-boilerplate. Backbone.js Tips And Patterns. Advertisement Backbone.js1 is a popular open-source JavaScript “MV*” framework that has gained significant traction since its first release a little over three years ago. Although Backbone.js provides structure to JavaScript applications, it leaves a lot of design patterns and decisions up to the developer, for better or worse, and developers run into many common problems when they first begin developing in Backbone.js.

Therefore, in this article, we’ll explore different design patterns that you can use in your Backbone.js applications, and we’ll look at many of the common gotchas that trip up developers. 2Applications, like buildings, are best built following known patterns. (Image: Matthew Rutledge3) Perform Deep Copies Of Objects JavaScript treats all primitive-type variables as pass-by-value.

Var helloWorld = “Hello World”;var helloWorldCopy = helloWorld; For example, the code above will set helloWorldCopy equal to the value of helloWorld. And let’s say you create a new person object: Backbone.js. 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.

The project is hosted on GitHub, and the annotated source code is available, as well as an online test suite, an example application, a list of tutorials and a long list of real-world projects that use Backbone. Backbone is available for use under the MIT software license. You can report bugs and discuss features on the GitHub issues page, on Freenode IRC in the #documentcloud channel, post questions to the Google Group, add pages to the wiki or send tweets to @documentcloud. Backbone is an open-source component of DocumentCloud. Downloads & Dependencies (Right-click, and use "Save As") Backbone's only hard dependency is Underscore.js ( >= 1.5.0). Introduction Many of the examples that follow are runnable. Upgrading to 1.1.