Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
66 views17 pages

Implementing AMD in Moodle 2.9+

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
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
66 views17 pages

Implementing AMD in Moodle 2.9+

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
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

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) {
[Link]();
});
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
• [Link]
IT Delivery
The Open University
Walton Hall
Milton Keynes
MK7 6AA
[Link]

You might also like