Using the framework via the CDN

There is a third way to acquire and use the framework. In the previous section, we looked at two different ways in which we can download and include the framework locally in our project. In addition to downloading jQuery Mobile, you can also use it via a content delivery network (CDN).

When using a CDN such as Google or even jQuery's own, you do not have the files stored on your local server. Instead, when the user loads your web application or site, it makes a connection to the CDN and uses it from there. This offers a few advantages over having it on the server. One of the biggest advantages is that it increases parallelism. Typically your browser can only download a couple of files at a time from the same server. So if you load the jQuery files, jQuery Mobile framework JavaScript and CSS files, a few custom CSS, and JavaScript files, this can cause a bottleneck as you will have to wait for all the files to download. If you use a CDN, your application makes a connection to Google's server, for example, and downloads a couple of files while your local ones load. This may not seem like a lot of benefit since the files are so small, but it can make a world of difference to your end user. Some other advantages are as follows:

• If the user visits other sites that use the same CDN, the framework files could already be cached, thereby decreasing your load time even more.
• It reduces the load on your web server. If you have a heavily used site or application, this could decrease the use of your own server resources.
• Using a CDN can also allow the user to download the framework files even faster since there may be a CDN mirror closer to the user location than your web server.

So with all these cool advantages, why in the world would we ever want to use it locally? I mean, it sounds like we'd be stupid to ever download it again. Well, my friends, as with many things in life, there is always a downside.

Obviously, the biggest downfall is offline applications. If you are expecting or even adding the slightest bit of offline functionality to your project, then you cannot have the project going off server to use the framework from a CDN. It would have to be stored locally. If the user is offline, they won't be able to download it from the CDN and therefore would not be able to use the project that you worked so hard on.

Okay, so you're not planning on any offline functionality of your project. What else could stop you from using it via a CDN? Well, my friends we have a few more downfalls:

• If your project is on a company intranet, there may be ACLs or firewalls in place that could prevent your internal webserver from accessing the outside world.
• If your website is using an SSL certificate, the user will get a warning that they are accessing information from an unsecure site. This could spook many users and they may not trust your website.
• If you make custom changes or add new functionality to the framework, you will obviously need to store it locally unless you're an absolute rock star and get your changes rolled into the main builds.

Well, we assume that we have covered the advantages and disadvantages of the usage of CDN well enough, so let's look at how and from where we can load jQuery Mobile.

There are three main CDNs we can use in our projects. They are Google, Microsoft, and of course, jQuery itself. Are there advantages to using one over the other? Possibly, but I think the differences would be small. Google may offer more mirrors but more people may use jQuery's own CDN meaning more people would have it cached, so in the end there may be no difference in efficiency.

We will look at the code for each of the CDNs and you can pull it from whichever one you wish to use.

Google's CDN

Google's CDN code is as follows:

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js "></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>

Microsoft's CDN

Microsoft's CDN code is as follows:

<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.0.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

jQuery's CDN

jQuery's CDN code is as follows:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

So what are we doing in each of these blocks? Well, the first line of each block <link rel...> is loading in the CSS file we need for the project. The first <script src...> loads jQuery itself into our project. With the current version of jQuery Mobile, you can use jQuery versions 1.8 to 1.11 or 2.1. You will have to make sure that for every jQuery Mobile application, you will need to refer to the jQuery library before you refer to the jQuery Mobile JavaScript file.

Tip

This brings up a good point: even though we are using jQuery Mobile, we still need to load jQuery core. jQuery Mobile is not a replacement for jQuery proper but more of an extension, much like jQuery UI is.

The final <script src…> file loads jQuery Mobile itself. So let's get our feet wet in code now.