

Introducing the Backbone.js Boilerplate - wesbos
http://weblog.bocoup.com/introducing-the-backbone-boilerplate

======
kragen
"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.

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

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

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

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

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

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

------
fiznool
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...](http://jcreamerlive.com/2011/12/09/backbonejs-modular-app-using-
requirejs/)

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

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

------
jashkenas
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?

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

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

------
ronreiter
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!

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

------
samstokes
Nitpick:

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

I think you mean "canonical" :)

~~~
tbranyen
Fixed thank you =)

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

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

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

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

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

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

------
darylteo
Commenting so I can look at this later.

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

~~~
darylteo
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)

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

