Scribd
Upload
12 views

Moodle Javascript Amd

AMD (Asynchronous Module Definition) is a JavaScript module framework that allows code to be organized into separate, reusable modules. It defines a standardized way for JavaScript modules to interact with each other. With AMD, modules are defined using a define() function and can declare dependencies on other modules. Code is placed into AMD modules located in amd/src folders, and these modules can be called from PHP using $PAGE->requires->js_call_amd(). A grunt build process is used to minify the code into the amd/build folder for production.

Uploaded by

Iqra Sarwar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
12 views

Moodle Javascript Amd

AMD (Asynchronous Module Definition) is a JavaScript module framework that allows code to be organized into separate, reusable modules. It defines a standardized way for JavaScript modules to interact with each other. With AMD, modules are defined using a define() function and can declare dependencies on other modules. Code is placed into AMD modules located in amd/src folders, and these modules can be called from PHP using $PAGE->requires->js_call_amd(). A grunt build process is used to minify the code into the amd/build folder for production.

Uploaded by

Iqra Sarwar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

Moodle 2.

9+ JavaScript with
AMD

sam marshall, 15 September 2015


What is AMD?
• Nothing to do with the CPU/GPU company…
• Module framework for including JavaScript
– All new JS code (2.9+) should use this framework
• Not available in Moodle 2.8 or below
– Other methods still work for now (YUI, Shifter)
• No need to port existing code yet
AMD modules
• Plugin can have one or more AMD modules
• Module is a .js file
• Can call functions in one module from another module
• Using multiple modules can improve readability
Creating an AMD module
1. Create JS file in correct location
2. Call it from PHP code
3. Build release version
1 <plugin>/amd/src/<module>.js
/**
* @module format_oustudyplan/sections
*/
define(['jquery'], function($) {
/**
* @alias module:format_oustudyplan/sections
*/
var t = {
init : function() {
// Your code here.
}
// Other functions and variables here, comma-separated.
};
return t;
});
Code structure
• You can actually organise code in a zillion ways
• Example with t variable is my favourite structure
– I use t as short for this (but without special behaviour)
• Official documentation uses multiple structures
– Hard to understand
Actual code
• Use jQuery (not YUI)
– Principles are similar to YUI
– Many jQuery tutorials and references on the web
• Use own judgement to select a non-sucky one
– Moodle currently has jQuery 1.11.2
• Function names and variables should now be
camelCase (different to PHP under_lines style)
Calling other modules
• Example code only required jQuery.
• Add modules at start if desired
define(['jquery', 'local_thing/module'], function($, localThing) {

• Variable will be set to ‘t’ from module


• Or require dynamically anywhere in code
require(['local_thing/module'], function(localThing) {
localThing.someFunction();
});
2 Calling from PHP
• If no parameters to function:
$PAGE->requires->js_call_amd('local_thing', 'init');

• If parameters:
$PAGE->requires->js_call_amd('local_thing', 'init', array('frog', 42));

• Can call any function this way


– init is not a special name
3 Build release version
• The previous steps work already for a developer system
– Assuming you have cachejs setting off
• Need to use grunt to minify for release version
Install grunt
• From Moodle root, 2 commands:
npm install
npm install -g grunt-cli
• If it doesn’t work, similar troubleshooting as for phpunit
• It worked for me!
Run grunt
• Run grunt after changing AMD JS files
• In command prompt (git bash), change to plugin
directory then run it:
cd local/thing
grunt jshint uglify
• jshint checks your JS code for possible errors
– If there are errors, it will stop after that
• uglify does the actual minification
Successful run

• The 6 files created are in amd/build


• Always says created even if they already exist
Run before commit
• Run grunt to update minified files before each commit
– If a commit affects amd/src then it should also update
amd/build
• No need to run it while developing
– Changes to amd/src take effect on reload when
cachejs setting is turned off
• When cachejs is on, amd/build is used
– Need to purge caches/update JS revision to update
Summary
• AMD modules are .js files in amd/src within plugin
• Include from PHP with $PAGE->js_call_amd
• Run grunt to update amd/build minified versions

• Examples in format/oustudyplan, but currently only using


AMD properly in osep branch
• https://docs.moodle.org/dev/Javascript_Modules
IT Delivery
The Open University
Walton Hall
Milton Keynes
MK7 6AA
www.open.ac.uk

You might also like