Use jQuery from CDN

[tsimbalar]

We should reference the jQuery and jQuery UI libraries from a Content Delivery Network (for instance Google : https://developers.google.com/speed/libraries/devguide ) so that users can benefit from browser caching (they may have those libs in their cache already) and do not impact our server resources unnecessarily.

We should offer a fallback for when we are working locally and offline though : see http://css-tricks.com/snippets/jquery/fallback-for-cdn-hosted-jquery/

For other js libraries that wouldn't be hosted by Google, see : http://www.cdnjs.com/

[benzonico]

I'll try to give it a look tomorrow, this cdn problem has some interest for me and the fallack is brilliant.

[benzonico]

Ok, having a look at this, it seems that the fallback would work nicely for jQuery lib but I have no clue about how to make it work for jquery-ui for example of for the css...
So i am linking this to CDN directly for now. And another thing : M$ and Google are not reactive enough to have integrated the 1.8.20 version to their CDN already so we are using the 1.8.19 version right now (but this is easily upgradable as soon as they have published the last version).

So what I did is that if we fail to load jQuery from CDN then I assume either CDN is down or we are offline, so i serve everything normally loaded from CDN.

[tsimbalar]

Nice !

A few answers to your comments :

• CDN for jQuery UI 1.8.20 (js + css themes) are here : http://blog.jqueryui.com/2012/04/jquery-ui-1-8-20/ . Google and M$ don't update their docs, but jQuery UI does, with each release notes.
• To check whether jQuery UI js libs could be loaded, do the same as for jQuery. Instead of checking if jQuery exists, check if (for instance) jQuery("body").accordion is defined (accordion is one of the jQuery UI plugin, and will not exist for jQuery objects unless jQuery-UI was loaded). This StackOverflow answer suggests using jQuery.ui http://stackoverflow.com/questions/5014040/fallback-for-jquery-ui-from-google-cdn
• to check whether the jQuery UI CSS could be loaded ... I haven't tried it, but this Stack Overflow answer looks good enough if it works : http://stackoverflow.com/a/7452378/474763

I'll reopen the issue so that we don't forget doing it :)

[benzonico]

• I saw that link while working on it : Problem is that the link for CDN on the blog post returns a 404 : this is the link that will serve the file from CDN not that is active right now. That's what I meant by Google is not reactive enough, if you read the comments, a lot of people are complaining about this.
• I'll try to make the other two points work as you described them. (However the currently implemented solution can still be valid, but it can be more elegant)

[benzonico]

And here it is.

• The fallback are made. So for now, only the twitter bootstrap css are not hosted on a CDN as they are not available on any of them (and given the customization possible of those files I dunno if it will happen).
• I have already prepared the jQueryUI for version 1.8.20, so while they are not available on google CDN, it fallback ou ours, and as soon as it will be available, the CDN will be used.

@tsimbalar I let you close the issue if you think it's good enough now, so the code is reviewed.

[tsimbalar]

Nice !
Reviewed - closed

[tsimbalar]

Ouch, I get a javascript Security error in Firefox when not connected to internet. The part that fails is when trying to access to the rules of a CSS file that comes from a domain other than the current host. The javascript error makes all the subsequent js calls fail, and therefore, some other js libs are not loaded ... Crap :-/

While investigating, I found yepnope which is a "resource loader". Looks like it knows how to retrieve both javascript and css with fallbacks. It may also be useful in the future when we try to support browsers that don't have native implementations of all the features we need (for instance websockets ... ). Also, it supports parallel loading of the files, and guarantees the order of execution.

Sorry, I have to reopen it :-/