Backbone.js v0.9.10 Released | Hacker News Reader

Backbone.js v0.9.10 Released

backbonejs.org

78 pointsphilfreo41 comments

"Most importantly, Backbone events have two new methods: listenTo and stopListening... When you destroy Views with view.remove(), this will now be done automatically"

Well that seems incredibly useful.

This was added in December with 0.9.9 - but yes, it's very useful :)

In fact, all but the last 2 items on the list are from 0.9.9: http://backbonejs.org/#changelog

Wait, so in previous versions, when you destroy a view, event listeners weren't destroyed? I haven't noticed any issues in my Backbone app but this seems like it could spiral into a memory issue.

Yes, this is (was?) a long standing problem, they are called "zombie events". Here's a famous post on the issue: http://lostechies.com/derickbailey/2011/09/15/zombies-run-ma...

Yes. The event listeners were not removed with currentView.remove(). Had to use currentView.unbind() to remove the event listeners.

Those were added in 0.9.9, and yes -- they might be useful. If your app tends to have views and models be created and destroyed together on the same cycle, then you don't need to ever `stopListening`. Garbage collection just works as it should.

The new-ish methods are handy when your models live longer then your views do. Because this inversion tracks the listeners on the object that's listening to events, instead of the object that's emitting them, it makes it easier to unbind all of the things a view is listening to, when you want to remove just that view. To that end, `view.remove()` stops listening automatically.

> Backbone's only hard dependency is either Underscore.js ( >= 1.4.3) or Lo-Dash

First I'm hearing of Lo-Dash. How long has this been in the Backbone.org docs?

Appears there was a fair bit of tension in it's dev history. Eg: https://github.com/documentcloud/underscore/commit/4e4bc194c...

Backbone begot Spine, Underscore begot Lo-Dash... What about CoffeeScript? TeaMacro? Jeremy must be having a blast.

CoffeeScript begat Coco. And Coco begat LiveScript.

Lo-Dash is a mostly-compatible rewrite of Underscore, with a fascinatingly different approach to the codebase. Instead of using little functions that are implemented in terms of each other, it relies on code generation to create (eval) explicit large and optimized versions of many of the core iteration functions at load time, in your browser:

https://github.com/bestiejs/lodash/blob/master/lodash.js#L35...

It's a very fun bit of code, and a great example of how differently a fork can be implemented while preserving more or less the same API. There's never been any tension about the project itself -- just about some of the "marketing" methods used to pitch it in the past. That said, Lo-Dash's main developer is contributing to Underscore directly as well these days, so it's all copacetic.

From the changelog:

> Model validation is now only enforced by default in Model#save and no longer enforced by default upon construction or in Model#set, unless the {validate:true} option is passed.

From the documentation on Model#set:

> If the model has a validate method, it will be validated before the attributes are set, no changes will occur if the validation fails, and set will return false. Otherwise, set returns a reference to the model. You may also pass an error callback in the options, which will be invoked alongside the "error" event, should validation fail.

Is the documentation out of sync, or do I not understand the changelog correctly?

Thanks for catching that. I've removed the outdated paragraph and republished the docs. If you notice anything else amiss, please let me know.

Thanks, I was honestly confused, not trying to nit pick.

---

Anyone know the best way to make it so set defaults to {validate:true}? Override Backbone.Model.set, extend options and call original?

Sure (though I recommend just updating your code instead...)

Only reason it's tricky is because there are two different forms of attributes that can be passed to set. Something like this should work:

  var oldSet = Backbone.Model.prototype.set;
  Backbone.Model.prototype.set = function(key, val, options) {
      if (key == null) return this;
      if (typeof key === 'object') {
        options = val;
      }
      options || (options = {});
      options.validate = true;
      oldSet.call(this, key, val, options);
  };

Another framework worth checking out if you're into JavaScript MVC is AngularJS (http://angularjs.org).

I'd be interested to hear from anyone who's used both Backbone and Angular.

I've been writing my first single-page app (yeah, yeah, behind the times) using Backbone, and at first it was really exciting and intuitive, but I'm starting to realize Backbone is a pretty, er, bare-bones lib. Everyone seemed to suggest Handlebars as a template lib, so I added that to my project, and RequireJS to manage those two libs and their dependencies, and the RequireJS text plugin to load templates from other files in the project, and now it all just seems like a mess. The promise of a framework with everything you need, right out of the box, is tempting.

Edit: Most of the alternatives (e.g. Ember, Angular, Knockout, Meteor, etc.) are already in my bookmarks. I'm looking for reports from people who actually used the things, not links.

For more complete frameworks around Backbone, try:

https://github.com/tbranyen/backbone-boilerplate

http://walmartlabs.github.com/thorax/

