Backbone has made me a better programmer

Backbone is one of those libraries/frameworks/whatever that avoids magic. It's just a pile of reusable parts that make building big javascript applications easier. One can't say the same about, say, Rails. There's a lot of magic in Rails.<p>Not that magic is a bad thing. Magic is what makes Rails good at what it's good at. The downside, though, is that magic-ful frameworks often obscure language mechanics that an inexperienced user of the language would do well to understand. Thus, Rails is awesome for a programmer who's already good at Ruby, but super frustrating for someone learning Ruby.<p>On the other hand, Backbone makes idiomatic use of javascript and lays it on the table in a magic-less way. So not only does a new javascript programmer not have to deal with confounding magic, they can also learn from how Backbone uses javascript, and apply that knowledge outside the scope of the library.<p>I'd never thought of it this way, but I think this is probably one of the most important distinctions between opinionated, magic-y frameworks, and things like Backbone.

When we started using Backbone it was good for awhile until there was so much code duplication all over the place. We decided to build a small declarative API on top of backbone that allows us to easily compose views by mixing in common functionality. It looks something like this:<p><pre><code> AlbumsView = bQuery.view() .set("el", "#albums-view") .init((opts={})-&#62; @readOnly = opts.readOnly or no @app = opts.app ) .use(Mixins.bq.init('albums')) .use(Mixins.bq.collection tag: "#album-list" createView: (m) -&#62; AlbumView = Views.AlbumView(readOnly: @readOnly) new AlbumView { model: m, app: @app } ) .use(Mixins.bq.filterable pred: (album, ftext) -&#62; album.get('title').indexOf(ftext) is 0 filterTag: "#filter" collectionTag: "#album-list" ) .on("click #addNew", -&#62; @collection.create title: "New Album" type: "Album" ) .make() </code></pre> For example, the Mixins.bq.collection plugin abstracts away the common task of adding and removing subviews when new things are added the collection. The filterable plugin abstracts away the common task of filtering collections. Our custom init plugin sets up all the events common to all of our views. In the end make() just returns a BackboneView with all the events set up properly. It has saved us so much time we figure people may actually want to use this as well, we just have to write the documentation and some plugins now :)<p><a href="https://github.com/jb55/bquery" rel="nofollow">https://github.com/jb55/bquery</a>

I didn't really like backbone at all. It was a pain. It didn't offer anything to help you build complex UI.<p>I had to use backbone to build a mildly complicated UI - not so complex, mind you, just something that's supposed to be somewhat interactive.<p>Backbone was no help at all. Its "views" don't really offer anything.<p>Just about 2 weeks ago I discovered knockout.js, and I felt stupid for spending days building something that would probably take an afternoon to do with knockout.js.<p>Then, a week later I discovered angular.js and felt even more stupid.<p>Now I <i>really</i> dislike backbone.js

Unit testing will also force to decouple your code in a similar way. In the first example it is impossible test individually test all the things the code should do without worrying about everything else that is going on (e.g. you need make sure all the elements exist on the page). By moving to an event trigger like you suggest, you can then test that each listener does the correct thing independently of the others. You can have a separate test for 'selector' and 'yet-another-selector' and they don't need to know about each other. As an added benefit you don't need to mock out your ajax call either. Instead you can just fire a "DataModel:update" event in the unit test.<p>I've only recently grokked this aspect of unit testing and I feel like it's made my code an order of magnitude better and more maintainable. Thinking first about how to write code in a decoupled manner also makes unit testing really easy. After having tried unsuccessfully for years to test my code it was a revelation when I that it was because my code was bad that it was hard to test, not that testing is itself hard.<p>Edit: I've tried to illustrate my thoughts more clearly with a copy-cat post to show the parallels between the two: <a href="http://news.ycombinator.com/item?id=4427842" rel="nofollow">http://news.ycombinator.com/item?id=4427842</a>

OT: I keep trying to get into backbone but I just get driven crazy by `get` and `set`. Inspecting your object feels like a world of pain, which is no fun when I'm playing with code. And it also makes it feel like you're not programming js any more. Quite a few years back an old company I used to work for had a similar framework and perhaps it's just latent hatred for that rather annoying framework.<p>I know it's a limitation of the present js because you can't make getters and setters, but it just completely kills my enthusiasm for backbone, which otherwise seems great. Are there any alternatives out there using Object.defineProperty instead? I know it's still not really web ready, but it'd be far more fun to play with.

I actually prefer the second (complicated) example: everything that happens on the success of the call is right there. If it were to grow more complicated than that I'd move it to its own function and perhaps break it into a few functions: not into several objects.<p>I find firing events to be useful when I'm writing code that's not meant to be directly accessed, e.g. a jQuery plugin.

Totally agree with this post - I was a 'JavaScript =~ jQuery' guy before I picked up Backbone - writing hopelessly average jQuery spaghetti (with the best of intentions - I'm a designer and had never looked at JS as a programming language.<p>Backbone has totally changed all of that - learnt so much about design patterns in such a short space of time - shout out to Addy Osmani for writing such down-to-earth, approachable content.

I'm really glad that Backbone has helped you become a better programmer; that's great!<p>But it's worth nothing that this is really a trickle down effect from the creators and maintainers of Backbone making use of great design patterns and using effective programming practices. We should all strive to learn from great code in many languages using the design patterns and practices of many libraries :)<p>*edit: typo

Backbone didn't make me a better programmer, dealing with it's bullshit has.

I think a real example might be better. I did not find the 4 lines of code difficult to read.

I'm also enjoying backbone.js since a few weeks and it helps me write new code without too many callbacks and keep a clean separation between the UI and the data.<p>I also pushed some Emacs Yasnippets templates for backbone.js today, feel free to contribute:<p><a href="https://github.com/kototama/backbone-underscore-snippets" rel="nofollow">https://github.com/kototama/backbone-underscore-snippets</a>

Backbone has only given you the tools to make your code better, you have made yourself whatever you are.

i think it's nice to see some javascript design patterns!

I'm making my way through Jeffery Way's fantastic jQuery series. This looks similar to a Publish/Subscribe concept, also jQuery deferreds are apparently another good way to avoid putting too much code into a success callback.

Am I the only one who still makes websites with very little JS in them? One jQuery thing here and there. Using Backbone would be overkill and to be honest I can't think of one hypothetical project where I would need it.

Don't thank Backbone. It merely uses some of patterns that desktop applications have been using for years.<p>If you really want to be a better programmer, I suggest you learn Cocoa, or other well written desktop framework.

when I realized that in the end backbone is just javascript and suffers from the same inheritence problems due to its crappy prototype object model.<p>And you manually have to deal with event disposal when destroying views in backbone. just google backbone ghost views, I realized maybe it wasn't the best thing for the job after all.<p>edit: the top comment mentions mixins, good stuff <a href="https://github.com/jb55/bquery" rel="nofollow">https://github.com/jb55/bquery</a><p>but personally i can't wait until we get a proper replacement for javascript, like dart maybe.

May I suggest Batman.js :)

TL;DR - This was originally a reply to another commenter. There seems to be a lot of people accusing Backbone of failing to provide things that it has never claimed to provide. This is a bit of a rant so apologies in advance! Obviously YMMV but I've been batting these criticisms of Backbone away left, right, and center recently.<p>To summarise: If you need a framework, then Backbone is not what you're looking for. Use something else, because in all likelihood Backbone will not give you the tools you're looking for. Backbone solves a different problem.<p>====<p>The only real 'major' problem with Backbone.js is that people for some reason think it's a framework. It is not, and as far as I'm aware it has never claimed, or attempted, to be one.<p>The real, underlying problems that Backbone attempts to solve are the following:<p>1: Unstructured, spaghetti JS code.<p>2: Complicated DOM traversal / outrageously convoluted jQuery selectors.<p>3: Total lack of templating.<p>4: Generally crap organisation of your application.<p>Customers / users are constantly requesting more dynamic pages. You know that form which adds a new item to the Foo list? Why does it have to refresh the entire page? Why can't I drag and drop stuff like I can with every other application I use on my computer?<p>Customers are realising that they CAN do cool stuff in their browser now, and you better believe you're going to get a call asking you to turn a previously read-only site into a fully dynamic web app. So you do what every other dev does and rewrite the whole thing from scratch using a proper framework and it's all nicely designed and fully specced out. Or not. What actually happens is your customer doesn't have enough money for a re-write. They want all the existing features, but they want the development phased. Your boss / colleague / dog wouldn't let you re-write the damn thing anyway because they assume that it's just a case of cut + paste from another application somebody who no longer works there wrote 10 years ago. So you do it step by step. You do it page by page / feature by feature. That page which displayed a list of items now displays new items automatically, you don't need to refresh the page! Adding a new item is a simple AJAX call back to the server. Notifications? Done!<p>And then a bug is found. Suddenly you realise you have no real way of isolating your model from the DOM. You're hiding data in hidden input fields so you can retrieve it via jQuery later and do something with it - maybe some AJAX request to the server. It takes you a day to fix a bug that should only take 5 minutes. It takes you a month to add a new feature that should only take a few days.<p>It seems like only in web development do developers have this (when you think about it) really, truly, WEIRD approach to building applications. We let the data provider build our user interface. We don't bother with models - just hide data in the DOM and get it back when a user clicks a button. Need to represent the same data in two different ways? Build a new View in your rails app and add a ton of logic to change how it looks based on the model's data. Why do we have an MVC framework server side and then forget all about it on the client-side?<p>When you think about a web application PROPERLY, the insanity becomes obvious. In what other development domain do we allow the data provider (the server) to render the user interface? Why do we discard models and proper encapsulation? Why do we weave logic into views which should really live in a model / controller? What the hell have we been doing to ourselves?<p>A lot of web app developers think they're building the following:<p><pre><code> Server (Model / Controllers) - GIMME DEM HTMLZ -&#62; Browser(View) </code></pre> What they SHOULD be thinking about building is:<p><pre><code> Server (Data Provider / API) &#60;-- DATA TRANSPORT --&#62; Client (Model / View / Controller) </code></pre> The fact that you're using HTML and JS to develop an application is merely incidental. Your server provides you with some data - it's insanity to also let it define what that data should look like when it arrives client-side.<p>Backbone.js aims to solve THESE problems. It is not an application framework. It gives you a few basic objects and hopes a light bulb flickers on above your head. Suddenly you realise that hey - you CAN isolate your models from your views. You CAN have multiple views per model. You CAN have proper event handling, just like you can in every other non-web application you've ever written. Hurrah! Need to extend your model? Easy! How about displaying the same model - once as a full page, once as a widget in a sidebar? Simple! Need to update the view when your model gets updated? Piece of cake!<p>Backbone is a solution to a lack of structure. It is not a framework. There is no convention, no 'right way' to do things. Backbone is exactly what the name suggests: a spine for your application. Everything else - your framework, your error handling system, your security mechanisms - these are all left for you to figure out yourself. You can pick a framework built on top of Backbone, or you can figure one out for yourself. Backbone doesn't magically turn your web app into a modular, extensible system - but try to build one WITHOUT Backbone or something similar and see how far you get before you realise you've got serious problems.<p><pre><code> &#62; Nested views and automatic view updates. </code></pre> Not Backbone's problem. It doesn't even attempt to solve this issue as far as I'm aware. Solve it yourself, or use something which does.<p><pre><code> &#62; How would you display a list of items in backbone? What do you do when an element is removed/added? </code></pre> How is this Backbone's problem? How would you do it in any other programming language aside from JS? Port it to JS, and your problem's solved.<p><pre><code> &#62; How do you update a view when an element changes? </code></pre> It SHOULD just be as simple as calling your render() method? If your rendering code is incapable of not fucking this up, then it's your own fault.<p>At the end of the day - Backbone is not there to hold your hand. If you can't figure the above problems out on your own, then Backbone is probably not for you. Backbone is even agnostic about how exactly you draw your views onto the page. Want to stick a shit-ton of logic in your template? Fine - but leave Backbone out of it - that's between you and your templating engine!<p>Backbone gives you a solid foundation. Everything else is just arms and legs.