Introducing the Backbone.js Boilerplate | Hacker News Reader

Introducing the Backbone.js Boilerplate

weblog.bocoup.com

222 pointswesbos39 comments

"Boilerplate", as I understand it, is text you copy and paste, and then edit to your needs. But the name of the game in programming is "don't repeat yourself", that is, don't copy and paste text. (And "eliminate dependencies," but that doesn't come into play here.)

So, in programming, boilerplate is always bad. Boilerplate is the enemy. Boilerplate is what makes software unmaintainable. Boilerplate multiplies bugs. Boilerplate is not a "best practice". Boilerplate is a worst practice. Boilerplate is not canonical; it is demonical. Boilerplate is the failure to factor your software into reusable subroutines. Boilerplate mixes your green, red, and yellow code all together.

This seems to be a combination of a decent development environment (a reasonable selection of libraries: Underscore, jQuery, Backbone, node.js) and 1000+ lines of actual boilerplate.

I don't know why people here seem so willing to forgive the use of boilerplate. This post has 193 upvotes as I write this so I guess there are at least 193 non-hackers reading and voting on Hacker News. I hope I never have to fix their code.

I don't agree.

Recently I started to work with node.js and after switching from Rails where you have a pre-configured ready-to-go project within seconds, with node you need to assemble the whole thing yourself.

For example there is no "standard" file layout, there is no "standard" way to initialize your ODM and there is no "standard" way to package your assets.

Am I supposed to just choose something for myself re-inventing the wheel again?

Thanks, but no thanks.

Instead I'm browsing other people applications on github and, yes, templates and boilerplates.

> Recently I started to work with node.js and after switching from Rails where you have a pre-configured ready-to-go project within seconds, with node you need to assemble the whole thing yourself.

I haven't used Rails in a while, but last time I used it, the "boilerplate" in the newly created project was something like 20 lines, not 1000. But I object to that, too.

If you need 1000 lines of text to have a ready-to-go software project, your development tools suck.

> Am I supposed to just choose something for myself re-inventing the wheel again?

The things that you aren't inventing shouldn't be in your project; they should be in a library. Your project should have only the stuff you're inventing. (Subject to "eliminate dependencies", of course.) That way, you can upgrade to a new version of the stuff you're not inventing later, fixing bugs and adding features in it; and somebody looking at two of your projects can see what's the same and what's different between them without resorting to running diff.

I mean, seriously, this is one of the two most fundamental things about programming. If you disagree with it, it's not a matter of us having different subjective opinions. It's a matter of you being completely sodding ignorant about how to program.

Of course, there are overall similarities in structure; lots of C projects, for example, have a main.c, a .h file corresponding to each other .c file, and a Makefile. But generating a "boilerplate" project with stuff you edit doesn't save you any significant time over just giving you an example project you can look at and then type.

First of all, the stuff you are not inventing NOT always should be in the library. sometimes the best a library can do is to have a generator, let people run it and modify the resulting code.

> I haven't used Rails in a while, but last time I used it, the "boilerplate" in the newly created project was something like 20 lines, not 1000. But I object to that, too.

"config" directory alone in the newly generated Rails project is 330 lines. and another 60 in "app", 25 in "test". Those are mostly comments and configuration variables, but thats the whole idea.

> If you need 1000 lines of text to have a ready-to-go software project, your development tools suck.

you completely missed the point.

The reason I'm looking for the boilerplate is because the library "sucks", not the tools.

expressjs doesn't provide me with what I need. had express js generated a full featured project for me ready to customize like rails does, I wouldn't be looking at boilerplates.

Where am I supposed to put my models? I'll go with app/models but thats ONLY because I've used such layout with Rails. I'm sure a lot of express developers are "sticking" their models somewhere else.

With express you need to decide where to put every single thing you need in your project instead of just 'lets use the standard layout which is ok for like 99.99% of all apps'

In case of rails I get (out of the box):

- standard layout for files, e.g. where to put models, controllers, helpers, views, external libraries, test files etc. The directories are already added to the load path etc. I don't need to do shit. just write my code.

- standard initialization sequence, nicely separated into boot.rb, application.rb, environment.rb, a file for every config environment, a directory of initializers and configs for various parts of the stack. (in the latest version the whole setup greatly simplified, but the idea still holds) - standard "example" testing framework. - standard Rakefile with a bunch of tasks - standard way to localize

Some of those files you rarely need to change, but they still do not belong in the library.

