"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.
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)
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.
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.
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.
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.
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:
... 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:
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.
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.
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.
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 --
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.
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 ).
AngularJS solves app architecturing problems in a elegant declarative way
Actually BackboneJS praises itself for not doing that:
It doesn't depend on stuffing application logic into your HTML. There's no embedded JavaScript, template logic, or binding hookup code in data- or ng- attributes, and no need to invent your own HTML tags. [1]
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/
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.
Backbone is not like Sinatra. Backbone is a hell of a lot more work than Sinatra. Backbone is a framework that more easily can fit atop existing design and services, however it takes so much time and in the end you just have even more complex spaghetti for someone else to maintain when you leave.
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.
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).
"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.
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)
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.
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.
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.
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.
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.
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.
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.
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.