Moodle JavaScript. Using AMD with RequireJS. Daniel Thee Roperto.

Transcription

1 Moodle JavaScript Using AMD with RequireJS Daniel Thee Roperto

2 Why JavaScript? HTML CSS information presentation JavaScript JSON behaviour more information

3 Moodle JavaScript Cache First thing to blame! Get rid of it by purging caches Or just disable JavaScript caching

4 Grunt Remember to run grunt Better: leave grunt watching CI should check grunt

5 Inline JavaScript <script> <progress id="js-test" max="10" value="0"></progress> <script> var elem = document.getelementbyid('js-test'); // var elem elem is undefined! = document.getelementbyid('js-test'); </script> elem.onclick = function () { <progress this.value++; id="js-test" max="10" value="0"></progress> </script> Bad practice (or maybe not) The simplest way It runs immediately

6 External JavaScript file <progress id="js-test" max="10" value="0"></progress> <script src="progress.js"></script> // progress.js var elem = document.getelementbyid('js-test'); elem.onclick = function () { this.value++; Separates JavaScript from HTML Easier to maintain Runs at the position of the <script> May affect browser performance In general, put as close as possible from the </body>

7 Moodle external JavaScript file $PAGE->requires->js('/local/js/progress.js'); //...?> <progress id="js-test" max="10" value="0"></progress> <progress id="js-test" max="10" value="0"></progress> <! > <script type="text/javascript" src=" </script> <!-- JS code is minified... --> <!-- placed very close to... --> </body>

8 That s all I need! Give it a KISS, commit && push && go home!

9 Right, I need jquery! Uncaught TypeError: $ is not a function

10 Using jquery require( ['jquery'], function ($) { $('#js-test').on('click', function () { this.value++; } );

11 Require is Asynchronous window.console.log('started.'); require( ['jquery'], function ($) { window.console.log('running.'); ); } window.console.log('finished.');

12 What is AMD? AMD = Asynchronous Module Definition It will load modules when it is needed When loaded, it will run the callback giving them as parameters RequireJS is not the only AMD framework But it the chosen one (by Moodle, at least)

13 What is RequireJS? Is an AMD loader Not only for browsers Moodle defines a list of modules Loads the module only when a script requires it Can be used to create new modules.

14 Cool, I want to make one! define( 'my_progress', ['jquery'], function ($) { function clicked() { this.value++; } $('#js-test').on('click', clicked); ); } return 'my_progress defined!'; require(['jquery', 'my_progress'], function ($, p) { // p = 'my_progress defined!'

15 $ grunt watch Running "watch" task Waiting... AMD in Moodle >> File changed. >> 1 file created. Running "watch" task Waiting... // amd/src/basic-progress.js define(['jquery'], function ($) { var elements = $('<progress id="js-progress" max="100"></progress>'); $('div[role="main"]').append(elements); return elements[0]; // require-amd.js require(['local_js/basic-progress'], function (progress) { progress.value = 50; // Moodle Page $PAGE->requires->js('/local/js/require-amd.js');

16 Moodle js_amd_inline // amd/src/basic-progress.js define(['jquery'], function ($) { var elements = $('<progress id="js-progress" max="100"></progress>'); $('div[role="main"]').append(elements); return elements[0]; // require-amd.js Moodle <script> Page require(['local_js/basic-progress'], function (progress) { $PAGE->requires->js_amd_inline('require(["local_js/basic-progress"]);'); require(["local_js/basic-progress"], function (progress) { progress.value = 50; $PAGE->requires->js_amd_inline(' progress.value = 50; require(["local_js/basic-progress"], function (progress) { progress.value = 50; // require is not defined </script> '); // Moodle Page // $PAGE->requires->js('/local/js/require-amd.js'); Ugly, but works.

17 Moodle js_call_amd // amd/src/object-progress.js define(['jquery'], function ($) { var elements = $('<progress id="js-progress" max="100"></progress>'); $('div[role="main"]').append(elements); return { element: elements[0], initialise: function (initialvalue) { this.element.value = initialvalue; } // Moodle Page... $PAGE->requires->js_call_amd( 'local_js/object-progress', 'initialise', array(50) );

18 AMD Coding Styles No right or wrong, just suggestions... Find your own style

19 Literal Object AMD define(['jquery'], function ($) { return { pageid: null, progresselement: null, initialise: function (pageid) { this.pageid = pageid; this.progresselement = this.createprogresselement(); this.loadinitialprogress(); }, createprogresselement: function () { var id = 'js-progress_' + this.pageid; var elements = $('<progress id="' + id + '" max="100"></progress>'); $('div[role="main"]').append(elements); return elements[0]; }, loadinitialprogress: function () { // Fetch from WebService using pageid... var progress = Math.random() * 100; this.setprogress(progress); }, setprogress: function (value) { this.progresselement.value = value; // this.save(); }

20 Anonymous Object AMD define(['jquery'], function ($) { var progress = { progress.pageid = null; // Other fields... progress.initialise = function (pageid) { this.pageid = pageid; this.progresselement = this.createprogresselement(); this.loadinitialprogress(); // Other methods... return progress;

21 Singleton AMD define(['jquery'], function ($) { function Progress() { this.pageid = null; this.progresselement = null; } Progress.prototype.initialise = function (pageid) { this.pageid = pageid; this.progresselement = this.createprogresselement(); this.loadinitialprogress(); Progress.prototype.createProgressElement = function () { var id = 'js-progress_' + this.pageid; var elements = $('<progress id="' + id + '" max="100"></progress>'); $('div[role="main"]').append(elements); return elements[0]; Progress.prototype.loadInitialProgress = function () { // Fetch from WebService using pageid... var progress = Math.random() * 100; this.setprogress(progress); Progress.prototype.setProgress = function (value) { this.progresselement.value = value; // this.save(); return new Progress();

22 Class AMD define(['jquery'], function ($) { function Progress(pageid) { this.pageid = pageid; this.progresselement = this.createprogresselement(); this.loadinitialprogress(); } Progress.initialise = function () { // Perform any general initialisation. Progress.prototype.createProgressElement = function () { var id = 'js-progress_' + this.pageid; var elements = $('<progress id="' + id + '" max="100"></progress>'); $('div[role="main"]').append(elements); return elements[0]; Progress.prototype.loadInitialProgress = function () { // Fetch from WebService using pageid... var progress = Math.random() * 100; this.setprogress(progress); // Moodle Page... $PAGE->requires->js_amd_inline(' Progress.prototype.setProgress = function (value) { this.progresselement.value = value; // this.save(); return Progress; require(["local_js/class-progress"], function (Progress) { for (let id=1; id<=5; id++) { new Progress(id); } ');

23 Define vs. Require // A define creates a module, but does not load/run it. define('module_alpha', function () { window.console.log('module_alpha'); return 'ALPHA'; // Even if it requires another module, it will not load/run it. define('module_bravo', ['module_alpha'], function (alpha) { window.console.log('module_bravo with: ' + alpha); return 'BRAVO'; // No output so far. require(['module_bravo']); // This will load and "run" both of them. // module_alpha // module_bravo with: ALPHA // Note a require can be used to initialise the module, it does not need a callback.

24

25 Thank you! Questions? Ask now or me later... Daniel Thee Roperto