Goodbye!

This will be the last post for this blog. I enjoyed writing about the ways in which I have used jQuery in my professional life - and I hope you enjoyed reading about it. This blog has covered the specific benefits of using jQuery in your projects. I would be remiss therefore to not at least mention the basic ways to add the power of jQuery to your site. Often when working on a When adding jQuery to your site you have two main options. You can either download the version of jQuery you want and host it on your own site, like so:

But the better decision would be to load jQuery from somewhere else, a content delivery network, the benefits to this are that you do not have to host the file yourself and you can access the minified version, which increases the speed of your site see:

I always go with Google myself as they are reliable and have the library hosted on a number of servers all around the world so there is not too high of a chance that they will all go down. One of the complaints I hear most is that jQuery slows down the site far too much. However, if you are using the minify version - there generally is not too much of a resource hit.

Using Google PageSpeed Insights if we take a look at a site that uses jQuery, such as JCU’s site, we can see the actual sizes of the jQuery libraries and how much space can be saved if the files are minified.

For all of the functionality that jQuery adds on, in JCU’s case a large portion of the WordPress plugins were written using jQuery, the slider on the homepage as an example - the extra size is worth it.

Other Frameworks and Libraries

In this blog post I would like to talk about yet another divisive topic among web developers.  Recently, web programming has been flooded with a number of JavaScript libraries that all aim to solve a specific problem. As we know, jQuery is nothing but a JavaScript library, but it is certainly not the only one worth mentioning. Recently, as I have been looking at job posting for software developers, specifically web developers, I have found that most of they ask for at least one of these relatively new libraries specifically.  Some of the most common ones I see are Backbone.js, Ember.js, and Angular.js. While these libraries seek to solve different issues ranging from the making web apps more structured to changing the way a web app communicates with a server.  The question I would like to discuss today is: Is it necessary / helpful to know the underlying JavaScript in order to effectively use these libraries?

My own experience certainly colors the way I look at this question. As it just so happened I learned JavaScript first at Company A and then learned jQuery after at Company B (technically the summer before for a personal project). When I started at Company A then sat me down and gave me a stack of books to help me learn JavaScript and I feel that in doing so this helped me to better understand and use jQuery to its fullest potential.

Whenever I see companies asking for specific library knowledge I wonder if it would be better for them to look for people with a strong JavaScript backgrounds rather than experience in a specific library. If a candidate can prove that they have mastered JavaScript then that shows they will most likely be successful in using many of the libraries built on JS. Furthermore, I think that since the landscape of web programming changes so quickly, one simply cannot learn all of these libraries. Rather, if a programmer knows JavaScript inside and out they will have the ability to adapt and learn new frameworks / libraries as they need them.

While I love jQuery I think it is only my experience with JS that allows me to appreciate the power of jQuery. One of the strongest reasons that lead me to believe a firm foundation in JavaScript is extremely beneficial is that all of the libraries that I have mentioned are open source and have public repositories on Github. See Ember.js Github, Angular.js Github, and Backbone.js Github. If you limit your knowledge to one specific framework then it is hard to dive into the code behind the framework and better learn how it works. Speaking off code behind, have you taken a look at jQuery Code?

Let me know what you think - is it worth it to learn JS before jQuery and other libraries / frameworks?

jQuery .ready()

I have mentioned before that jQuery adds on a number of usefully features to JavaScript that are meant to save time and make a programmers life easier. One of the best examples I can personally think of is the jQuery.ready() function. The ready() function runs your code after the DOM has been loaded and is ‘ready’ to access and manipulate. Although this may sound like a simple and useful thing to do, pure JavaScript does not have an equivalent. While JavaScript has some alternatives, they are limited by browser capability and do not accomplish the task with the same level of sophistication as jQuery. The jQuery API itself mentions a JavaScript alternative while pointing out its shortcomings.  The API states “While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed.” (https://api.jquery.com/ready/). Continuing an example I have used throughout the course of this blog, I would like to share an experience where .ready() was extremely useful to me.

The web app I recently developed for Company B relied heavily on manipulating DOM elements. Since I was able to use jQuery I just threw the necessary code in the method and didn’t really think much of it. However, I think we should take time now to examine just how cumbersome the alternative would have been. As a disclaimer I will state that the purpose of this blog is not to re-implement the jQuery.ready() method – there are a number of people who have done that already so we will rely on their experience. Stackoverflow user jfriend00 provided an alternative to the jQuery .ready() function as an answer to a question posted on the forum. His answer can be found here: http://stackoverflow.com/a/9899701

Here is the jsFiddle that jfriend00 posted with his working alternative:

*Again, just as a note I did not write this jsFiddle unlike the others on this blog.*

So while some others may suggest that there are easy ways to work around JavaScripts lack of a .ready() function, it is clear that there is a large amount of detail in the actual implementation of the method. This is a specific example of a time that jQuery made it much easier for me to do a simple task. If during my implementation of the web app I did not have access to jQuery then I could have run into an issue with trying to access elements from the DOM that had not been loaded yet.