if I go with the 'default' ORM I need to only put user/password into config/database.yml (and not even that since my mysql's root has empty password locally) and I'm ready to go.

With express I get almost none of this stuff. Well, the generated app.js certainly does some of the things but it does it in a kind of 'split it up as you wish into logical files' kind of way. i.e. for any non-trivial production application app.js will be split into files and it will probably be in a non-standard-just-invented-here kind of way.

I'm pretty sure if you look at currently running production express.js applications you will see much more wheel reinvention with how to configure/start/layout the app then you will find in any Rails project.

So until the standard generator will do this people will keep looking for boilerplates.

This is useful for testing out a stack that works without having to research, install and compare libraries. I've been planning on doing something similar to this for my next project and this script an others like it are going to be extremely useful.

I don't object to the "selection of nicely integrated libraries" part, only the "boilerplate" part.

"Boilerplate", as I understand it, is text you copy and paste, and then edit to your needs. But the name of the game in programming is "don't repeat yourself", that is, don't copy and paste text.

This post has 193 upvotes as I write this so I guess there are at least 193 non-hackers reading and voting on Hacker News. I hope I never have to fix their code.

=========

Way to miss the entire point of DRY and insulting the people who will find this useful. Get a job, hippie.

In case there was any confusion here, I meant "Get a job, hippie" in the lightest and most facetious way possible to interpret the phrase.

It was not meant to be insulting.

> But the name of the game in programming is "don't repeat yourself", that is, don't copy and paste text.

You're post is mostly correct but completely out of context. How exactly do you divide HTML and the boilerplate that comes with it into subroutines?

The simplest way is to write subroutines to generate the HTML. But it's probably better to use templates; you stick your standard HTML "boilerplate" into one template and use a templating library to interpolate stuff into the middle of it, instead of making a zillion copies and editing each one.

As for CSS, most of the time CSS's own cascading facility is sufficient to separate your "standard" CSS into one file and your other CSS in another file. But when it's not, there's also stuff like Sass.

Might also want to check out my company's bones framework: https://github.com/developmentseed/bones

Expressjs + Backbone, with plugins, multi-process servers, settings management, etc. It's used by large applications like our hosting service: http://tiles.mapbox.com/

This looks like what I have been thinking about developing for the last few days. Thanks for sharing, it looks really interesting and it's going to save me several days of work.

The first time I see a company recommending to install VirtualBox and Ubuntu on it just to get the app to run on Windows. Better than saying Windows is not supported at all I guess :). Must be getting a lot of support tickets though. But it does look like interesting OSS project.

We're hard at work on a native Windows port. The software was released far before node.js had any Windows compatibility, and the priority has always been to make it better in an absolute sense, and then port it when possible.

This looks fantastic, especially with the integration with HTML5BP. Awesome work!

Just wondering if you considered using RequireJS instead of namespacing? Backbone plays quite nicely with RequireJS if you use James Burke's version which has been forked to be compatible: https://github.com/jrburke/backbone/blob/optamd/backbone.js

More info here: http://jcreamerlive.com/2011/12/09/backbonejs-modular-app-us...

Yup, https://github.com/tbranyen/backbone-boilerplate/issues/22

Currently anyone can use require.js. Delete the build folder and update the index.html.

I'd be curious to hear someone from Bocoup describe how this boilerplate fits in when you're already using a web framework.

In Rails, or Django, or whatever, wouldn't you want to use the built-in JavaScript folder structure and asset building strategy?

You would modify the folder structure of the boilerplate to accommodate the framework. Assuming your framework does asset building as well, you can just delete the build folder.

Yeah, boilerplate structures based on the most popular frameworks would be cool small project and time saver. I'm gonna adopt this idea.

Codebrew has its own rails-backbone gem:

https://github.com/codebrew/backbone-rails

I'm the author of that gem. My goal with it is to really just help people get up and running with rails & backbone as quickly as possible. There are no best practices built in and I try to avoid adding any extra features that aren't needed for getting started. I'm sure you could use rails-backbone to help get off the ground and then read over the snippets from backbone-boilerplate to see where to go from there.

I'm not from Bocoup, but I want something like this to build, test, deploy the client portion of my apps and then proxy api calls to backend services.

Not from Bocoup, and can't speak for Rails, but Django mostly does not care about that.

I started using Brunch with Django recently, by simply putting it (sans bundled index.html) into `$PROJECT/client-side` directory and specifying the build folder as a primary static files directory. Then I run `brunch watch` in parallel with development server. The same could be done with boilerplate, it seems.

Always better to keep frontend app and backend app separated. rails/django should only output json.

Here's my boilerplate for GAE + Backbone.js + Require.js, which is very good for large scale Javascript development.

https://github.com/ronreiter/webapp-boilerplate

I've seen your source code, and your build directory makes a lot of sense. I'll add it to my boilerplate as well.

Thanks for your code!

Awesome, its still new, so make sure you report any issues you find.

Nitpick:

I recently began to organize this work into a _conical_ boilerplate for Backbone.

I think you mean "canonical" :)

Fixed thank you =)

Glad there are people spearheading discussions around backbone project organization.

I agree that backbone is very powerful, but talk is just beginning on how to fit it in to current web app projects that don't fit the boostrapped-singled-html page model

Yes, I too would love more information on integrating backbone into existing apps. We're adding a lot of JS at $work and I'd like to better organize it and reduce boilerplate code.

Without getting into the technicalities of this, I am grateful somebody came up with this. I am working on a backbone + jq + mongo app right now & this might have been useful, at least in the early days.

This is really cool. As someone who has only a little experience with backbone, I've really been looking for a more opinionated approach to backbone.

This has been very helpful for me, learning Backbone.js: http://ricostacruz.com/backbone-patterns/

Hats off to the hard-working Tim Branyen and the rest of the crew at Bocoup. Thanks for sharing!

Commenting so I can look at this later.

just so you know, you were probably downvoted because hn approach is to upvote the story and then click your name to enter your profile and finally click "saved stories" to peruse at your leisure.

Which actually is somewhat strange, as one might upvote the story only to realize at later examination that it's less fine as one originally thought. And taking back votes isn't allowed, or requires some karma.

I'll note this for next time.

I would have preferred a "save this story" feature instead though (especially since "vote story" didn't immediately equate to "save story" for me)

You should check out instapaper or readability. Both offer browser bookmarklets for "Save for Later" functionality.

Reply on news.ycombinator.com