Backbone.js Fundamentals | Hacker News Reader

Backbone.js Fundamentals

github.com

258 pointspooriaazimi72 comments

As an aside, Peepcode has a 3 part video tutorial on Backbone.js, which is exceptionally great (more than 3 hours, but it's really condensed and it took me 2 days to completely digest it). Each episode is $12; a little expensive at first sight, but really worths it.

https://peepcode.com/products/backbone-js

https://peepcode.com/products/backbone-ii

https://peepcode.com/products/backbone-iii

A side question, which seems worth asking as long as this is floating at the top of HN ...

We try to rotate in fresh projects into the list of Backbone apps on the homepage:

http://backbonejs.org/#examples

... but there are often many more interesting things out there in the wild than we're necessarily aware of -- for example: Rdio, the new GoogleArtProject.com, and Pitchfork.com. Are you currently working on a fun Backbone app, or have you seen one recently that we might not have heard about?

http://kandan.me is a backbone app, as well as a few others we've developed at Bushido so far.

http://openhercules.com is a backbone app

Off topic but I love your explanation of the openhercules name.

Edit: just played with the sample list and the keyboard interaction is pretty impressive too. Nice work.

http://planscope.io is Backbone with a ton of customization

I'm working on http://www.textdropapp.com

yep, backbone has been a huge timesaver. 13 model/collection types, 24 views and counting.

leave timestamped comments on any video http://www.quipvideo.com

I wrote http://www.mineconics.net using Backbone, it solved my jQuery spaghetti and reduced my LoC by about 25%, it made it easier to add new features as well. Thanks for Backbone!

How can you tell that Pitchfork.com is using backbone?

Take a peek in the JS console:

http://cl.ly/FmLu

... once I get a fuller description from them about how they're using it -- I'll post it up.

Why would you use Backbone as a global?

http://nosweaters.com is beginning to incorporate Backbone into its setup (currently utilized in user /home feed and idea suggestion path), and my personal project site, http://showhopping.com is moving from its spaghetti crufty mess to a completely BB/Require setup.

Not a lick of HTML is rendered by our backend in the 1.0 version of Zapier. It's all Backbone.js!

We even have a (unusual?) nested view pattern that really helps us segment complicated logic.

Our co-founder (mikeknoop on HN) even did a talk on Backbone at our local meetup. Maybe Google alerts will bring him here and he'll finally get around to posting it... ;-)

A lot of d3.js users use Backbone to manage datasets, and do simple dataflow architectures to link visualizations together.

We're using more and more backbone in https://paydirtapp.com - it's currently an integral part of our time-tracker, with the same code base reused in our Chrome and Firefox extensions. We're also using it to drive d3.

http://bookmarkly.com is all Backbone and the code is at https://github.com/dangrossman/Bookmarkly

this site looks awesome and i'd like to use it, but how do i know you'll be around in a year?

http://spacelog.org

Over at kiva.org we got a nifty little project that'll be using Backbone...we hope to have it live in the first week of May...

we have used backbone, on http://focal.io and in chrome extension of focal.

The online version[1] was submitted 10 days ago[2] (by someone else) but it didn't get any attention. So I submitted a link to the epub version. It seems like a very good tutorial and I hope someone finds it useful.

[1]: http://addyosmani.github.com/backbone-fundamentals

[2]: http://news.ycombinator.com/item?id=3784854

Also, I'm watching a terrific presentation from the book's author right now:

  Large-scale JavaScript Application Architecture

Developers creating JavaScript applications these days usually use a combination of MVC, modules, widgets and plugins for their architecture. They also use a DOM manipulation library like jQuery.
Whilst this works great for apps that are built at a smaller-scale, what happens when your project really starts to grow?
In this talk, I present an effective set of design patterns for large-scale JavaScript (and jQuery) application architecture that have previously been used at both AOL and Yahoo amongst others.

You'll learn how to keep your application logic truly decoupled, build modules that can exist on their own or be dropped into other projects and future-proof your code in case you need to switch to a different DOM library in the future.

http://speakerdeck.com/u/addyosmani/p/large-scale-javascript...

Is there video of this? I find slides often miss out on things their author says on stage.

I don't think so. But this particular presentation (130 slides!) has tons of text on each slide that kinda works like a presenter...

there IS a video for this, although it appears to be a slightly different version: http://asyncjs.com/largescale/

I've converted it to Mobi if anybody wants it:

http://dl.dropbox.com/u/24776084/backbone-fundamentals.mobi

Thanks!

PDF: http://steve.io/backbone-fundamentals.pdf

> You're over the rate limit. Serve this file from your own servers. Contact support@github.com if you have questions.

If you get that error just get it from the main repo https://github.com/addyosmani/backbone-fundamentals/

And if you still hit an error, just git clone it :)

