Loading YUI from Yahoo!’s CDN was one of the most requested features after the previous post Guide to using YUI with PhoneGap (Cordova). The good news is that it’s very easy to setup but does come with a few drawbacks.

Using the code from the previous post we only need to make minor changes to load from the CDN.

<!DOCTYPE HTML>
<html>
<head>
<title>My First Cordova YUI App</title>
<script type="text/javascript" src="cordova-1.8.0.js"></script>
<!-- Add in the YUI seed file -->
<script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>
<!-- Remove the included local scripts and YUI_CONFIG object
<script type="text/javascript" src="yui-file-1.js"></script>
<script type="text/javascript" src="yui-file-2.js"></script>
<script type="text/javascript">YUI_CONFIG = { bootstrap: false };</script>-->
</head>
<body>

<h1>YUI PhoneGap (Cordova) Example</h1>
<p>Click this button for a surprise</p>
<button>Click Me</button>

<script type="text/javascript">
// Remove the 'load all' flag from the use statement
// YUI().use('*', function(Y) {
// Request the Node and Event modules
YUI().use('node', 'event', function(Y) {

	var button = Y.one('button'),
		header = Y.one('h1');

	button.on('touchstart', function(e) {
		header.setStyle('color', '#00B2EE');
	});

});
</script>
</body>
</html>

And that’s it! That will load the YUI seed and loader from Yahoo!’s CDN then load in the Node, Event, and all dependent modules automatically for you. Isn’t loader great?

But all isn’t perfect, at the beginning I mentioned some drawbacks. In the previous version we were packaging up all of the required assets into the package which will be stored on the device. This will guarantee that those files are always available regardless of the users network connection. Using the remote loading method, once the application loads up it needs to make the request of the remote files before it will become functional. This can cause unnecessary delays in the bootup of the application or cause the application to be entirely useless if there is no network connection. Because of that I don’t recommend using remote loading for core application components. This technique can be very useful during development where your required modules may be changing frequently.

I’m going to try to keep making these tutorials so if you have anything specific you would find helpful for yourself or others please comment below, mention me on twitter or join #yui on irc.freenode.net