Todo app using Backbone + RequireJS + Bootstrap + Yeoman (Grunt + Bower)

For this app I wanted to mix up some of the modern front end development workflows:

Backbone: JavaScript MVC* framework
RequireJS: AMD module and dependency loader.
Bootstrap: rapid front end prototyping
Yeoman: has 3 main components:

  • yo: for scaffolding, wich I didn’t use in this case because as version 1.0 they don’t have backbone scaffolds.
  • bower: to download and manage script dependencies
  • grunt: to configure and execute tasks

* Actually, traditional MVC (Model View Controller) is not so accurate to describe it, as the traditional workflow doesn’t fit so well for front end. Backbone uses a Model View Collection Router approach.

I’ve been playing quite a lot lately with this tools, and following some tutorials, specially from Addy Osmani, which has this fantastic free/opensource book about Backbone.

So with the end result of that tutorial (you can see that in the TodoMVC example), I created a new Yeoman project with Bootstrap support and replaced the styles.

Then I was playing a bit with the app, and added PushState support, so the routes are replaced dynamically in the address bar, without hash tag.

You can find the result in Github.

Here you can see a preview, but keep in mind that the routes won’t work there.

Also added some example test using Mocha + Chai (with “expect” assertion). I didn’t manage to get it working from yeoman command line (grunt test), and you need to open directly the test/index.html file in the browser to run the test. It uses relative paths.

I’m sure there is a way to use grunt test so the test runs in command line through PhantomJS, so if someone can fix that, please fork!

Recently updated a new version with the latest versions of libraries, and made the example test run properly. Just run grunt test for command line test, or grunt serve:test for open the test in the browser.

2 Responses to “Todo app using Backbone + RequireJS + Bootstrap + Yeoman (Grunt + Bower)”

  1. mezod

    muchas gracias por el repo de github. Me pregunto si has hecho alguna otra documentación al respecto, en que orden instalaste las cosas por ejemplo :)
    Muchas gracias!

    • Jesús Carrera

      Para instalar las cosas simplemente haz “npm install” y “bower install”


Leave a Reply