This tiny little line of code starts up my whole app. It includes require.js and then tells require js what .js file to look for in order to start the app. So in this case, my app will look for js/app.js for further instrucitons.

So, here we first include a ‘baseUrl’ which will contain all our libraries. In this case, that’s ‘js/lib/’ which contains backbone.js, jquery.js, less.js (not used through require.js), require.js, and underscore.js. We tell requires.js to expire the application immediately for development purposes. Then specify our app directory js/app/.

Finally (and this is where I got stuck for a bit), we establish dependencies and namespaces. Backbone requires jquery and underscore. Similarly, underscore requires jquery. So we tell require to load them accordingly. We also declare our namespaces ( Backbone for backbone and _ for underscore).

// Load the main app module to start the app
requirejs(["app/main"]);

We’re finished with this file. Require.js has loaded all our dependencies and has started to load our app. Where exactly is our app again? That would be in js/app/main.js! Let’s take a look.

Now, really this is where the magic happens and all we have to do in order to get started is this:

// Setup some requirements. Jquery and Underscore are requiremetns for backbone
require([
'jquery',
'underscore',
'backbone',
], function($, _, Backbone){
// Some Asome Javascript that will change the world
});

Now we have all the components we need to start writing some functionality. In this case, we’ll start at the end ouf our code with the router.

This is our router. It basically sniffs out our changes, matches different patterns for it, and redirects to a url accordingly. It’s pretty cool. In this case, when we go to a home page, it will fire up ‘defaultRoute’, because there isn’t anything in the url. If it find movies/23423 it will pass on that number to the getMovie function, in order for it to use it.