
How to start with Backbone.js: A simple skeleton app - mihar
http://codeartists.com/post/38153430040/how-to-start-with-backbone-js-a-simple-skeleton-app
======
king_magic
"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.

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

~~~
pc86
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.

------
jashkenas
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...](https://github.com/mihar/backbone-
skeleton/blob/master/src/coffeescript/App.js.coffee)

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...](https://github.com/documentcloud/documentcloud/tree/master/public/javascripts)

~~~
tadruj
Which would then be the best "skeleton" ?

~~~
jashkenas
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.

------
dangrossman
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>

~~~
camus
neat thanks.

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

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

~~~
camus
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.

~~~
hakaaak
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.

~~~
camus
not it's not , the idea was "relativity" not "comparaison". Backbone doesnt do
serverside request handling , nor does AngularJS.

------
davemo
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...](http://coenraets.org/blog/2011/12/backbone-js-wine-cellar-tutorial-
part-1-getting-started/)

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

------
bjhoops1
"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.

------
jakejake
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/>

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

~~~
jakejake
oh ha, thanks! I just fixed that.

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

------
wenbert
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
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.

------
marekmroz
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
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
This might be a good start if you're just starting out with Backbone:
[https://github.com/kjbekkelund/writings/blob/master/publishe...](https://github.com/kjbekkelund/writings/blob/master/published/understanding-
backbone.md/)

------
jasonkostempski
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.

------
hakaaak
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.

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

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

------
laureny
How does Backbone.js compare with AngularJS?

------
drivebyacct2
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.

~~~
christensen_emc
<http://recipeswithbackbone.com/>

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

