Shayan's Software & Technology

My adventure as a Software Engineer continues..,

Web Development: Safely Loading JQuery Libary from a Content Delivery Network (CDN) using JavaScript

Overview

Content Delivery Networks or CDNs are quite popular for loading third party resources, Often times firms are reluctant to trust these CDNs because they may not be reliable or may go down leading to a poor user experience. Although there is potential for this to be true we will discuss ways to mitigate that circumstance via some JavaScript code.

Loading JQuery

You may be thinking: I know how to load JQuery it’s quite simple using Google’s CDN:


<script src=
"//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

Yes, this is the correct way of using a CDN. But if you take this to your manager, he will say something along the lines of:

Why should we trust this CDN? What if it goes down somehow how will the user get the client-side experience they truly deserve?!

Your Reply

As a programmer, we don’t have all of the answers is to why something is beneficial. We know from reading about CDN’s that they are beneficial because they minify the library and the fact that the library data is coming externally. These are the basic benefits. For a more comprehensive answer basic research would lead us to the following stackoverflow article:

http://stackoverflow.com/questions/547384/where-do-you-include-the-jquery-library-from-google-jsapi-cdn

One of the most important considerations is the fact that the library among other CDN hosted libraries may already be cached on the browser of the user visiting your site. This may be due to the fact that the user visited another website that utilizes the CDN you are using.

This approach also cuts down on the bandwidth traffic to your site. If someone else is hosting a library for you, take advantage of it.

In all honesty, it is not likely that a CDN hosted by Google will be down for a long time. But it is possible to mitigate the 1% likelihood of this situation occurring.

Still Not Convinced

Well what do we do if we want to run the application on our local environments and we are somehow not connected to the internet?

This is when you take your JavaScript skills to the man:


<script src=
"//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"
</script>

<script>

if (!window.jQuery) {
   var localJS = document.createElement('script');
   localJS.src = '/localpath/jquery.min.js';
   document.getElementsByTagName('head')[0].appendChild(localJS);
}
</script>

How it works:

if JQuery was loaded successfully, it will populate the window.JQuery property. This property has a variety of other uses but we are using it to see if jQuery is loaded. If it isn’t, load the local minified copy. The local copy is loaded into a new script tag and is sent to the browser. In order to load the library dynamically we need to insert the HTML element <script> within the <head> element of the web page. This is done through the Document Object Model(DOM) by appending the built <script> element to the child of the <head> element.

Notice how I don’t need to append the type=”text/javascript” to the <script > element. This is because in HTML5 this is not needed and is applied to all <script> elements by default.

This way, your boss can have the satisfaction of knowing that when all systems are down. The user has the best user experience possible in terms of access to libraries!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: