A RequireJS, Backbone, and Bower Starter Template
videos

A RequireJS, Backbone, and Bower Starter Template

on Jan 14th 2013 with 44 comments
Tutorial Details
  • Difficulty: Intermediate
  • Completion Time: 15 Minutes
Download Source Files

Switching to a modular approach to writing JavaScript is unfortunately a more difficult process than we might hope. Once you understand the concept of AMD, you then have to figure out the logistics: how do you setup RequireJS? What about non-AMD libraries? What about dependency management? What about configuration and optimization?


Download the Video

Using This Starter Template

The repo for the video tutorial should give you an excellent starting point, when beginning new RequireJS + Backbone projects. Once you’re comfortable with the process, also, at some point, be sure to consider Yeoman with RequireJS support.

Quick Setup

First, of course, download this repo. Then, from the Terminal (assuming Node.js installed), install RequireJS.

npm install requirejs

Next, we need an easy way to deal with dependency management. We’ll use Bower, from the guys at Twitter.

npm install bower

Let’s now install the dependencies for this project. I’m assuming that we’re building a Backbone project, so I’ve listed RequireJS, jQuery, Underscore, and Backbone as dependencies.

bower install

Please note that we’re using the AMD versions of both Backbone and Underscore to make the setup process as easy as possible.

When ready to build the project, run:

build/build.sh

this will create a new `dist` directory, copy the files over, run the r.js optimizer on assets, and clean it the file structure a bit for production. Refer to app.build.js for configuration options.

CSS Imports

