Why I Like jQuery So Much

Introduction

I talked about how much I love jQuery in my 20 year programming background. I wrote a short section on why I like JavaScript so much compared to my other languages. I want to delve a bit more and write a full-fledged article on JS. When I first started learning JavaScript, jQuery was not out yet so I had to write JS all by hand without the nice short-hand that jQuery provides. The syntax is longer is what I call vanilla JS, which is just JS without any fancy special frameworks or libraries. I will discuss later on in this article on why you still need to learn JavaScript well before you jump straight to jQuery. First, I would like to start with one of the reasons why I love jQuery, it is widely used.

Popularity and Support

A lot of websites are using jQuery, especially WordPress, which currently has about 43% of the current CMS market share. That is almost half of the Internet and WordPress is definitely using jQuery just like most popular websites are. This makes complete sense since jQuery is much easier and simpler to use than vanilla JS. The syntax is shorter and easier to read. I find that jQuery is great for being able to manipulate HTML elements for any post-page load modifications. The documentation for jQuery is very thorough and has taught me a lot in really using jQuery to its full potential. Targeting elements might be one of the trickiest things to do in jQuery. With functions like child(), parent() and find(), I find it easy to start in one place and just work my way down or up the HTML node tree. jQuery has the flexibility to target the element that you are looking for. This becomes helpful when you inherit websites that have all sorts of HTML structures. Some websites have their HTML structured in such a way that it is difficult to target an HTML element that has no class or id. In some cases, the HTML is generated after page load. This is why jQuery becomes crucial when needed to manipulate dynamically generated elements.

jQuery Has a Lot of Plugins

Another thing that I like about jQuery is the amount of plugins that it has. This really speeds up development time because you never have to create anything from scratch. There is most likely a plugin out there that already does what you are looking for. Since us developers are under so much pressure to produce results so quickly, we really need to focus on integration over creation. This is why I love jQuery so much. I can just look online for something that I need that uses jQuery. More often than not, I will find what I need in jQuery. So I never felt like I had to build something completely from the start since it no longer makes any sense. I can focus on integrating something and continuing my development with very little down-time.

Many plugins that I have used are things like tabs, grids, gallerys, sliders, file uploaders and other things like that. Each plugin was really easy to integrate because they have very good support and documentation. Not only that, but the most popular plugins have a lot of options and configurations so that you can set up your integration however you want. You just have to be very thorough in reading the plugin documentation and fully understand how the plugin works. Also as a software engineer, you have to tinker with the plugin and try different things to make the integration work as you intend it to. In many cases, I had to think out-of-the-box and try methods that are not strictly in the plugin documentation. I used a lot of my experience and gut instinct in making things work. A lot of things, it is just like that. When things do not work, you just have to rely on your instinct. Sometimes it might just work. Since every website is different, the same solutions for plugin integrations will not always work.

jQuery Has Much Shorter and Simpler Syntax Than Vanilla JS

