“RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.” IE compatible ✔ Firefox compatible ✔ Safari compatible ✔ Chrome compatible ✔ Opera compatible ✔ All good!!!!

Why do we use Modules? For better decoupling and maintainability Reusability To avoid naming collisions To facilitate unit testing

Module Pattern var MODULE = (function () { var my = {}, privateVariable = 1; my.moduleProperty = 1; my.getPrivateVariable = function () { return privateVariable; }; return my; }()); MODULE.getPrivateVariable();

What are AMD modules and why should we think about using them? Asynchronous Module Definition keeps the global namespace free less cumbersome to keep track of file dependencies encourages decoupling dynamic code loading (ie. If(true) loadThisFile() )

AMD Module definition define([“dependency”], function(dependency) { var value; function init() { value = dependency.getValue(); } return { init:init }; });

Common JS Module definition define( function(require, exports, module) { var value, dependency = require(‘dependency1’); function init() { value = dependency.getValue(); } exports.init = init; });

simplified CommonJS wrapping define( function(require) { var value, dependency = require(‘dependency’); function init() { value = dependency.getValue(); } return { init:init }; }); CommonJS-wrapper-and-standard-AMD-define

Returning name/value objects define( { color: “orange”, size: “medium” });

Returning Constructor Functions define(function(require) { function Model( id ) { var self = this, name = “Model: ” + id; this.getName = function() { return name; } return Model; });

main.js – require.config({}) require.config({ paths: { // map shared business logic MainGameController : "components/com_pchblackjack_content/assets/js/…, // map template specific views MainGameView : "templates/pchblackjack_desktop/js/game/MainGameView", } }); require( ["MainGameController"], function (controller) { controller.init(); });

text!plugin Loads in html as a dependency – define(["text!howtoplaytmpl"], function(tmpl) In-lined into optimized build – define('text!howtoplaytmpl',[],function () { return ' \r\n\t }

Dependency Injection swappable implementations – Use a mock service to simulate data using the map config. Let’s try using SoundJS instead of HowlerJS!

Optimization Use Node.js or Java to build your project Useful links: – Explains the basics: – Show all options: /example.build.js Time for some Grunt work!

Using Grunt with Node.js Install node.js npm install –g grunt cli package.json – Gather your tools – npm install [module] –save-dev Gruntfile.js – Create your requirejs task

Too many options! The optimization process can be daunting. Start early! Why can’t I load dependencies dynamically after optimization? AppDir, baseUrl, dir, … durrrrrrrr Shim – Stay away if possible Wrap.startFile/endFile – keep all your code in anonymous function

Continued Reading Check out Backbone.js and how requirejs can be used effectively. – backbone-using-modules/ – fundamentals/#wrapping-models-views-and- other-components-with-amd