If you’re not using a preprocessor, feel free to modularize your stylesheets, and @import them into a master stylesheet. During the build process, r.js will merge these files together, so that you don’t have to worry about any performance hits from using @import.

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://twitter.com/matmancini Matias Mancini

    I really don´t get the point of Bower.
    What is the point of fetching an entire repo?
    It seems to me that the time you spend in cleaning the folder is longer than the traditional way.

    • jeff_way

      I must admit I wish there was some way to only install the library itself. Maybe there is.

      Anyone know how with Bower?

    • Andrei Zisu

      I think it depeonds on vendor providing packaging information.

    • Dave Kingsnorth

      I agree, initially thought it would be useful but dropped it almost immediately. Is this a solution: https://npmjs.org/package/bower-installer

    • http://twitter.com/matmancini Matias Mancini

      i guess jam does a similar work without all that crap

    • pixelBender67

      I’m glad I’m not the only one

    • http://twitter.com/dburrows David Burrows

      I had the same complaint and looking around github I found this https://github.com/components which appears to be the Yeoman guys putting together what they call shim repos – a Bower installable library with just the working files. It’s pretty easy to put your own together so I knocked one up for Backbone https://github.com/dburrows/dsb-component-backbone

    • http://twitter.com/sindresorhus ෴ Cindersaurus

      The ability to install whatever lib out there without it needing any changes (well, except for a component.json file if it has dependencies).

      Bower will cache the repo, so you only do it once per version.

      In the future it will also get a way for authors to ignore files: https://github.com/twitter/bower/issues/88

  • Andrei Zisu

    Very elegant

  • http://twitter.com/ccccory Cory Simmons

    Thanks Jeff. I’m glad JS is getting so popular. Can’t wait for Andrew’s Meteor tuts. :)

    • jeff_way

      Yep – that’s coming in February.

  • http://twitter.com/slagterbas Bas Slagter

    Nice video. But how does this hold when I have views nested in views that only need to be required when a user hits a specific section on my page? And with loading templates for my views? I don’t want to push them all in one file because the user might not even hit 50% of the views/templates when using the application.

    • jeff_way

      When you run r.js, only the modules that are required for views/app will be loaded. Everything else will be requested on demand.

  • OliverJAsh

    Great screencast. I would be interested in now to incorporate the build script into a workflow where it watches the folder for changes and builds automatically. Also, I am unsure how you would use this in say a Node.js project. How will the server know what public folder to use (compiled or not)? I’m taking a guess you could use environment variables to dynamically set the public folder – whether that would be enough, I’m not sure.

  • http://twitter.com/devinfd Devin Dombrowski

    Hi Jeffrey, Thanks for all your backbone tutorials. It seems like you strongly favor that framework. I don’t at all want to start a framework debate but I’d like to hear your opinion about the others. Namely EmberJS and AngularJS.

    Thanks again!

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Hey Devin – Honestly, I don’t have a huge amount of experience with either of those. You could spend every month digging into a different JS framework. Eventually, you just have to pick one that looks/feels good, and do your best.

    • jeff_way

      There’s honestly too many choices at this point. You can’t keep up with all of them. Eventually, you just have to choose one that feels right to you, and do your best. A good reason to choose Backbone, though, is because there’s a big community behind it. This translates to more help, more tutorials, more screencasts, etc.

      • http://twitter.com/devinfd Devin Dombrowski

        I understand what you’re saying. I feel like I’ve been spinning my wheels for the past few months trying to learn each of them meanwhile they’re all getting new features which I didn’t learn when I played with them. The large community around backbone is a very important part of the equation.

  • T

    What sublime text plugin are you using to create folders and files so easily?

    • jeff_way

      AdvancedNewFile

  • petehawkins

    With the requirejs optimizer if you specific an “out” option instead of the “dir” option, require.js will just package up the built JS file, this avoids deleting a lot of the other files that are kept in place. It does have the downside that it won’t bother touching your CSS, however if you are using a CSS pre-processor this might not matter.

    I have a Backbone boilerplate project on GitHub (https://github.com/phawk/Backbone-Stack) showing this example of just optimizing the JS and it is all automated using grunt. Typing ‘grunt watch’ will listen for changes in your files and automatically lint, test and build your code, so even in development you will always be using the same build.js as you would in production. The only thing that uses requireJS without the build step is the unit tests.

  • sirfilip

    Why is the battery always on 10% ? :)

    • jeff_way

      Some people like to live on the edge. :D

  • Kyle Buchanan

    Just a comment on building the application with jQuery being optimized with r.js. Wouldn’t it make more sense to use jQuery from Google’s CDN in the paths object? By including jQuery in the build, you’re losing the advantage of using the CDN. I know it would make another network request to get jQuery, but most likely, the user will have it cached.

  • Potado

    Wow, this is excellent! I tried developing an application over the summer and it turned into a big mess of code. I looked into backbone.js and require.js and all that stuff, and I thought that all of it was very confusing, especially the setup. This will help me immensely. Thanks!

  • http://twitter.com/ericclemmons Eric Clemmons

    It looks like starter templates are pretty common. I’ve been fine-tuning my own Genesis Skeleton with Express + H5BP + AngularJS + Grunt – https://github.com/ericclemmons/genesis-skeleton. In short, generators create a skeleton that’s always wrong for 95% of my use-cases, so starter kits seem better, since you can fork, customize, and stay up to date easily.

  • Jammin

    I’m unnable to install this on win8. First I was getting git error 127 with bower and after fix it the error 128, can somebody help? cheers

  • Paul

    i would really like to know how you customized your terminal like this.

  • John Souris

    Enjoying your tuts Jeff. I wonder if you could give non-mac users some pointers? when I run the command:
    r.js -o app/build/app.build.js
    I get an ‘Invalid Charactar’ from ‘Microsoft JScript compilation errors’. Looking in the r.js file it seems to be a .sh file which windows obviously won’t run. Can you or anyone else tell me what extra steps windows 8 users need to take to get requirejs omptimizer working? Thanks again!

    • DrParanoia

      You need to change the default JS compiler from Microsoft to node.js. Right click the js file, then in the “Opens with” press “Change” and choose your node.exe (whereever it is installed). And as with comment above, don’t use r.js on Windows, you should use r.js.cmd

  • roblevintennis

    This is a very nice vid / tut and I appreciate the GH repo for getting up and running fast! Seems the vid says to install npm install but some of them are global and the article doesn’t reflect that (simple enough to figure out of course!). Thanks again for your time and efforts to produce this!

  • ARK007

    r.js is not working on windows 7, some error showing up. Can anyone help me ?

    • DrParanoia

      You should use r.js.cmd instead

  • http://developeradvocate.appspot.com David Nelson

    I just released an open source toolkit which will help with issues like this which gives you a tdd-able requirejs backbone app out of the box.

    It provides single commands to run: dev web server, jasmine single browser test runner, jasmine js-test-driver multi browser test runner, and concatenization/minification for JavaScript and CSS. It also outputs an unminified version of your app for production debugging, precompiles your handlebar templates, and supports internationalization.

    No setup is required. It just works.

    http://github.com/davidjnelson/agilejs

    • Chen Reuven

      Thanks I will check it :)

  • Ben

    Great little tut to get started. Thanks!

  • websilone

    Hi Jeff !
    Thank you for this great tutorial which gives I think a very good start point for all web projects.

    In the video, we can see you’re using Sublime Text as your text editor with some cool packages installed I guess… Could you give us the list of those packages ?

    Thanks again !

  • http://www.facebook.com/anderson.ryanc Ryan Anderson

    What would be the best way to include Laravel with this project?

  • shobhitgupta

    when ever we run the command which r.js on windows7 then getting an error which says which is not external or unternal command

  • Edison Leon

    Thankyou again