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.

Welcome!

Hello and welcome to my blog about the most popular JavaScript library in the world – jQuery! My name is Mike Cherveny. I am a senior pursuing a degree in Computer Science with a minor in Economics at John Carroll University in Cleveland, Ohio (Feel free to connect with me on LinkedIn). When tasked with choosing the topic of the blog I knew I wanted to write about something I am passionate about that would also provide useful information to the reader (you!). Ultimately I decided to write a blog about web programming. Programming has always been a passion of mine, from class work and personal projects to multiple internships in the software engineering field I have always been fascinated with expanding my programming knowledge.

Almost completely by chance, most of my experience has focused on web development. I was placed on the Web Server Development Team at my first internship at Company A and ever since then it has stuck. One of the main topics I will focus on in this blog is how I have used jQuery in the professional world – I can’t wait to share my experiences with you! I have had both the experience of being able to utilize jQuery as much as I want on projects to, only having access to vanilla JavaScript on other projects. These contrasting experiences have given me an appreciation for how much easier things can be in jQuery! It has also inspired what will become a running theme in this blog – comparing the process of doing the same thing in jQuery and JavaScript. One of the most frustrating things about programming exclusively with vanilla Javascript is being forced to come up with a long and complicated work around for what can be done in jQuery with a few simple lines. Before I dive too deep into what this blog will entail, I think I should go over some jQuery basics (feel free to skip right over this if you are familiar with the library).

jQuery was developed by John Resig and first released on August 26^th, 2006. The first thing to mention is despite some common misconceptions, jQuery is not actually a programming language! It is nothing more than a JavaScript library. According to jQuery’s own website (jquery.com) jQuery is “a fast, small, and feature-rich JavaScript library”. jQuery is open sourced and maintained by the jQuery Team. The real power of jQuery comes from its ability to simplify the web development process – but more on that later!

Over the coming weeks I invite you to join me as I discuss everything and anything jQuery. Topics will include (but are not limited to): the numerous benefits of jQuery, examples of how I have utilized jQuery to solve real world business and programming problems, how to write unit tests for jQuery, the unique features that makes jQuery one of the most powerful web programming languages. I hope you enjoy following my blog, please feel free to leave feedback in the form of comments below each post!