I already mentioned earlier that jQuery has shorter syntax than vanilla JS. This makes it easier to remember the syntax and write it out faster. In traditional JS, you target an HTML element with an ID with something like “document.getElementById(‘id_name’)”. Instead, in jQuery you usually just go $(‘#id_name’). The new syntax is about one-third the size of the original syntax. When you write a lot of JS like I do, you appreciate how much shorter the new syntax is. I also like how in jQuery, you write your event handlers in the JS. In vanilla JS, you place on click or on mouse over events inside your HTML, which is messy. This became problematic because you start to mix HTML and JS together in the same place. jQuery is much better because you can find all of your event handlers in one spot, not mixed in with HTML. So this makes managing your event handlers much easier.

AJAX: Content Updates On-the-Fly

I remember when I used AJAX for the first time. I was so impressed that you could update page content on-the-fly without a full page refresh. At that time, this concept was still very new. This was implemented a couple of different ways early on. Either you used a standard button tied to an on click event or you used setInterval() and had a timer update the information every X minutes or so. Now, we use vertical scrolling, which became popular on websites like Pinterest and Instagram to show more images once you reach the bottom. This was a great way to slowly provide content to users over time. For example, on page load, you show only the most important information. Then you have elements on the page, like a button to click or scrolling to show users more data if they request. This not only loads your page faster since you are not loading all of the data on page load, but you give users a chance to only request data that they want. Some users are only interested in learning more about product A or service B. So just load a preview of these products or services at the start. If the user wants to know more, then they can just click on a button and learn more without having to leave the page. This is how AJAX became so powerful as it opened new opportunities to give users control over your content. Users actually do not want to be overloaded and bombarded with all your data at once, especially if you have so much data to provide. You need to use AJAX to selectively and wisely provide data to your users via interactive page elements.

However, there seems to be a caveat with AJAX. Some believe, and I tend to agree, just err on the safe side that loading content on-the-fly via AJAX is not particularly good for SEO. The reason why is because search engines can only read content that shows up on the page source. The only content that shows up on the page source is when the page first loads. Search engines are unable to read any additional content that is loaded after page load. Some say that search engines are capable of interacting with the page to reveal additional information. I am not too sure about that. Search engines already have millions of pages to scan through and add them to their search results. Seems like a lot more work to have to interact with the page and find more content to index. I am not saying that you cannot use AJAX just because of SEO. I am just saying that if you use AJAX, then make sure if that is content that you want indexed, to have that content on another page so search engines can read it. So let us say that AJAX is used to show a short product description for products on a home page. Then you can provide a link for each product that will lead to a product page with full details. This way, you can use AJAX to do product previews and actual pages to do product details.

Runs Off the Browser: Server-Independent

Another thing that I like about JS is that it runs off the browser and not on a server. I like this because you can use it with any kind of server-side language. I am pretty much only familiar with PHP but I am sure that the same JS more or less would work with something like .NET. So there is no need to convert JS to another language since it runs off the browser. Unlike CSS, JS is compatible with pretty much every modern browser. Since most people are using Chrome today anyway, this is really not an issue. Same thing for CSS, most modern browsers can handle the latest in CSS3. Server-side languages focus just on data. Sometimes you want to do something else besides data manipulation. With JS, it is fun because you turn your web pages alive and see them change post-page load.

Learn Vanilla JS First Before Getting Into jQuery

You should learn JS before you try jQuery because there are many functions that you need to know in JS first. These functions include onces like setInterval(), setTimeout() and alert(). I still use these functions a lot when time calls for it. An alert here or there is good to use because console.log() requires you to check developer tools and for a single variable, I prefer alerts. I like how alerts go straight to the browser and popup right away. Using console.log() is mainly for objects because they are too large to print out with an alert(). Also, the basics of JS need to be learned first before using jQuery’s shorthand. When you use jQuery, you are still using conditionals, functions and loops that you need to know how to write in JS first. Once you know the basics of JS syntax, then you can try out jQuery. 

Also, for legacy systems, they sometimes use vanilla JS. So it is good to know some of the common methods on how to manipulate the DOM in case you ever encounter a website that uses plain JS. Sometimes I run into really old websites that have been around for years and were built with vanilla JS. So you never know what you will see out there. You at least need to be able to read vanilla JS and understand it. You might need to modify the JS if it is not written in jQuery. So you might see something like document.getElementById(‘id’).innerHTML instead of the shorter $(‘#id’).html(). 

Summary

This was an interesting article to write because I have already written about JS/jQuery. I just wanted to share more of my thoughts on jQuery because there is one last thing that I want to mention about it. With server-side languages and databases, you have to worry about the data and trying to retrieve or manipulate it properly. With JS, you do not have to deal with the data. The data has already been rendered on the page by the time the HTTP request has come from the server and hit the browser. With jQuery, I can focus on just adding some fancy and fun browser animation or interactivity. Although technically, if I use AJAX, then I can retrieve data on-the-fly. However, that would involve using a server-side language and database, so JS is just being used as a vehicle to retrieve data. JS is not actually getting the data, the server-side stuff is. So I would not count JS in performing data retrieval, just assisting in that as a post-page load way of getting fresh data. Still though, jQuery is very fun and I really like using JS a lot.