Give Your Apps a Backbone(.js)(joezimjs.com)
joezimjs.com
Give Your Apps a Backbone(.js)
http://www.joezimjs.com/javascript/give-your-apps-a-backbone-js/
2 comments
Heads up. AngularJS is getting ready for its 1.0 release after moving this year from a 20%-time Google developer's project to a well-resourced one with full-time developers. It's going to really shake this space up.
YUI3's APP framework is also a good and IMO a better option.
What features/design choices do you prefer in YUI3's app framework? (which appears to be here, for the curious: http://yuilibrary.com/yui/docs/app/ )
Holy crap. The same paradigms introduced by Backbone are copied by that project with some minor terminology differences (eg Backbone's old name for a Router ("Controller"), a Collection is a ModelList, initialize vs initializer). Of course it's tightly bound to YUI's object model (Y.Base, Y.Node, YUI dom abstractions vs jQuery-like).
These paradigms weren't introduced by Backbone - they are the standard MVC(Model/View/Controller) constructs in use across many technologies.
What paradigms did you think I was referring to? (I didn't actually [mean to] specify any).
To clarify, these are some of what I'm referring to (apologies for the code-style formatting - just trying to produce a list):
Also, this is not necessarily a bad thing.
To clarify, these are some of what I'm referring to (apologies for the code-style formatting - just trying to produce a list):
- Backbone.Model/YUI App Model:
- Backbone's .previousAttributes vs YUI's .lastChange, used to get the
previous value of a changed attribute since the last "change" event
- A separate, abstracted Model sync layer for communicating with a server
(side note: Backbone 0.9's "sync" event is being introduced in YUI in the
next release: http://stage.yuilibrary.com/yui/docs/model/index.html)
- .cid (Backbone) vs .clientId (YUI), auto-generated id guaranteed to be
unique among all models on the current page.
- configuring how the .id property is populated by overriding the
.idAttribute property
- .collection (Backbone: the Collection containing this model) vs .lists
(YUI: array of ModelLists containing this model)
- Backbone.View/YUI App View:
- .events object literal property that specifies event bindings via dom
event delegation, with the css selector in the key
- .el (Backbone) vs .container (YUI): managed property representing the
view's "container". All delegated events are bound to this element.
- Backbone.Collection/YUI App ModelList:
- .model specifying the underlying model type by referencing the type's
constructor function in the prototype definition directly (I've seen
it referenced by global name before, never by constructor reference
as Backbone does it)
- .getByCid() (Backbone) and getByClientId() (YUI): get a model out of a
collection via its auto-generated client id
- Backbone.Router/YUI App Controller: class that maps URL changes to methods
on the instance. They're also renaming "Controller" to "Router" in an
upcoming release, following Backbone's doing of the same in 0.5.3.
Also, this is not necessarily a bad thing.
Most of these have very close parallels in previous MVC frameworks, such as Rails and Apple's Cocoa. I think the biggest reason YUI3 and Backbone look more similar to each other than to those is because they're both client-side JavaScript frameworks instead of backend like Rails or desktop like Cocoa.
You can get a preview of the upcoming release docs for App at http://stage.yuilibrary.com/yui/docs/app
Backbone invented nothing, it was not even the first MVC JavaScript library.
Thanks for the heads up. Would you mind sharing some details explaining why?
I have no experience with either option so an in-depth comparison would be tremendously valuable to me.
I have no experience with either option so an in-depth comparison would be tremendously valuable to me.
On what grounds do you say that?
Not necessarily disagreeing, I've never used YUI3, but I'd love to hear more about it.
I've recently been dabbling in Backbone and, frankly, I'm struggling with lack of documentation. A better documented "competitor" in this space would likely win me as a user.
I was hoping it would be Ember/Amber, or something to that extent, but that doesn't appear to be significantly better documented either.
What do you consider YUI's strengths / weaknesses vs. Backbone? (Please say documentation).
Not necessarily disagreeing, I've never used YUI3, but I'd love to hear more about it.
I've recently been dabbling in Backbone and, frankly, I'm struggling with lack of documentation. A better documented "competitor" in this space would likely win me as a user.
I was hoping it would be Ember/Amber, or something to that extent, but that doesn't appear to be significantly better documented either.
What do you consider YUI's strengths / weaknesses vs. Backbone? (Please say documentation).
How would you like the documentation to be improved over the resources that currently exist at Backbonejs.org?
I think that the documentation for backbone and underscore is excellent. And the single page, annotated source code is probably even more helpful.
The thing that I wish the project had was some official opinionated best practices guidelines. How to structure a growing app, build/minify workflow, pitfalls, etc. (Note: this wish may be due to my utter noobishness and I'm mostly monitoring the mailing list and reading all the questions to learn)
Other than that, I wish AMD was going to be supported in core, but tbranyen's requirejs use (shim) plugin is going pretty well.
The thing that I wish the project had was some official opinionated best practices guidelines. How to structure a growing app, build/minify workflow, pitfalls, etc. (Note: this wish may be due to my utter noobishness and I'm mostly monitoring the mailing list and reading all the questions to learn)
Other than that, I wish AMD was going to be supported in core, but tbranyen's requirejs use (shim) plugin is going pretty well.
"Lack of guidance" is the way I'd describe it. The documentation is great, but it didn't help to steer me away from making architectural decisions that don't work well with Backbone when I was doing my first experiments.
To follow up -- what sort of architectural decisions were those?
I'll try to think of examples and come back to it tomorrow.
For now: One thing that I'm still not clear on is when to wrap .get/.set.
Should I always write my own getters/setters and only use .get/.set internally? Right now I'm only wrapping them when the attributes need special processing, which leads to an inconsistent-feeling API.
For now: One thing that I'm still not clear on is when to wrap .get/.set.
Should I always write my own getters/setters and only use .get/.set internally? Right now I'm only wrapping them when the attributes need special processing, which leads to an inconsistent-feeling API.
I'd lean towards never, unless you have a case with really special semantics.
For run-of-the-mill attribute massaging, I'd just define a new method on the model specifically for that purpose. eg.
For run-of-the-mill attribute massaging, I'd just define a new method on the model specifically for that purpose. eg.
book.loadFromAmazon(amazonJSON)Hmmm, interesting. Here's a concrete example:
I've got an 'Organization' model and a 'Person' model. I want to use them interchangeably in some templates, so I need to be able to get their names in a consistent way.
An Organization just has a 'name', but a Person has a 'first_name' and a 'last_name'. I've been using a 'displayName' method to encapsulate the difference; would it make more sense to do something like:
I've got an 'Organization' model and a 'Person' model. I want to use them interchangeably in some templates, so I need to be able to get their names in a consistent way.
An Organization just has a 'name', but a Person has a 'first_name' and a 'last_name'. I've been using a 'displayName' method to encapsulate the difference; would it make more sense to do something like:
var Person = Backbone.Model.extend({
initialize: function() {
var name = this.get('first_name') + ' ' + this.get('last_name');
this.set({ name: name }, { silent: true });
}
});.displayName() seems like a perfect encapsulation IMO.
That is perhaps a better answer than the one I gave.
Without said guidance, I ended up created multiple views to represent the same area on the page instead of using subtemplates.
Same thing with Collections -- on my first try at something serious, I ended up with multiple collections to represent the same data set, but in different states.
Perhaps, for people who have been working extensively with Javascript before Backbone, this comes more intuitively, but for me, it's been a pretty painstaking process.
In addition to that, conflicting guidance from the various unofficial docs, without explanation of why they did something differently, led me to wondering which way made sense, and it generally wasn't until well after implementation that I realized I'd done it the wrong way.
Without said guidance, I ended up created multiple views to represent the same area on the page instead of using subtemplates.
Same thing with Collections -- on my first try at something serious, I ended up with multiple collections to represent the same data set, but in different states.
Perhaps, for people who have been working extensively with Javascript before Backbone, this comes more intuitively, but for me, it's been a pretty painstaking process.
In addition to that, conflicting guidance from the various unofficial docs, without explanation of why they did something differently, led me to wondering which way made sense, and it generally wasn't until well after implementation that I realized I'd done it the wrong way.
I'm also curious. I've found the Backbone and Underscore documentation to be pretty good actually. And, in case I'm wondering what a function does _exactly_, the annotated source code (http://backbonejs.org/docs/backbone.html) is more than enough usually.
Perhaps "lack of documentation" isn't the best synopsis. "lack of documentation for people who don't know what they're doing" is probably more accurate.
I've found the documentation to be a great reference, but invariably, due to lack of examples, if I'm trying to implement something I haven't used before, I have to scour the internet for other information before I can generally make sense of the official backbone docs.
The best documentation I've found thus far has been other people's projects in Github. While trying not to cargo-cult copy/paste, seeing somebody else implement a feature similar to what I'm trying to do has been the best for me.
I've found the documentation to be a great reference, but invariably, due to lack of examples, if I'm trying to implement something I haven't used before, I have to scour the internet for other information before I can generally make sense of the official backbone docs.
The best documentation I've found thus far has been other people's projects in Github. While trying not to cargo-cult copy/paste, seeing somebody else implement a feature similar to what I'm trying to do has been the best for me.
The Spine documentation is fantastic.
http://spinejs.com/
http://spinejs.com/