How to start with Backbone.js: A simple skeleton app

http://codeartists.com/post/38153430040/how-to-start-with-backbone-js-a-simple-skeleton-app

by mihar • 14 years ago

125 47 14 years ago

king_magic2• 14 years ago

"How to start with Backbone.js: A simple skeleton app"

first sentence:

"You need a solid knowledge of JavaScript, familiarity with Backbone, Ruby, HAML, SASS and CoffeeScript to find this writeup useful."

Feels like an awful lot of prereqs for a starter. I don't expect to be spoon-fed JavaScript basics, but I feel like too many Backbone guides presume some understanding of Backbone before starting with something that is supposed to help you learn Backbone. Just a minor frustration of mine.

mihar3• 14 years ago

Agree. But I doubt any beginner in web development will be touching Backbone.

king_magic2• 14 years ago

True.

uptown• 14 years ago

Perhaps not. But it seems like the author added an unnecessary level of abstraction for parts of the tutorial. It's his tutorial - he can do what he wants ... but it likely slows, complicates, or excludes-from-participating-in people that aren't well-versed in his chosen toolkit of technologies.

pc86• 14 years ago

I don't know a single tool in that list outside of tangential experience with Ruby. I've worked in some combination of Java, Objective C, C#/VB, PHP, Python and several types of SQL over the last decade. I would hardly call myself a beginner. It doesn't mean this tutorial isn't useful, just that it's only useful for the extremely small subset of developers who happen to use Ruby, HAML, SASS, and CoffeeScript.

modarts• 14 years ago

