7 ms·
How to start with Backbone.js: A simple skeleton app
- king_magic 14y 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.
- mihar 14y agoAgree. But I doubt any beginner in web development will be touching Backbone.
- king_magic 14y agoTrue.
- uptown 14y agoPerhaps 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 14y agoI 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 14y agoNot 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 14y agoAFAIK 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 14y ago"If you're going to study Backbone, it might be better to just study Backbone" I agree.
- scott_w 14y 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 14y agoi 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 14y agoI could not agree more. Though I would replace "minor" frustration with "major".
- bhataktiatma 14y ago> HAML, SASS and CoffeeScript Only a total idiot will use these in a tutorial. OP: Stop submitting your idiotic shit to HN.
- dangrossman 14y agoIn 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 http://bookmarkly.com https://github.com/dangrossman/Bookmarkly https://github.com/dangrossman/Bookmarkly
- camus 14y agoneat thanks.
- blissofbeing 14y agoI use AngularJS for everything now, I find it much easier to use and more convient than backbone.
- drivebyacct2 14y agoI 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 14y agoSame. I also feel bad for the people stuck with Backbone.
- Kiro 14y agoI see these comments in every Backbone thread and no-one seems to disagree. Is Backbone that bad?
- pilgrim689 14y agoIt'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/ http://addyosmani.github.com/todomvc/
- camus 14y agoThe 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.
- jashkenas 14y agoTo 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/ 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/coffeescript/App.js.coffee 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/public/javascripts https://github.com/documentcloud/documentcloud/tree/master/p...
- tadruj 14y agoWhich would then be the best "skeleton" ?
- jashkenas 14y agoIf 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.
- mihar 14y agoI 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 14y agoI 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/ http://addyosmani.github.com/backbone-fundamentals/ For people who prefer learning from screencasts the material from TutsPlus is also good.
- thisisdallas 14y agoThank 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 14y agoThis might be a good start if you're just starting out with Backbone: https://github.com/kjbekkelund/writings/blob/master/published/understanding-backbone.md/ https://github.com/kjbekkelund/writings/blob/master/publishe...
- drivebyacct2 14y agoGod, 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.
- mihar 14y agoI agree. Less useful for you, more useful for someone who likes HAML, SASS and CoffeeScript.
- christensen_emc 14y agohttp://recipeswithbackbone.com/ http://recipeswithbackbone.com/ Check out this book. It sounds like what you are looking for.
- bjhoops1 14y 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.
- jakejake 14y agoPlease 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/ http://phreeze.com/
- davemo 14y agoThis 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-tutorial-part-1-getting-started/ http://coenraets.org/blog/2011/12/backbone-js-wine-cellar-tu... [2] https://github.com/ccoenraets/backbone-cellar https://github.com/ccoenraets/backbone-cellar
- shivalry 14y agoPamela Fox (Coursera) came to Box to talk about how they use backbone.js -- https://www.youtube.com/watch?v=ThFg5LHTPy8 https://www.youtube.com/watch?v=ThFg5LHTPy8
- wenbert 14y agoI 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/ 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/ http://www.knockmeout.net/ Stackoverflow
- ww520 14y agoKnockout.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 14y agoI also recommend checking out Backbone-Boilerplate for a good skeleton using RequireJS https://github.com/tbranyen/backbone-boilerplate https://github.com/tbranyen/backbone-boilerplate
- jasonkostempski 14y agojQuery, 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 14y agoHow does Backbone.js compare with AngularJS?
- hakaaak 14y agoWhy 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.