Backbone.js: Hacker's Guide
dailyjs.com
Backbone.js: Hacker's Guide
1–10 of 40 posts
Re: Backbone.js: Hacker's Guide
#2Could anyone show me what kind of problems Backbone.js solves?
Not a description like “it will replace a lot of your jQuery spaghetti boilerplate”, but some actual code:
//this is what I had to write in jQuery
…
…
//this is how I'd do it in Backbone.jsRe: Backbone.js: Hacker's Guide
#3Could anyone show me what kind of problems Backbone.js solves? Not a description like “it will replace a lot of your jQuery spaghetti boilerplate”, but some actual code: //this is what I had to write in jQuery … … //this is how I'd do it in Backbone.js
I'm not sure it lends itself to such contrived examples. A more useful comparison would be the use of backbone to build an entire web app (a small one). Backbone has a number of components and it's not exactly like you can have a three-line diff of the two to explicate the merits of one of the other.
I'd look here: http://addyosmani.github.com/todomvc/
Check out the Backbone one and the jQuery one. They should basically be the same idea, suited to each of the two frameworks.
Also, remember that Backbone and jQuery are not mutually exclusive (quite the contrary -- Backbone actually requires jQuery/Zepto). So you're sort of comparing Tangerines and Oranges.
Re: Backbone.js: Hacker's Guide
#4Could anyone show me what kind of problems Backbone.js solves? Not a description like “it will replace a lot of your jQuery spaghetti boilerplate”, but some actual code: //this is what I had to write in jQuery … … //this is how I'd do it in Backbone.js
The problem Backbone.js solves is primarily that of structure and organization. It's not about replacing jQuery, its about how you organize that code and have a clearer separation of interface, data, and logic.
Re: Backbone.js: Hacker's Guide
#5Could anyone show me what kind of problems Backbone.js solves? Not a description like “it will replace a lot of your jQuery spaghetti boilerplate”, but some actual code: //this is what I had to write in jQuery … … //this is how I'd do it in Backbone.js
Here's my iconoclast answer (with a further caveat that I'm a systems programmer who follows web development in my spare time, not an expert on any of this):
Backbone (or Spine, which is just like Backbone but a tiny bit smaller and written in CoffeeScript) is Yet Another MVC Framework. So think of it like Rails, except this time it runs in the client browser. So instead of translating between SQL and Ruby, you're translating between JSON and DOM. There's a "Model" abstraction, which is just a data structure but has fancy features like the ability to "save" it to the server and the ability to listen for changes. And there are "views", which are just the same old DOM/CSS/jQuery environment you know, with the single stipulation that they need to be associated with exactly one Model. And, just like rails, there are "Controllers" which all the guru's seem to understand just fine but that look like huge messy piles of logic soup to the rest of us.
And, like all MVC frameworks before and after, it's subject to the framework disease. You don't "use" MVC, you "port to it". It infects everything you do, such that you get indoctrinated into the particular MVC subculture you've chosen and spend your time screaming at other people on the internet instead of writing code (edit: c.f. rimantas below.).
Stay away. Or if you must use it, be sane and safe, and stay away from the culture.
Re: Backbone.js: Hacker's Guide
#6Could anyone show me what kind of problems Backbone.js solves? Not a description like “it will replace a lot of your jQuery spaghetti boilerplate”, but some actual code: //this is what I had to write in jQuery … … //this is how I'd do it in Backbone.js
Here's my iconoclast answer (with a further caveat that I'm a systems programmer who follows web development in my spare time, not an expert on any of this): Backbone (or Spine, which is just like Backbone but a tiny bit smaller and written in CoffeeScript) is Yet Another MVC Framework. So think of it like Rails, except this time it runs in the client browser. So instead of translating between SQL and Ruby, you're tr…
Backbone doesn't actually have controllers, only models and views. Even without that technical distinction, I'd still be hard-pressed to actively describe Backbone as MVC (especially compared to other JS frameworks like SproutCore or Ember, which do actively force you into a more traditional MVC structure).
It doesn't actively encourage you to structure your code in any particular way, other than "separate your business logic and DOM logic", which you probably want to be doing anyway if you're building the sort of JS-heavy rich web application that people tend to recommend Backbone for.
Re: Backbone.js: Hacker's Guide
#7Earlier quoted context omitted.
Here's my iconoclast answer (with a further caveat that I'm a systems programmer who follows web development in my spare time, not an expert on any of this): Backbone (or Spine, which is just like Backbone but a tiny bit smaller and written in CoffeeScript) is Yet Another MVC Framework. So think of it like Rails, except this time it runs in the client browser. So instead of translating between SQL and Ruby, you're tr…
Backbone doesn't actually have controllers, only models and views. Even without that technical distinction, I'd still be hard-pressed to actively describe Backbone as MVC (especially compared to other JS frameworks like SproutCore or Ember, which do actively force you into a more traditional MVC structure). It doesn't actively encourage you to structure your code in any particular way, other than "separate your busin…
I have a couple apps that use backbone.
* One is just a fancy web page, it uses Backbone in a traditional sort of MVC way. I don't use the router tho, doing my own thing with pushState and gradual enhancement. Lots of views and models keep things separated sanely.
* Another uses it because I wanted an easy mechanism to map between storage and app. I think the only reason I used views in this case was because I had already been using a template, so I just threw it in a view to tie events together.
* The last I don't use any of the "talk to the server" features, but use the event model because it allowed for easier reactive style stuff with events and forms, and tying into canvas frameworks than alternatives. The data model doesn't fit nicely with Backbone, so I did my own thing.
The point is, Backbone keeps it easy to not get sucked into the whole model if you don't want to.
Re: Backbone.js: Hacker's Guide
#8Could anyone show me what kind of problems Backbone.js solves? Not a description like “it will replace a lot of your jQuery spaghetti boilerplate”, but some actual code: //this is what I had to write in jQuery … … //this is how I'd do it in Backbone.js
I had the same question after trying to use Backbone on a couple different small projects and giving up after seeing it introduce more complexity that I saw it removing.
Recently, I discovered Knockout.js, which is a "competitor" to Backbone with what I think is a clearer interface and a much clearer value proposition. I've had a lot of success with Knockout and fully expect that, like Sinatra did to me with Rails, Knockout will teach me to appreciate Backbone soonish. In the meantime, here's the knockout pitch:
What Knockout does is allow you to keep separate models (which are plain-old Javascript objects; Knockout doesn't need to infect them or enforce any kind of structure to them at all) and DOM UI. Knockout's job is to keep the two in sync. For instance, if you have an array of Foo's rendered in a table, Knockout allows you to bind a "foreach" to the table's body, effectively turning a single TR into a template for each Foo. Then, if the elements of the Foo array change dynamically, Knockout makes the table reliably reflect the constitution of the array.
The core value here isn't "templating". It's "keeping the DOM in sync with Javascript objects".
Off the top of my head, I think we're talking about 3 lines of code to get that functionality: the data-bind attribute on the TBODY element, the ko.observableArray() that wraps your otherwise plain array of Foos, and the ko.applyBindings(RootModel, RootDomElement) call that kicks off Knockout.
The same functionality would probably cost 10-20 lines of jQuery; more importantly, that jQ code would be fiddley, not at all declarative, and duplicated every place you wanted to bind an array to some repeating DOM structure. Knockout is here, to my eyes, a clean win.
Or take forms: you bind (with data attributes) INPUT elements to Javascript objects, so that what their values are changed by user input, the Javascript objects automatically reflect their new values. The JS code that then cares about the value of these objects doesn't ever need to scrape out the values of forms, and can reliably assume whatever's in the fields or hashes or whatever you set up is going to be current input. Also: you can bind multiple form inputs to the same data and keep them in sync, which I found to be a pleasant way to implement an "Advanced Search" feature.
What I didn't like about Backbone was the notion it had of "Models" and "Routers" and stuff like that. I'm sure that's valuable structure to have, but I like the flexibility --- and, more importantly, the freedom for More Stuff I Have To Memorize --- that comes with the KO.js approach.
Re: Backbone.js: Hacker's Guide
#9Could anyone show me what kind of problems Backbone.js solves? Not a description like “it will replace a lot of your jQuery spaghetti boilerplate”, but some actual code: //this is what I had to write in jQuery … … //this is how I'd do it in Backbone.js
You can compare the TODO list implementations in todomvc:
Backbone: https://github.com/addyosmani/todomvc/tree/master/architectu...
jQuery: https://github.com/addyosmani/todomvc/tree/master/architectu...
The Backbone implementation is an adaptation of this: http://backbonejs.org/docs/todos.html which i think is more readable. The todomvc adaptation is a little over-structured for my taste, too many JS files for too little functionality.
Re: Backbone.js: Hacker's Guide
#10Could anyone show me what kind of problems Backbone.js solves? Not a description like “it will replace a lot of your jQuery spaghetti boilerplate”, but some actual code: //this is what I had to write in jQuery … … //this is how I'd do it in Backbone.js
Here's my iconoclast answer (with a further caveat that I'm a systems programmer who follows web development in my spare time, not an expert on any of this): Backbone (or Spine, which is just like Backbone but a tiny bit smaller and written in CoffeeScript) is Yet Another MVC Framework. So think of it like Rails, except this time it runs in the client browser. So instead of translating between SQL and Ruby, you're tr…
> Stay away.
Backbone is not MVC framework, it does not have Controllers. The name is very apt: it is basically a small skeleton for your app which gives you things you'd have to reinvent and provides some organization and structure.
Actually, the description on backbonejs.org describes it very well:
> 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.