Not only that; but I find the use of CoffeeScript to be distracting when trying to learn the fundamentals of Backbone (which isn't really more 'optimized' for development with CoffeScript, despite the fact both were created by Jeremy Ashkenas)

kyllo• 14 years ago

AFAIK you don't necessarily need to use HAML, SASS, and CoffeeScript in order to use Backbone. They are tools that you can "plug in" to your web application to make you more productive, but I think they deserve separate treatment. And you need a server but it doesn't have to be Sinatra or anything written in Ruby. But Sinatra is as good a choice as any.

If you're going to study Backbone, it might be better to just study Backbone, using standard HTML/CSS/JS instead of HAML/SASS/Coffee. That would simplify the prereqs a bit and make it a little more accessible. But on the other hand, if you're at the point where you have a practical need to learn Backbone, it's sort of assumed that you're a web developer and should already be familiar with HAML, SASS, and Coffee. So I guess it's a judgement call by the author.

platz• 14 years ago

"If you're going to study Backbone, it might be better to just study Backbone"

I agree.

scott_w• 14 years ago

"you're a web developer and should already be familiar with HAML, SASS, and Coffee"

That's like saying a web developer should be familiar with Ruby.

Unless you've made a conscious decision to use it, there's no reason to assume that you're familiar with the tools in question.

For what it's worth, I can see myself needing Backbone (or something similar) for what I'm working on, but there's no way I'll be using CoffeeScript.

dustingetz• 14 years ago

i actually wish there were more blogs that assume this level of background. i know what backbone is, i know what it's competition is, and i want to play with nontrivial working examples without having to figure it out myself from the api docs.

xpose2000• 14 years ago

I could not agree more. Though I would replace "minor" frustration with "major".

dangrossman• 14 years ago

In the same spirit of releasing the code of a working Backbone app for beginners, I wrote and open sourced a visual bookmark organizer a while back. It's no masterpiece, but it has more working parts than the typical TODO tutorial --

http://bookmarkly.com

https://github.com/dangrossman/Bookmarkly

camus6• 14 years ago

neat thanks.

blissofbeing• 14 years ago

I use AngularJS for everything now, I find it much easier to use and more convient than backbone.

drivebyacct22• 14 years ago

I don't know why you got downvoted. I appreciate AngularJS a lot as well, after trying like hell to like Backbone and having given Knockout and Ember a quick try. I'm tempted to compare AngularJS to Dart's Web Components, but I think AngularJS may get some functionality that looks even more like that soon.

salmanapk• 14 years ago

Same. I also feel bad for the people stuck with Backbone.

jtchang• 14 years ago

Why the hell is this comment on the bottom?

I started with backbone and was like...wtf is this. Then I went to knockout and it is what I am using now. I used Angular in a pet project a few weeks ago and was totally blown away at how easy it was. Angular is more suited to projects where you use it from the get go. I really like knockout because it is good to integrate in existing projects.

camus6• 14 years ago

AngularJS is great ( my first app every with Angular : http://paraiso-flickr-search.herokuapp.com AngularJS forces developpers into separation of concerns , DI , which are good things , but until one understands why they are good , one will not like AngularJS.

Backbone is in my opinion more a library ( like jQuery ) than a framework. it doesnt force people doing anything , it provides helpers and conveniant "classes" to work with.

But it doesnt solve most of the problems regarding app architecture. AngularJS solves app architecturing problems in a elegant declarative way ( like Flex before it ).

Kiro• 14 years ago

I see these comments in every Backbone thread and no-one seems to disagree. Is Backbone that bad?

pilgrim689• 14 years ago

It's not bad... it's just much more light-weight (essentially). So, the bigger the project, the more you're going to feel Backbone strain relative to AngularJS. However, for small projects, you probably don't need such big guns... but if you can afford shipping AngularJS to the clients anyway, why not?

You can see the different styles for yourself for a very basic web application (and try to extrapolate what it would look like for large ones): http://addyosmani.github.com/todomvc/

camus6• 14 years ago

The difference between Backbone and Angular is that AngularJS is more like Rails whereas Backbone would be more like Sinatra. What it means is , for complicated apps , you'll have to do complex stuffs anyway , so 'complicated' features are better built in the framework itself.

Unless you use a plugin , you'll have hard time updating your views automatically in Backbone if your model has nested objects. And your models cannot be arrays. In AngularJS it doesnt matter.

jashkenas2• 14 years ago

To echo other comments in this thread -- if you're a beginner just looking to get started with a Backbone app, this may not be the best "skeleton". If you look at the GitHub repo:

https://github.com/mihar/backbone-skeleton/

... you'll find a somewhat odd scaffold that doesn't give you much more than a raw Sinatra app with Backbone included on a page -- but will probably feel far more confusing, with the inclusion of arbitrary bits of code:

https://github.com/mihar/backbone-skeleton/blob/master/src/c...

If you look at this as an interesting example of an extraction from an existing app -- that's great; more power to you. But I'd be wary of using it as a "skeleton" to start building your own thing.

That said, if other folks want to share their basic setup or source code, like @dangrossman did, that would be lovely. I'll start: https://github.com/documentcloud/documentcloud/tree/master/p...

tadruj• 14 years ago

Which would then be the best "skeleton" ?

jashkenas2• 14 years ago

If we're talking about a complete app, then it depends on what you're planning to use on the server side. Take whatever that is, and include Backbone (and appropriate dependencies) in your HTML. You're off to the races.

Saying what the best "skeleton" is would be like saying that there's a particular skeleton app you should always use when starting a project that involves jQuery.

mihar3• 14 years ago

I agree that this not an optimal start point for someone who just heard of Backbone.js.

I do think, though, that if someone will still be a bit confused how to stitch things together after reading and poking around for a while, this sort of skeleton could provide just enough insight.

I released this as something that seemed useful to me and in that context should be useful to at least someone else.

If you're unfamiliar with the Ruby world, the usefulness somewhat disappears, but that's said in the prerequisites.

marekmroz• 14 years ago

I am currently reading Addy Osmani's "Developing Backbone.js Applications" and like how it begins with explaining the basic concepts. As a js mvc framework beginner I find it useful and would recommend it.

You can find it here: http://addyosmani.github.com/backbone-fundamentals/

For people who prefer learning from screencasts the material from TutsPlus is also good.

thisisdallas• 14 years ago

Thank you so much for this! I am trying to start learning Backbone and I am finding it difficult to find a lot of information for beginners. This looks like a great start.

kjbekkelund• 14 years ago

This might be a good start if you're just starting out with Backbone: https://github.com/kjbekkelund/writings/blob/master/publishe...

drivebyacct22• 14 years ago

God, there are a billion Todo and Skeleton apps and hardly any that give you the principles to build a serious Backbone.js app. It's great, minimal, flexible and incredibly easy to use in a backward and convoluted way if you don't have something good to guide you.

Also, throwing HAML, SASS, Coffeescript, autogeneration and more into this makes this just... that much less useful.

mihar3• 14 years ago

I agree. Less useful for you, more useful for someone who likes HAML, SASS and CoffeeScript.

christensen_emc• 14 years ago

http://recipeswithbackbone.com/

Check out this book. It sounds like what you are looking for.

bjhoops1• 14 years ago

"One of the biggest mistakes I was making when starting out was trying to use Backbone constructs for everything." I had the same tendency. You really do have to figure out your own application structure and architecture.

If you don't trust your own architecting abilities very much, it might be worth checking out Derick Bailey's Marionette, which provides a basic architecture on top of Backbone.

jakejake2• 14 years ago

Please excuse me pimping my own site, but if you use PHP & MySQL - this will generate a basic working app that uses backbone.js extensively. As an example backbone app, I think it may need a few improvements to go along with the latest release as far as view binding goes. But, I feel like I plowed my way through a few common web app needs that aren't so obvious with backbone collections (sorting, pagination, filtering, etc)

Feedback and contributions are welcome: http://phreeze.com/

camus6• 14 years ago

it is not trés bon , but très bon , if you intended to write something in french.

jakejake2• 14 years ago

oh ha, thanks! I just fixed that.

davemo• 14 years ago

This 3-part series [1] on building a wine-cellar app (basic CRUD, REST, etc..) with Backbone is a great place to start if you've never done anything with Backbone before.

The code is available on github [2], the author is clear and concise, and there are a number of back ends supported (node/express, php/slim, java/jersey).

[1] http://coenraets.org/blog/2011/12/backbone-js-wine-cellar-tu...

[2] https://github.com/ccoenraets/backbone-cellar

shivalry• 14 years ago

Pamela Fox (Coursera) came to Box to talk about how they use backbone.js -- https://www.youtube.com/watch?v=ThFg5LHTPy8

wenbert• 14 years ago

I played around with backbone.js for a couple of days and gave up. The documentation is there but it doesn't help someone who knows 0% about the concept.

Then I tried Knockout.js - It has a very nice quickstart. http://learn.knockoutjs.com/ - after a few days playing around with it, I started on my project.

Good resources: Knockout.js Documentation http://www.knockmeout.net/ Stackoverflow

ww520• 14 years ago

Knockout.js is great. It doesn't force a whole framework on you. It is straight forward to use. You can slide it in into an existing project easily. I use it from turning pages to be merely more interactive to full fledged single-page app.

philfreo• 14 years ago

I also recommend checking out Backbone-Boilerplate for a good skeleton using RequireJS

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

jasonkostempski• 14 years ago

jQuery, Underscore, Backbone, require.js, text.js (require.js plugin), r.js (require.js optimizer) is the setup I've been using on new projects for about a year now and I love it. I love Backbone's models and collections. It took a while to come to terms with the get and set methods and nested objects is just a bit of a hassle (but that keeps me thinking twice about what I'm doing). I like the views but I find I'm repeating myself quite a bit and I've been meaning to extend Backone.View with a few conventions of my own, which is exactly the kind of thing Backbone was intended for. Require.js lets me modularize everything. the text.js plugin lets me keep markup in html files which get converted to JS functions during optimization with r.js. During development I have everything nice and separated for debugging and optimization before deployment jams everything up into 1 file. I have a bash script that generates a new project with the basic require.js config including shim settings needed for Underscore and Backbone and usually the localStorage plugin because that's real nice if you don't have actual services wired up yet. This setup is what made me start to enjoy front-end development.

laureny• 14 years ago

How does Backbone.js compare with AngularJS?

hakaaak2• 14 years ago

Why start with Backbone.js? Why not use AngularJS instead and decrease implementation time? The primary reason to use backbone would be that you are trying to retrofit some existing page or services, and if you are doing that, you are going to spend a hell of a lot of time that you could just spend rewriting it all in angular and have less code when you are done.

How to start with Backbone.js: A simple skeleton app

Related Stories