https://github.com/marionettejs/backbone.marionette

https://github.com/chaplinjs/chaplin

Outside of Backbone, there's also http://emberjs.com/

I think even going at step farther and throwing in Knockout too. I agree with everything you said about Backbone.

That's pretty much it. If you're into having absolute control over your code and how it's structured Backbone is where it's at, if you don't want to deal with the plumbing and don't mind the framework having an opinion on how your write and structure code, then angular is probably for you.

I write and use alot of software. Normally number crunching on servers. However, I recently started seriously learning javascript. I had avoided HTML/javascript for years as they were horrible systems to develop in compared to every other type of software system in existence. However, with HTML 5 + cloud computing platforms I thought these systems are probably mature enough to start using. Anyway, so I learnt javascript and have now built 2 cloud apps. The first was to learn the basic ropes of GAE with JS. The second one is much nearer to to what I would consider complicated (but still one hop from my final target app). I realised plain JS wasn't scaling (regarding software entropy) so I looked at frameworks that could tidy things up. Note I have plenty of experience choosing software APIs to connect different systems together, but next to no experience of JS specifically. Anyway I tried backbone and I was like "is that it? the JS community is blown away by a fricking event model?". It seems trivial to me.

Then I tried AngularJS and I was blown away. "Yes!" I exclaimed "JS/HTML5 has truly come of age". It is a beautiful thing that saves shit tons of time. And as I have got deeper into it, I hardly write JS anymore, YOU CAN DO 95% OF PRESENTATION LOGIC IN THE HTML. You can modularise. You can ... test! Its amazing. IT WILL ENABLE YOU TO STRUCTURE REALLY REALLY BIG PROJECTS! I hear similar evangelism from the knockoutJS community, so I am keen to try that out too, although I am getting pretty proficient with AngularJS and I personally think its got more chance of survival given its googly backers, and its more likely that chrome will start supporting AngularJS features natively. So I am betting on longevity as well as functionality with NG.

Ugh, but this is just terrible:

I guess I'm a purist.

Angular supports many styles of markup. Other valid forms of that snippet are:

Using xml namespace: <input type="checkbox" ng:model="todo.done">

Using underscore in the attribute name: <input type="checkbox" ng_model="todo.done">

As an x-* attribute: <input type="checkbox" x-ng-model="todo.done">

As a HTML5 data attribute: <input type="checkbox" data-ng-model="todo.done">

I think their may be a few more, but in any case, Angular is flexible enough that you can choose the representation that is best for you and your team.

What about it do you find terrible? The declarative nature of the binding? Or just the fact that it isn't valid according to the HTML spec?

It's invalid HTML and it's destroying the separation between logic and presentation/content.

This was a deal-breaker me, when I was evaluating Angular and Ember ~6 months ago. I eventually chose Ember and things worked out pretty well.

You must like bloating your project with pages of trivial javascript accomplishing trivial functionality.

I really don't want basic stuff in my application logic.

Allowing users to flip arbitrary booleans is a bit like declaring a public variable though. You can of course make them go through a setter if you prefer encapsulation.

> YOU CAN DO 95% OF PRESENTATION LOGIC IN THE HTML

For us developers that have fought for years for separation between content, presentation, and logic, this is the very reason Angular/Ember/Knockout are not as popular as Backbone or other frameworks.

i've been using ember for some time now for a complex application and everything seems to be clearly separated. Easily integrated with jqm and generally its model and controllers can be used effortlessly by other frameworks as well. Actually the complexity depends on the context and kind of integration.

Note I said presentation logic, not application logic. Deciding when a button should grey out etc. is presentation logic. Its the kind of thing you fiddle with after you have your basic system done. I don't believe these minor look and feel stuff should be in the same boat as business application logic. Note you said fighting with content, presentation, and logic. In desktop apps MVC architectures are trivial to implement, no framework necessary. HTML JS are the things that are fighting you. In angular it doesn't. Complex presentation goes in directives (custom HTML tags! Woo! OO comes to HTML). Trivial boolean stuff can stay in the HTML. Business logic goes in the scoped controllers (woo, encapsulation made easy in JS).

Exactly the question I had yesterday.

http://stackoverflow.com/questions/6548826/angular-js-vs-bac...

