YUI loader for jQuery & jQueryMobile in MyMobile theme.

YUI loader for jQuery & jQueryMobile in MyMobile theme.

by Gareth J Barnard -
Number of replies: 11
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi,

Following on from the whole jQuery debate, I've been working with Andrew Nicols to create a YUI loader that puts jQuery and jQueryMobile in its own area.  Essentially, Andrew's done the code work, and I've configured and tested.

The attached file 'yui_mymobile.js' when placed in the MyMobile Javascript folder and called by changing the config.php file from:

// Add the required JavaScript to the page
$THEME->javascripts = array(
'jquery-1.7.1.min',
'custom',
'jquery.mobile-1.1.0'
);

to;

// Add the required JavaScript to the page

$THEME->javascripts = array(
'yui_mymobile'
);

This means that there should be no conflicts with other optional jQuery's you may have.  Currently tested with Moodle 2.3 version 2012062503.00 release 2.3.3 (Build: 20121112).  The code also ties in with the Moodle HQ decision of having jQuery loaded via YUI if absolutely required.

I'm now changing my tune over this having seen http://jsperf.com/an-jquery-vs-yui-selectors and the presentations / work Andrew has done on using YUI Shifter etc.

Cheers,

Gareth

Average of ratings: -
In reply to Gareth J Barnard

Re: YUI loader for jQuery & jQueryMobile in MyMobile theme.

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Gareth, this IS interesting stuff!

Can I do some testing too? smile

Average of ratings: -
In reply to Mary Evans

Re: YUI loader for jQuery & jQueryMobile in MyMobile theme.

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Dear Mary,

Yup smile

But found one bug when using my format as course format 'module.js' not loading sad - please see attached.

Cheers,

Gareth

Attachment yui_error.png
Average of ratings: -
In reply to Gareth J Barnard

Re: YUI loader for jQuery & jQueryMobile in MyMobile theme.

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Bugs are GOOD because you know that there is a new learning curve on the way! There is nothing to beat the euphoria on finding a solution to a problem! smile

Average of ratings: -
In reply to Mary Evans

Re: YUI loader for jQuery & jQueryMobile in MyMobile theme.

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Bingo! (Full horse as they say).

All to do with overwriting the global YUI_Config object, so updated attached, this time for Moodle 2.4 (jQueryMobile from 1.1.0 to 1.1.1) - info on http://yuiblog.com/sandbox/yui/3.2.0pr1/examples/yui/yui-loader-ext.html.

Cheers,

Gareth

Average of ratings: -
In reply to Gareth J Barnard

Re: YUI loader for jQuery & jQueryMobile in MyMobile theme.

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

This is a slight alteration to the script as Andrew thinks YUI( is a bug, so update.....

Average of ratings: -
In reply to Gareth J Barnard

Re: YUI loader for jQuery & jQueryMobile in MyMobile theme.

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Screen shot shown is a rough test demonstrating virtualluy no difference in load time.  However, my iPod Touch does seem to render the page much faster.

Cheers,

Gareth

Attachment mm_yui_l.png
Average of ratings: -
In reply to Gareth J Barnard

Re: YUI loader for jQuery & jQueryMobile in MyMobile theme.

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Also, this is worth looking at http://jsperf.com/yui3-vs-jquery/48 - from Andrew.

Average of ratings: -
In reply to Gareth J Barnard

Re: YUI loader for jQuery & jQueryMobile in MyMobile theme.

by François Gannaz -
Simplified the test above: only YUI and jQuery, no more Dojo and such. I also updated the frameworks. The JS code is unchanged.
http://jsperf.com/yui3-vs-jquery/51

It seems that YUI is faster than jQuery with Mozilla, up to 51% faster with FF21.
With the latest Chrome, jQuery is 13% faster. With IE8 (through Virtualbox) and the latest Opera, jQuery largely outperforms YUI, respectively by 70% and 337% (jQuery+Opera seems extremely fast).

Average of ratings: Useful (2)
In reply to Gareth J Barnard

Re: YUI loader for jQuery & jQueryMobile in MyMobile theme.

by Andrew Lyons -
Picture of Core developers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

One thing I do find incredibly disturbing about the mymobile custom.js file is that it has to be included *before* jquery-mobile (but after jquery). It seems to break otherwise.

It really shouldn't be a dependency upon jquery-mobile, but rather should list jquery-mobile as it's own dependency.

I'm sure that this is fixable, but just thought I'd mention it in case anyone know something about jquery-mobile that I don't...

Cheers,

Andrew

Average of ratings: -
In reply to Andrew Lyons

Re: YUI loader for jQuery & jQueryMobile in MyMobile theme.

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

I've noticed that too, surely custom.js should be dependent on jQuery-mobile.
That said, is there a way we can take jQuery out of MyMobile theme and use YUI instead?

I know some bit's of Javascript, but not had time to study it in great detail, but as I see it there must be some YUI js that would do what jQuery is doing for the MyMobile theme?

Mary

Average of ratings: -
In reply to Mary Evans

Re: YUI loader for jQuery & jQueryMobile in MyMobile theme.

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Dear Mary,

Custom.js appears to be an 'initialiser' for jQueryMobile and as such considered as a configuration file that is needed before the main operation.

There is a way to do what jQuery & jQueryMobile is doing in YUI, but that would be best created from scratch.  I did start to look into this and found some really good presentations by the same person:

http://www.slideshare.net/gonzalocordero/yuiconf2011-10061604

and

http://www.slideshare.net/gonzalocordero/yui-for-mobile-html5devconf-11

The are over a year old, but they are pragmatic in this area.

I was going to see what I could do with them but was told in the same thread on the developers chat that 'YUI mobile' was also 'broken pencil' territory.

jQuery & jQueryMobile in MyMobile is not 'bad' it just needs work to fix it.  I know I have lost the 'battle' in Moodle over this because jQuery is not YUI.

I know that YUI is probably a more robust, stable, scaleable framework for medium to large scale systems and jQueryMobile is perceived as being cheap and nasty.  But it has positive points of being easy to learn and has a practical interface that does facilitate interaction on portable devices without relying on supporting multiple architecture specific versions.  It's one solution in the 'choice' basket for users which should not be overlooked just because it needs work.

I know that many Moodle developers will probably want to get the flame thrower out and reply with loads of statistics and research about why jQuery / jQueryMobile is bad.  But I'm British (like you smile ) and the British always have a tendancy to support the underdog.

Cheers,

Gareth

Average of ratings: -