<img height="1" width="1" style="display:none;" alt="" src="https://px.ads.linkedin.com/collect/?pid=299788&amp;fmt=gif">

JSON Libraries - Part II

Software Development, User Experience, Software Solutions

By Justin Freeman

In the first part of JSON libraries series I talked about the benefits and drawbacks of Dojo. The next library I will tackle is jQuery.

SETUP

The setup for jQuery is pretty simple. You download the js files. You reference the js files in your JSP. That's pretty much it. Here is a basic example of setup.
[js]
<script type="text/<span class=">// <![CDATA[
javascript</span>" src="<c:url value="/public/js/jquery.min.js"/>" >
// ]]></script>
<script type="text/<span class=">// <![CDATA[
javascript</span>" src="<c:url value="/public/js/jquery.ui.min.js"/>" >
// ]]></script>
[/js]
Now you have the whole power of jQuery in your hands. No extra setup needed. Obviously this is much easier and cleaner than Dojo since you don’t have to remember which modules you may or may not use in the page. Everything is available to you all the time. A lot of developers enjoy that convenience.
Like Dojo, jQuery also has compressed and uncompressed versions of its library, so debugging is very simple for developers. When your web application makes it to a production environment, the performance of jQuery using the compressed files is greatly realized.

USABILITY

jQuery has a lot of features similar to Dojo. The big difference I see is notation. The jQuery notation is slightly simpler. I’ll show you a few examples.
If you recall the post for Dojo from my previous blog:
[js]
require(["dojo/request"], function(request){
request.post("senddata.action", {
data: {form.toObject(“aform”)
}).then(function(response){
console.log("response:", response);
}, function(err){
console.log("error:", err);
});
});
[/js]
Here is the jQuery version of the same request:
[js]
$("#aform").submit(function (event) {
var request = $.ajax({
url: “senddata.action”,
type: “post”,
data: $(this).serialize()
});
request.done(response, textStatus, jqXHR) {
console.log("response:", response);
}
request.fail(function (jqXHR, textStatus, errorThrown){
console.error("The following error occurred: " + textStatus, errorThrown);
});
});
[/js]
It looks like a little more code than Dojo, but that is just because it is discrete methods here instead of one big function in Dojo. I like the jQuery way slightly better because the code is a little more readable and would benefits junior developers more in understand what the code is trying to do.
Although the posting of the form may seem complicated, other operations in jQuery are quite simple.
Setting a css property:
[js]$afield.addClass(“definedCssClass”);[/js]
Setting an event handler:
[js]$("abutton").on("click", amethod);[/js]
Another useful property in jQuery is chaining. Instead of individually calling each method and saving to a variable, you can chain it just like you do in Java.
[js]$("#adiv").text("Some text to manipulate").addClass("red").addClass("bold"));[/js]

DRAWBACKS

jQuery has a 1.x version and a 2.x version. The latest 1.x version is similar to the 2.0 version, but the only difference is that the 2.0 version does not support IE6, IE7 or IE8. So you want to be careful here. IE6 and IE7 are becoming relative non-existent with the newest operating system but IE8 is still very much relevant. This is mostly because Windows XP only supports up to IE8 and, believe it or not, there are still large corporations out there clinging to Windows XP for a variety of reasons. Sometimes they have a software package that ONLY runs on the older browser or older operating systems. Until they switch or upgrade, they need to keep Windows XP. I have seen this scenario occur multiple times. I can’t tell you how long IE6 stuck around, forcing you to constantly write custom Javascript code to work with IE6 for your modern web application. Anyway, I would be hesitant to use jQuery 2.0 unless you are 100% sure that everyone (and I mean everyone) is using a reasonably modern web browser. It only takes one user to change your requirements on your web application...and you don’t want to make that mistake.
jQuery is a much simpler library than Dojo, but still very powerful. As I have more experience with Dojo, I prefer that library. However I see why a lot of people prefer jQuery. It is simpler and very easy to read, even for the junior developer. If you are looking to dive into the world of JavaScript, start with jQuery and work your way to the other libraries.

TAGS: Software Development, User Experience, Software Solutions

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Subscribe to Our Newsletter

Recent Blog Posts