Thanks. Although it was closed (not surprising due to StackOverflow's policies), it happens that there are some great answers there.

Been using AngularJS to reproduce a Backbone App :

markme (in AngularJS) : http://markme.alwaysdata.net/

which is a clone bookmarly.com , done with backbone.

The source is here :

https://github.com/Mparaiso/silex-bookmarkly

AngularJS is great , it doesnt do everything so you still need to build your own stack, as for backbone ( jquery ,bootstrap, and even requirejs as it doesnt do AMD out of the box ... ). It comes with a lot of testing tools , make it easy to mock backends , DOM elements ...

It is the best frontend framework for LOB , period. It has builtin form support , filtering , validation , is easy to integrate with bootstrap , and extend , and produce sane code , unlike ExtJS for instance( SenchaTouch is however very good for mobile apps , it is blazing fast. ).

If you are doing some animation heavy stuff ,where you need total control over dom elements lifecycle , i would not recommand it, backbone is better for that , i still use backbone for data light apps.

If you like jQuery and DOM use Backbone. AngularJS does a lot more than Backbone and Angular forces you to do things its way, meaning to avoid doing DOM manipulation outside of the framework, which isn't necessarily bad but requires more of a commitment and learning.

AngularJS is great for simple apps but once I got beyond that I ended up fighting how to makes things work with the ng-* attributes often having to resort to $apply. Things that are simple with underscore templates and jQuery (the Backbone way) can become very frustrating in AngularJS.

AngularJS reminds me of ASP.NET controls with repeaters and coding through attributes. That works for a lot of people but I'm more comfortable with templates and jQuery.

I've been using qooxdoo for a while. It lets you write cross browser js like you write qt. Worth checking out.

I've worked on a reasonably large Backbone app in production and I've written several toy apps with Angular.

I think that a lot of people dismiss Angular as yet-another-mvc-framework without ever discovering the key elements of Angular that are actually novel and worthy of study. Personally, I think that Angular is a local maximum in client-side JavaScript app development. But even if you don't agree, you should at least understand how it is different.

1) Angular prefers declarative

This doesn't mean you don't write procedural code. This means that if you want to do something proceedural, you should package it up as a Directive. Directives are where behavior and logic live. Your templates simply arrange and parameterize a tree of directives. This means that you have limited and well understood moving parts that can be tested in isolation, in combination, or in the application context. Contrast with the traditional big bag of event callbacks, which can only be tested in the application context and are more difficult to re-use in other application contexts.

2) Angular works like a game engine

Most traditional UI frameworks are a graph of intertwined callbacks. Games, however, traditionally have a pair of functions called Update and Render. The Update functions permutes the world and the Render function draws the new world. Angular works similarly, but it might not be immediately obvious. There is a "Dirty Checking" pass, where your view models, a simple hierarchy of poorly-named "scopes" are essentially diff-ed against the previous iteration. Then the Directives take over and permute the DOM to match the new view model.

Let's call the "Controller" part of the "ViewModel" and then just simplify that down to "Model". Inherently, Model and View systems are co-dependent. You have a graph like M <--> V. Angular's system graph is less like single bi-directional edge, and more like two directed edges in a cycle. That makes little difference when viewed abstractly with the two subsystems as nodes. However, once you break M and V down into subgraphs, the traditional Model & View systems look like a spaghetti mess of bi-directional relationships. An Angular application, on the other hand, would look like less like a lattice and more like a circle.

The promise of a framework with everything you need, right out of the box, is tempting.

There is always the compromise, however, in that frameworks that have "everything" tend to force you to abide by their view of the world. AngularJS, for instance, offers many arguable advantages for some tasks, but can turn into an enormous impediment whenever you want to go outside of the painted lines. Of course opinions differ, but I prefer that relative simplicity of backbone -- it is more convention than framework, really -- because it scales to full-products with less friction.

I found the JavaScript Jabber podcast [1] to be a great source of information on front-end JavaScript Frameworks, as well as some discussion with framewor authors that can help figure out how they differ.

Backbone: http://javascriptjabber.com/004-jsj-backbone-js-with-jeremy-... Ember: http://javascriptjabber.com/034-jsj-ember-js/ Angular: http://javascriptjabber.com/032-jsj-angular-js/ Knockout: http://javascriptjabber.com/013-jsj-knockout-js-with-steven-... enyo: http://javascriptjabber.com/033-jsj-enyo-js/

[1]http://javascriptjabber.com/

I have used backbone and angular, created a small Quiz application in both the frameworks.

I would say with Angular, what you write is not javascript , it is Angular JavaScript, which gets compiled into javascript on running over compiler. Having been worked with GWT for many years, I am disappointed with Angular doing the same mistakes of not allowing the developers to think in terms of Javascript. But in terms of the framework, which they had brought in.

However, Backbone gives me lot of freedom in customizing the app by adding Javascript and using its model view observable logic. If i find any shortcoming in backbone, i can see a plugin available in the Community. Which is really great.

To conclude , If your are experienced JS developer (JS ninja), you will love backbone. If you are intermediate/beginner JS developer you will love angular. However, this is just my perspective.

The actual 0.9.10 changelog is at http://backbonejs.org/#changelog

Reply on news.ycombinator.com