Easy mode quick clone:

  git clone https://github.com/addyosmani/backbone-fundamentals.git

I didn't know there was a rate limit. Does this affect GitHub Pages, too?

It checks for the referer to avoid inline linking[0], so this won't affect GitHub Pages.

[0]: http://en.wikipedia.org/wiki/Inline_linking

.tar.gz: https://github.com/addyosmani/backbone-fundamentals/tarball/... .zip: https://github.com/addyosmani/backbone-fundamentals/zipball/...

I was thinking of learning Backbone soon until I read about Meteor yesterday. Is there any point in learning Backbone, or should I just go the Meteor route?

Backbone is almost at the top of the javascript toolkit levels. Let's put it in perspective: - backbone - jquery - meteor <- the low level of the high level :) You use meteor as a foundation to build your application as backbone is more or less your application itself. Think "CoreFoundation" vs "AppKit" kind of difference.

by jguimont

Your question strikes me as an odd one. Meteor just came out. I'm not sure that there are any folks who have built any substantial systems using Meteor yet (aside from it's authors) who would be able to give you a firm recommendation.

That said, Meteor and Backbone do different things. Meteor is an attempt to solve (obviate, really) the mismatch between client/server development. To what extent it does this in a reasonable fashion is yet to be fully explored (although it does look awesome!)

Backbone is a client-side JS application toolkit. It's purpose is to bundle up the things that are common to every JS application, and provide a solid API to hook your application code to, and to hook your app to your RESTful server API. That said, Backbone offers more than just a convention for how your JS app talks to your API.

You will note that Backbone is included in the default set of installable Meteor packages.

I'm a newbie, although I feel somewhat informed on these subjects (although not skilled in coding).

Anyway, I like the idea of using javascript everywhere. I plan on building smaller apps that are only client side. But I wonder if there is a cohesive method yet of using javascript everywhere.

Obviously meteor was big news yesterday, but it's quite immature. The YUI Mojito project also recently made news and is more stable/robust. While the tightly integrated approach used in YUI sounds convenient, I get the impression that there isn't much excitement behind YUI -- certainly not like backbone.js, node.js, et al.

So is there a collection of libraries that can play together well to make for an all javascript environment (i.e., backbone (plus underscore, jQuery) on the client, node + socket.io on the server)?

Backbone, underscore, jquery, node, socket.io is a good place to start.

Thank you! It's much appreciated.

I'm in the process of learning Backbone and just read about Meteor, so I might be completely wrong on this. But it seems like Backbone and Meteor are trying to solve different problems, and aren't mutually exclusive. Backbone is server-agnostic, and Meteor is somewhat client-agnostic, so you could use Meteor to do the data synchronization and automatic updating, while structuring your client app using Backbone.

I see. I knew they were different but I thought there was considerable overlap in what they did.

I saw no overlap in the demos. What did you see as overlap?

Learning Backbone is a great way to get practice with MVC and the "Observer" pattern if you haven't done it before.

Also it's a much better way of organizing your DOM structure than a bunch of loose jQuery calls.

I was very impressed with Meteor, but it is very new and isn't really bringing anything of substance to the table yet. Everything (other than client-side database interaction, which I am confused about who would want), that they spotlighted can be duplicated easily with backbone, node, and socket.io...right now. Moreover, backbone, in particular, is clearly a tool, like a screwdriver, that does a few things well and gets out of your way, whereas Meteor, like rails used to be, is more like an electronic lockpick...awesome magic for the limited scope of applicability, but not currently useful for most of the things you want to do in real life.

This week I'm finding it really hard to cognitive-dissonantly validate why I don't know javascript yet. But you're breaking me, O constant-plethora-of-awesome-javascript-submissions.

