I've been pondering JS a lot since hackfest in various ways and I'm keen to get the views of other developers here. One thing which keeps striking me is that we need to improve the way that we handle moodle YUI modules. At present, we put them in place in their own folder within a yui directory and that works well for us; but we're missing a few really great things:
- minification of our JS;
- testing;
- linting;
- removal of logging; and
- easily accessible meta-data for other uses (dependencies).
Historically, YUI used ant to build the project and ant is a pain to set up. However Dav Glass (lead developer on the YUI project) has written a replacement tool called shifter which is written for node.js. Thankfully, node.js is much less of a pain, much more lightweight, and shifter is much faster than the ant tools.
Shifter is great for our purposes because it handles all of the above, and it doesn't require any really major changes to our code; to use it we just need to: * adjust our directory structure a little; * move the requires data and YUI.add lines out of the module and into a meta-data file; and * define the JS module in a json file (build.json).
However, the big change is to working procedures. Because of the above changes (specifically that we move some of the metadata out of the module code) and the way that that shifter builds, it is no longer possible to just use the JS you've written without running it through shifter to add the relevant boilerplate.
Thankfully shifter makes that easy - you can run shifter using the --watch argument and it will continually look for any files it needs to build, so you can just modify the files you're working on as you develop and shifter will pick them up within a few seconds and deploy the built changes.
So in order to work on a shifted YUI module in our code, anyone wishing to develop a Moodle YUI module would have to have both node.js and shifter installed and know that you need to run them (node.js is pretty easy to install on most platforms; and to install shifter is just a case of running npm -g install shifter after install node.js).
The changes we need to make can easily be written such that it is possible to write Moodle YUI modules in the existing manner so third-party developers need not convert all of their code if they don't want to, but I believe that we should try and move all core code to this method for Moodle 2.5.
One of the biggest benefits of this change is that of added JSLint (JSHint technically). At present, almost none of the core JS we have in place passes JS Lint entirely without a single warning. Most of these are really just warnings, but some browsers really suck with some stupid things which then completely break JS for that whole page (like trailing commas on an array -- I'm looking at you IE<9). Lint would catch these early and prevent a majority of these kinds of bugs and also help improve the quality of our code in general.
One of the other benefits of using shifter is that we gain Minification of our JS for free - this doesn't sound a big deal, but some of our JS is getting pretty large and in most cases we can easily halve it's size. We would also gain the ability to add testing.
Another nice feature is that we'd also be able to use Y.log when developing JS and leave useful debugging in place. Shifter automatically removes the Y.log lines in all built files except for the -debug.js files which is perfect for those of us wanting that extra bit of information when trying to track down an issue.
My big concern here though is that this may add an additional barrier to people wanting to write YUI modules for Moodle and stop people wanting to contribute.
I'd love to hear any thoughts people have on this matter.
If you want to have a look at the kinds of changes that this would involve, I've pushed an example to github. You can build these either by:
- cd course/yui/src ; shifter --walk
- shifter --walk --recursive
If you choose the --recursive option, you need to be running a recent version of shifter (since yesterday).
Thanks in advance,
Andrew
