59

I'm just starting to get into backbone.js. It looks like it's pretty involved and won't be something you can just look at one example and say, "Well, that's easy!" and start being productive with it. It does look good though.

The documentation is okay, but I find myself not understanding the 'big picture' very well, and how all of these components work together. The way events are bound and rendered in the various views actually seems like a lot of entanglements. I understand the need for separation of concerns, but I am actually wondering if it's just a tad over-engineered.

Essentially... I won't be able to be immediately productive with backbone.js. There is going to be a a day or two learning curve I think.

What is the best way to get into backbone.js? Just keep chugging along, or are there some larger sample applications to download somewhere to look at?

Are there better alternatives that might be easier to learn and offer the same sort of benefits? For me, productivity and intuitiveness are pretty important. I sort of feel like the way backbone.js works is a little foreign. That could just be me.

Put another way, would it maybe be better to develop my application without a library like backbone and sort of organically create a framework like backbone.js but more like something that is intuitive to me and something more inline with the resultant code base?

I've been trying to get simple examples to work with my own code, and I get no Javascript errors... but it doesn't work. There's a good chance that "one minor thing" is wrong... but I'm beginning to feel that debugging my backbone applications might be a problem... so perhaps organically growing my own might actually be a better option for my own sanity. Debugging in the dark is a real productivity killer... and honestly, I'd rather do my own framework and write my own code if it spares me hours of endless debugging.

I don't know what to do - hence why I am asking.

egervari
  • 22,372
  • 32
  • 121
  • 175
  • I wrote up a whole post, then removed it after realising it was too basic for where you're up to... in essence, if you don't see a need for every component, then don't use it. I didn't even start using `Controllers` until I was far down the path of building a web application. Develop your application using just the components you understand a need for, and leave out the rest. – Stoive May 17 '11 at 01:26
  • Is it safe for me to keep working with backbone and just use one part at a time? I got the models and collections to work... so maybe I can just start there so I don't have to write low-level ajax calls anymore. I have just learned about several other options. It'll take me some time to learn about them too (sproutcore, javascriptmvc, etc.). Options are great, but also can be overwhelming. Options can also make you less productive since you have to decide more things :) – egervari May 17 '11 at 01:35
  • Hrm, I also read that Backbone doesn't support nested collections, or doesn't do this very well. This is a deal-breaker. I am not at this point yet, but I will have functionality that will need to deal with this. – egervari May 17 '11 at 03:49
  • 1
    Yep, it's definitely fine to use just some parts of Backbone and not others. The idea being that backbone doesn't force some excessive structure on your code. As for nesting collections, the documentation gives an example: http://documentcloud.github.com/backbone/#FAQ-nested – Stoive May 17 '11 at 05:26
  • Another alternative worth checking out for the View-side is the Kockout MVVM framework: http://knockoutjs.com/ - never tried it (or attaching it to Backbone models), but might be a way to deal with that entanglement of bindings. – Stoive May 17 '11 at 05:29
  • 1
    I actually did a framework myself, and it's coming along really fantastic. I wish there a place I could show the code. It's similar to Backbone, but it works even more simply and I think it works more intuitively. It actually didn't take me that long. I separated out the "controller events" from the view - man, that conceptually makes a world of difference. I also streamlined how objects listen to other objects. It's a simple publish/consume interface. A view can simply listen to a collection or model and consume any/all the events it wants. I actually like the way I did it more. – egervari May 18 '11 at 01:48
  • The Way I did collections and models has come a trivial oneliner. You just say "comments = collection.build('comments')", and that sets up your collection, model, ajax, a set of standard events for adds, removes, freshes, changes, etc. all in 1 line of code. You can bootstrap with comments.refresh(...) or load all the data with comments.load(). I am still not done, but my approach doesn't aim at getting rid of jquery as a way to program - it just gives you more abstract building blocks to work with. I think this approach lends itself to even more structural freedom. – egervari May 18 '11 at 01:50
  • I realized that trying to abstract out events to work one way was overkill... and you lost a lot of expressiveness (like using live events). I also realized that putting events that dealt with one screen in different parts actually made it harder to figure out what was going on. So now my 'controller' is just the place you setup events and wire up your page. It delegates to all the smaller objects like models, collections, views, etc. I would imagine that I would have two types of controllers in the end - one for the application and one for a page, focusing on different levels of granularity. – egervari May 18 '11 at 01:54
  • I tried to give a meta-overview of Backbone here: http://stackoverflow.com/a/24578786/687677. I would suggest learning backbone before creating your own framework, it is very good. Once you understand it you'll find you can get most of the value from homespun MVC code. – superluminary Feb 18 '15 at 16:17
  • Hackr.io had the best beginner level tutorials on Backbone.js while I was learning - http://hackr.io/tutorials/backbone-js – Gaurav Gupta Mar 03 '15 at 15:29

