Tag Archives: Microwavable pie

Setting up Require.js

So last week I went into why we’re using Require.js, yesterday I did the core concepts of Require. Today I’m going to cover how to use it in a project. It will be almost laughably short. I am by no means an advanced user at this point, I have read a lot about Require and done some small demo projects. I haven’t yet used it to do anything one could describe as complex. This means what follows is Require 101, nothing more.

Getting started with Require

You may be used to loading all your JavaScript with a chain of script tags in your html. You may bundle it all up into one file and use a single script tag. Either way, with require it is different.


<script type="text/javascript" src="path/to/require.js" data-main="ponies.js"></script>

Obviously, ponies.js could be called anything. In fact, I really wouldn’t recommend calling it ponies. If you’re going to make a one-page app then you could do worse than just calling it main.js. We’re planning to have a multi-page application and so calling it main would just get confusing. Instead we’re planning to go for the naming convention of pagename.main.js for our Main files.

So, that’s it for JavaScript imports. Let’s take a look inside main.js

require.config({
	paths: {
		//libraries
		jquery: 'libs/jquery',
		underscore: 'libs/underscore',
		backbone: 'libs/backbone',

		//scripts
		developerModel: 'models/DeveloperModel',
		developerCollection: 'collections/DeveloperCollection',
		developerListView: 'views/DevelopersListView',
		developerItemView: 'views/DeveloperItemView'
	},
	shim: {
		jquery: {
			exports: "$"
		},
		underscore: {
			exports: "_"
		},
		backbone: {
			deps: ['underscore', 'jquery'],
			exports: "Backbone"
		}
	}
});

require(['developerListView'], function($, _, Backbone, DeveloperListView){
	var myView = new DeveloperListView();
});

This file can comfortably be divided into two parts, the config and the function. The config can be split out from the file so that it is reusable between main files. This is also valuable for the optimiser and testing in the future.

Splitting it out looks a bit strange because you use a require call to load in Require’s config. That wrinkles my brain, but it works and looks like this:

require(['requireConfig'], function(){
	require(['developerListView'], function($, _, Backbone, DeveloperListView){
		var myView = new DeveloperListView();
	});
});

The thing to note here is that without the require config, it’s not possible to define paths by name so you’ve got to use the full path to your config file here.

This function is the start point for your page’s JavaScript, so from here you kick everything you want to run off. Require will do all the clever business of loading in your dependencies, so you just need to list ’em and use ’em.

Now let’s take a look at the config file we pulled out.

require.config({
	paths: {
		//libraries
		jquery: 'libs/jquery',
		underscore: 'libs/underscore',
		backbone: 'libs/backbone',

		//scripts
		developerModel: 'models/DeveloperModel',
		developerCollection: 'collections/DeveloperCollection',
		developerListView: 'views/DevelopersListView',
		developerItemView: 'views/DeveloperItemView'
	},
	shim: {
		jquery: {
			exports: "$"
		},
		underscore: {
			exports: "_"
		},
		backbone: {
			deps: ['underscore', 'jquery'],
			exports: "Backbone"
		}
	}
});

There are two things going on here. The first part is setting up paths to use throughout my app. Essentially I am creating variables to hold the filepaths I am using. This isn’t necessary, but it makes it easier to write and maintain because I can change my file structure and change the references in one place. Plus, I don’t need to remember where everything is. I hate remembering things.

The second thing is the shim. This is a fix for libraries that are not compliant with the AMD API. Here we are defining global versions of these libraries so that they can act in a way that they are used to, however in the app proper we will still be using local versions so that the whole thing remains coherent and managable. This is just a way to make these libraries behave themselves. I’ve since come to a better understanding of what Shim does thanks to this post from Require.js developer James Burke. A require Module tells Require itself what its dependencies are when it is defined, Shim is a way to tell require what the dependencies of a file are if the file itself doesn’t decalre its dependencies to require. It does not do anything that affects the world outside of require, most notably, shimming something does not cause it to be downloaded.

And that’s it, Require is set up. Just use the main function to run everything you want to on your page. Easy as microwavable pie.

Advertisements
Tagged , , , ,
Advertisements