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.

jQuery UI Widgets

Many web apps, regardless of industry, will ultimately need to do many similar things. Whether to schedule a haircut appointment, or confirm a financial transaction - web apps will need to provide the user with a widget to choose a date. In the same way, you may want to show your user the progress of uploading a file by using a progress bar. Rather than creating all of these widgets on a web app from scratch, using jQuery UI can be an extremely powerful alternative. When using the default widgets it is important to make sure the styling of the widget fits in your branding. Sometimes leaving the default styling is the right choice - however many times it makes more sense to tweak the underlying css. The first part of this blog post will cover some of the specifics to override the default CSS. Widgets by default use the jQuery CSS framework (see http://api.jqueryui.com/theming/css-framework/). Using the list of CSS class rules provided by jQuery you can tweak the appearance of the widget.

Continuing my first example from above, let’s take a look at one of the jQuery UI built in widgets - the datepicker. As long as you have jQuery UI loaded on your website it is very easy to create a datepicker. All you have to do is create an input field and then call the .datepicker() function on it.

See my fiddle here:

If you look closely you can see that I have changed some of the subtle styling of the datepicker. Take a look at my fiddle to see some of the specifics that I have used to make the datepicker feel like more of a cohesive part in the web app. Changing things such as the text color, the font, and other visual elements is a good way to help the design.

One of the jQuery UI widgets that I have used extensively is the dialog UI. In both of my summer internships I have used the dialog to convey information. In one case I was able to use the jQuery UI widget - in the other case I had to rely solely on Javascript. One of the main issues this caused when related to the idea of a modal dialog. A modal dialog forces the user to click the button to close the dialog - they cannot merely click away and or hit the escape key. Without using jQuery I was relying on the showModalDialog (see https://msdn.microsoft.com/en-us/library/ms536759(v=vs.85).aspx). While this was working fine (the web team had been using it in a number of locations that I had nothing to do with) it had been removed from web standard and therefore was in the process of being deprecated. See https://developer.mozilla.org/en-US/docs/Web/API/Window/showModalDialog and a very interesting discussion on stackoverflow.com http://stackoverflow.com/questions/20733962/why-is-window-showmodaldialog-deprecated-what-to-use-instead.

Since we were not using jQuery there were few options available to us - either write a new function in house that accomplished the same thing, or find a third party plugin. I left the team before I saw the final solution. However, at my other internship we were using jQuery UI and so I was able to create modal dialogs just by setting the modal option to ‘true’ in the properties.

jQuery UI

As I have previously mentioned in this blog, jQuery alone can be extremely useful in making user interface operations run quicker. However, that is not all jQuery excels out on the front-end of web programming. The jQuery Foundation also offers jQuery UI (http://jqueryui.com/download/) which adds further capabilities to jQuery specifically aimed at enabling the creation of interactive and user friendly user inferface elements and widgets. I have used jQuery UI numerous times for my professional and personal development efforts. A specific example is when I wanted to hide or show results based on what a user entered into the search field.  

Here is a generic example of the logic I followed, this example only has a few elements that need to be either shown or hidden - in reality there were upwards of 5,000 elements that had been loaded into the DOM. This is where some of the “shortcuts” of jQuery really help to make the process simpler and easier to follow. In my below jsFiddle there are 10 divs that have sequential numbers appended to the end of their ids. This example shows how using jQuery an array of all the divs can easily be created and traversed. When the ‘show me evens’ button is clicked the jQuery function .addClass() adds a class to all of the odds that will set their display to none. It does this by grabbing all of the divs that start with “id-” and then checks to see if the appended index is odd or even. It is also interesting to note that in this example I also use make of the jQuery .each() function as well as jQuery UI Button functions (which adds functionality to standard buttons see: http://api.jqueryui.com/button/). Although I am only using the UI button to either disable or enable the button - some of the other functions available include: icons, text, and labels.

See my full jsFiddle here:

The widgets that are included with jQuery UI are also extremely useful because they allow for complete customization so you can customize the look and feel of the widgets while still relying on the underlying jQuery UI code. This is especially beneficial in real world software development environments because it is essential that all of the elements of a web app match the overall branding of the app and the company in general. Thanks to jQuery UI all you have to do is drop in your own custom CSS to the widget and just like that, it becomes a seamless part of your overall branding strategy. My next blog post will cover some of the built in widgets to jQuery UI like the datepicker, progress bar, and dialog.

User experience and jQuery

Image courtesy of: http://ncce.waketech.edu/wp-content/uploads/2013/08/jQuery-Ajax-Write-More-Do-Less.jpg

Over the summer, at my internship at Company B one of the many times that I utilized jQuery was in order to sort elements that had been loaded from the server. I was creating a web utility that would manage translations from a database table I had created. We were using MVC / Spring with Java and on page load we retrieved all the translations from the database and stored them in the DOM. When I first created the utility I just defaulted to the order that came from the database. It was not until my second code review that a member of my team mentioned it would be useful to be able to sort alphabetically on the key and also the value. My first instinct was to attempt to do the sorting on the server side using Java. I tried this by manipulating the data from the database using two custom comparators. This worked but it took way too long, the user would click the column heading to do the sort and it took about 6 seconds to return the results. After some reason I determined that it would be faster to use jQuery on the client side to sort the data once it had been loaded.  I was able to compare the first character of each of the elements, two at a time, to order them. Once implemented I was able to quickly order all of the elements. I used the timeline of Chrome Dev Tools and after the improvements the user clicked the column and almost instantly the results were sorted.

Here is a sample jQuery request (http://www.aspsnippets.com/Articles/Call-ASPNet-Page-Method-using-jQuery-AJAX-Example.aspx):

During the same stage of the project I also used jQuery to eliminate the need to post every time the language was changed. Before I introduced jQuery, the user would select a new language from the list and the web app would post to the server with a parameter for the language. This was one of the experiences that only happens in the real world - I had had the app working but it required numerous page refreshes. In order to fix this I used the jQuery AJAX method (API). Once implemented the page was able to submit parameters to the handler without having to refresh the page. One of the main things both of these experiences taught me is how powerful jQuery can be when it comes to improving user experience. This project really forced me to focus on how the user will experience the utility that I built. Not only did this show me the importance of a quick app - it also reinforced the importance of documentation. A lot of the jQuery I wrote ended up getting fairly complicated and I knew that people would be revisiting this code long after I left. Not only did I need to write inline comments but I also had to compose a functional specification document. This document gave me the opportunity to explain not only what I did, but why I did it the way I did. I was able to include the results from the timeline and show what I originally wrote and why it took so long.

jQuery Attribute Starts With Selector

Week 2

The internet is littered with forums that debate whether 'tis Nobler in the mind to suffer the Slings and Arrows of standard JavaScript or to use a library like jQuery to make your life a little bit easier. And, while it is all good fun (see parody framework websites like Vanilla JS) I have found, in my experience, that the choice is seldom yours to make. In most of my web development experience, the projects have been sufficiently mature that many of the framework decisions had been decided years ago. Either the web team decided to embrace frameworks, like jQuery, or rely solely on JavaScript. As I mentioned in my earlier post, I have had the opportunity of using jQuery on some projects and confined to standard JavaScript on others. This distinction drastically changed the way I went about solving problems.

There are those, like Stack Exchange user Zirak, who will argue that in order to truly appreciate the time saving benefits of jQuery, one must first understand the underlying JavaScript theory – and I’ll admit a part of me agrees with him. The reason I partially sympathize with Zirak probably stems from the fact that my first web programming internship at Company A did not allow me to use jQuery. Like everyone, when I started programming in JavaScript I found myself getting stuck and resorting to searching the internet for help. As I searched through countless websites, I remember wistfully thinking to myself “I wish I could use jQuery, it looks so much easier!” Often times websites like stackoverflow would have answers to JavaScript questions that said something along the lines of “This is easy to solve…if you can use jQuery” but this did not help me very much and I resorted to scouring JavaScript books at my desk. Let’s take a look at a simple example similar to a real world problem I faced.

Let’s say I wanted to manipulate DOM elements, but not just any elements – only ones with IDs that start with “my-ID”. Using jQuery this can easily be doing using the Attribute Starts With Selector. 

See my full JSFiddle example.

However, if you wanted to accomplish the same thing using pure JavsScript you would have to select all of the 'span' elements and iterate through to find the ones you are looking for, much less convenient.


See my full JSFiddle example.

As you can see, in this case it was much easier to use jQuery than pure JavaScript. But that does not answer the question, is it better to first understand pure JavaScript and then learn jQuery? I think yes, not only does learning JavaScript first teach you to truly appreciate the simplicity of jQuery, but it also allows you to understand exactly what jQuery is doing to make your life easier. Maybe it is just because I learned JavaScript and then jQuery, but I can say personally that knowing the underlying JavaScript helps me to write better, clearly, and more powerful jQuery code.