4 Answers4

27

As with learning a lot of programming related things, my advice would be:

  • Pick a task you think is suitable for what you're working with
  • Attempt to execute that task
  • If you find you're stuck, show the code you have and explain what you think should be happening. Make sure you check documentation to verify your functions work as you expect them to.
  • As you progress, people will also show you more standard and efficient ways to do things
  • Keep doing this until you become more familiar with how things work
  • Now, look over documentation in depth to help fully master how it works as a whole, continuing to ask questions
  • Pretty soon you'll be answering questions more than asking them
onteria_
  • 68,181
  • 7
  • 71
  • 64
  • Yes, I do this for most things. I think what makes backbone.js more confusing is that it's more of a whitebox than a blackbox framework... so there's all this magic going on behind the scenes which makes it hard to even know what is going on. The documentation doesn't explain the magic - just the small pieces. I think the docs should have spent an equal amount of time on how they work together :( I am also just discovering all of these other frameworks in the last hour: Sammy, SproutCore, JavaScriptMVC, etc. - I am totally amazed and overwhelmed. – egervari May 17 '11 at 01:01
  • I don't want to get stuck using one framework when another might actually be a far better solution for me. I just don't have a lot of ajax coding experience to know this from that and make good judgements - I am primarily a server-side programmer, or I've worked on other types of projects like games or complex libraries and frameworks for other things. Javascript essentially not a world I play in very often, even though I know quite a bit of basic javascript and jquery - just not these frameworks. – egervari May 17 '11 at 01:02
  • Wish I could upvote this answer more times. It's not related only to Backbone.js but to almost all things. It may seems to be an easy concept but actually I think it isn't. @onteria_ you think this is the way with how many professional and respected users (in various topics, like programming) became who are they? Sometimes I ask myself precisely this question. I'd glad to hear an opinion. – Fred Collins Dec 26 '13 at 23:10
11

I've come across the awesome book, Developing Backbone.js Applications by Addy Osmani. Addy has clearly explained MVC, writing modular code, testing JS code using jasmine and many more in detail.

EDIT:

There is an open source version of the same book as well.

codef0rmer
  • 10,284
  • 9
  • 53
  • 76
  • But that book's not been released yet? – poshaughnessy Jul 25 '12 at 15:08
  • 4
    I ve been reading that book, at least twice, In my opinion, Addy explanations are rather confusing and not clear at all. If you dont have experience with that framework I would not recommend that book. I think this book is for when you already know a lot of Backbone, then in his non-working huge examples of simple things, you will catch the idea. He explains you how is a cow showing you the picture of a lion that ate a cow three hours ago. – Santiago Rebella Nov 22 '13 at 19:42
8

To partly answer your question. I had the same issue and was about to give up too. None of the examples worked, I later figured you are supposed to put all your backbone javascript at the end of your document, so that your page has loaded and backbone can work with it.

Underscore, Then Backbone
I think the best way to go about it is, first go through the underscore.js documentation once. You will get a feel of what it is about, backbone.js documentation does not explain underscore stuff. So, you are bound to get confused about what it is. But once you know what underscore is about then backbone.js will start to make more sense.

Also after teaching backbone to a couple of my colleagues at work, I have realized this.
There are 3 parts to learning Backbone.js -- Its my subjective opinion :


1) You should know JavaScript (not just jquery use, but, things like, what is an object, how functions work, what is context, how it works in javascript -- if you dont know javascript well, you'll be somewhat lost.

2) There are things that you have to just assume and learn by heart -- this is how the structures work, this is how the basic app is setup. Somethings in the beginning will not make sense, just learn them by-heart.

3) Other things you will have to understand, what is actually going on.

It takes time to figure out which one is 2 and which one is 3 and this is when someone who has worked on the framework teaches you, you'll pickup very easily. Again its my subjective opinion.

If you are looking at getting something up and working in very little time with a lesser learning curve try Knockout JS you'll pick it up in no time.

DMin
  • 10,049
  • 10
  • 45
  • 65
5

I always find myself learning new things a lot easier through screencasts. It might be the visual recognition, not sure. Anyway, I found the relevant Peepcode screencasts to be pretty helpful in understanding the basics and the ideology of Backbone.js. Hope they could help you too.

Attila Györffy
  • 759
  • 7
  • 13