3 months ago I thought JS was a toy language for those who don't know any real programming language (a.k.a. script kiddies). I've never been so mistaken in my life.

Node.js (written in CoffeeScript) + MongoDB/CouchDB/Redis + socket.io is a wonderful (and scalable and wicked fast) development platform.

iBooks shows me an error on the 2nd page:

"This page contains the following errors:

error on line 649 at column 295: Opening and ending tag mismatch: cpde line 0 and p

Below is a rendering of the page up to the first error."

Here is epubcheck if that helps anyone: https://code.google.com/p/epubcheck/

Seems to be a typo in index.md, and a bug in Pandoc which lets non-well-formed xml tags pass through unquoted.

'[epub]' appended to submission title would be nice.

The original submitted title was:

    Backbone.js Fundamentals (free ebook - epub version)

A moderator changed it a couple hors ago.

For anyone else running into traffic/timeout issues with GitHub, you might have better luck with this tagged version of the above project https://github.com/addyosmani/backbone-fundamentals/zipball/...

My team just finished building two new features of our application using Backbone and now we're actually looking into switching to Ember.js to take advantage of the automatic databinding and lack of a need to do manual DOM manipulation.

Can anyone comment on their experience with the two frameworks?

For those who (like me) haven't heard of Ember.js before, it's SproutCore 2.0 (a complete re-architecture by the looks of it).

http://emberjs.com/

https://github.com/emberjs/ember.js/

http://yehudakatz.com/2011/12/08/announcing-amber-js/

Do yourself a favor and look at AngularJS.

It says that the account is over it's rate limit. Can someone from Github sort this out?

Fotoblur Labs is a project which utilizes backbone.js: http://www.fotoblur.com/labs

Any recomendation on epub readers for Mac?

There's always Calibre[1], but it's really bloated. It's a very powerful and capable ebook management system though, it's just not really Mac-ish.

Adobe has a very good ePub reader, called 'Adobe Digital Editions'[2] that runs on Mac, Windows and (I assume) Linux. It's an Adobe Flash/Air application and is much prettier than Calibre. If you don't mind Flash on your mac (I gave up last year), It's currently the best choice.

[1]: http://calibre-ebook.com/

[2]: http://www.adobe.com/products/digitaleditions/

[edit] No, there's no Linux version. You can use it with WINE though; use the instructions here: http://ubuntuforums.org/showthread.php?t=701191

Adobe Digital Editions runs just great and is always handy. I don't get how no one else is doing something like it.

Thanks. Isn't ePub just zipped xml/html? Why aren't there more choices? Seems like a wrapped Webkit would do the trick. Or maybe people just don't read much on PCs anymore.

It's more than just a zipped xml+css+html. There's a total mess underneath that open format specification (toc, item-references, etc).

Use Calibre (right click -> tweak ePub -> explode ePub), or eCub[1] to see and manipulate what's inside an epub...

[1]: http://www.juliansmart.com/ecub#mac

I've not used it, but http://itunes.apple.com/au/app/kitabu/id492498910?mt=12 looks nice, and it's free.

Readmill is really well designed, though it isn't yet updated for the new iPad.

If you just want to read, Amazon's free Kindle.app is by far the best Mac reader. Use KindleGen[1] to convert .epub to .mobi (or scroll up, someone's already done this here).

However, be warned that it won't allow you to copy text even from an non-DRMed ebook, which is quite silly and makes it useless for anything that has code samples in it. For reading a book on screen it's pretty good though.

[1] http://www.amazon.com/gp/feature.html?ie=UTF8&docId=1000...

Google should really add Backbone.js to Libraries API.

Is there a PDF version somewhere?

I found an online epub -> PDF converter. It didn't come out that great but it lets me browse the contents until I can load the epub on my tablet.

(it's really not an answer, but just in case you haven't seen it already, here's an online version which is actually prettier than the epub one: http://addyosmani.github.com/backbone-fundamentals )

Calibre is an open source e-book management software that you can use to read an .epub or convert to .pdf

http://calibre-ebook.com/

You're over the rate limit. Serve this file from your own servers. Contact support@github.com if you have questions. LOL

Reply on news.ycombinator.com