I talked about this (for too long) at the general developers meeting last night. Here is an executive summary of where we are up to:
DOM Manipulation/cross browser normalization: JQuery
Accessible widget library: JQuery UI but we need to wrap it to make it work with our theme system and improve the accessibility
Javascript Module format: AMD
Javascript Loader: RequireJS
Javascript build tools: 2 options - "None" or "Grunt" - we need to decide this.
"None"
You edit the JS files directly, and they are minified, concatenated and cached the first time they are requested. If in developer mode or after upgrades the cache will be invalidated. No linting step and we still need "shifter" for yui modules and "recess" for less.
"Grunt"
We can unify all our build tools so you just run grunt and it will compile less, run shifter, or minify AMD modules as required. Downsides are more files in the moodle root folder (Gruntfile.js, packages.json), a need to install node_modules locally in each moodle root folder, need to remember to run grunt after modifying JS, need to remember to commit the built files, lots of conflicts in the built files. Other things mentioned where running behat/phpunit with grunt (but we already have mdk for that).
Please reply with comments about the 2 options above.
With all these libraries in place you can create a JS module simply by creating a modulename.js file in the "amd" folder for your plugin.
mod/assign/amd/test.js
// Define a module with a dependency on jquery.
// Note - no global variables are required here - even for JQuery.
define(["jquery"], function($) {
// Do what I want with jquery here.
$('h1').hide();
// Define private variables and methods.
// Return a list of public methods and variables.
return {
get: function() {
return '5';
}
};
});
Then to call this module from anywhere we use:
// All modules are named "componentname/modulename" automatically.
require("mod_assign/test", function(test) {
// Print 5 to the console.
console.log(test.get());
});
