"How to start with Backbone.js: A simple skeleton app"<p>first sentence:<p>"You need a solid knowledge of JavaScript, familiarity with Backbone, Ruby, HAML, SASS and CoffeeScript to find this writeup useful."<p>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.
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:<p><a href="https://github.com/mihar/backbone-skeleton/" rel="nofollow">https://github.com/mihar/backbone-skeleton/</a><p>... 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:<p><a href="https://github.com/mihar/backbone-skeleton/blob/master/src/coffeescript/App.js.coffee" rel="nofollow">https://github.com/mihar/backbone-skeleton/blob/master/src/c...</a><p>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.<p>That said, if other folks want to share their basic setup or source code, like @dangrossman did, that would be lovely. I'll start: <a href="https://github.com/documentcloud/documentcloud/tree/master/public/javascripts" rel="nofollow">https://github.com/documentcloud/documentcloud/tree/master/p...</a>
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 --<p><a href="http://bookmarkly.com" rel="nofollow">http://bookmarkly.com</a><p><a href="https://github.com/dangrossman/Bookmarkly" rel="nofollow">https://github.com/dangrossman/Bookmarkly</a>
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.<p>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).<p>[1] <a href="http://coenraets.org/blog/2011/12/backbone-js-wine-cellar-tutorial-part-1-getting-started/" rel="nofollow">http://coenraets.org/blog/2011/12/backbone-js-wine-cellar-tu...</a><p>[2] <a href="https://github.com/ccoenraets/backbone-cellar" rel="nofollow">https://github.com/ccoenraets/backbone-cellar</a>
"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.<p>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)<p>Feedback and contributions are welcome: <a href="http://phreeze.com/" rel="nofollow">http://phreeze.com/</a>
Pamela Fox (Coursera) came to Box to talk about how they use backbone.js -- <a href="https://www.youtube.com/watch?v=ThFg5LHTPy8" rel="nofollow">https://www.youtube.com/watch?v=ThFg5LHTPy8</a>
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.<p>Then I tried Knockout.js - It has a very nice quickstart. <a href="http://learn.knockoutjs.com/" rel="nofollow">http://learn.knockoutjs.com/</a> - after a few days playing around with it, I started on my project.<p>Good resources:
Knockout.js Documentation
<a href="http://www.knockmeout.net/" rel="nofollow">http://www.knockmeout.net/</a>
Stackoverflow
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.<p>You can find it here: <a href="http://addyosmani.github.com/backbone-fundamentals/" rel="nofollow">http://addyosmani.github.com/backbone-fundamentals/</a><p>For people who prefer learning from screencasts the material from TutsPlus is also good.
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.
I also recommend checking out Backbone-Boilerplate for a good skeleton using RequireJS<p><a href="https://github.com/tbranyen/backbone-boilerplate" rel="nofollow">https://github.com/tbranyen/backbone-boilerplate</a>
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.<p>Also, throwing HAML, SASS, Coffeescript, autogeneration and more into this makes this just... that much less useful.