jQuery for Dinosaurs

I am kind of a fancy developer who would rather be using Angular, React or stuff like that. However, there are still tons of web projects on going that for one reason or another, they just can’t include such technologies. Luckily, jQuery is still out there and will always be our Batman’s utility belt.

The thing is that, during the last months, I have been taking part of one of these projects and some of my co-workers are what I call dinosaurs. Because they have big rock-solid knowledge about OOP and provide robust solutions to every requirement based on a long history of experience, but they get a little bit lost when they need to do stuff like disabling a button after a click without hitting the server.

Fortunately, they have been learning jQuery and using it in order to develop a better interaction with the UI. But it takes them a big effort because it seems to be way different compared to the code they are used to see and the problems they are used to solve.

jQuery is a cool library filled with tools that will help us develop client-side stuff. It is super compatible with anything you need. No strings attached with server-side technologies. Including it will not break anything you have already coded.

I will not make a second API documentation for jQuery, since the official one is pretty complete and understandable. I will try to give my good dinofriends some quick advises and warnings so that they can master jQuery.

jQuery is not a framework.

Yeah, whatever, let us see some code. NO. This is a basic piece of information that everyone should be aware of. jQuery is just a big pile of functions that will help you do whatever you need. But no more than that. Angular and React, on the other hand, are frameworks. The main difference is that you build an application based on a framework that crosses the whole application and your code is written on the basis that you are using such framework, while a library is a set of tools that you use when you have to solve a specific problem.

You can do everything with jQuery.

Well, everything may take a while if you only use jQuery… but you can still do it. Whenever you have a problem in your client-side JS code, jQuery may help you. We will talk below about DOM manipulation, that will solve 80% of your client-side problems, but it is not the only feature and you may be surprised. You have to do something and you don’t know how? Read the API documentation, because if you don’t find a function that already does it, you will find all the to tools you need to do it yourself. Here are some of the most important tools that this awesome library has to offer:

AJAX

You can perform HTTP requests to your server application without refreshing the page using $.ajax(). This is a pretty good tool that lets you configure everything you need. It uses the Chain design pattern to set callbacks for success(.done()), failure(.fail()) and completion(.always()) of the AJAX call. Callbacks for success or failure are called according to the HTTP response received. .always() is called at the end despite of the result.

Also, there are two more functions to make GET and POST that wraps the previous one.

If you happen to be curious, Google how to perform an AJAX call using purely JS and see how abstracted of the problem you will be by using jQuery.

DOM manipulation.

For those who doesn’t know, DOM stands for Document Object Model and it’s how we refer to the tree of elements that compose our HTML document.

jQuery’s most known feature is the fact that you can manipulate the DOM and do whatever you want. Without doubts, it is its more powerful feature and no one will beat it. We use a string that describes the items of the DOM to be matched. This string works just as CSS selectors. “#” for ids, “.” for classes.

Event handling.

The only reason why JS has a place in our world is because it lets us change stuff in the UI without going back to the server. That’s it. Take the hit you fancy frontend developers. And we need to change that stuff on events command. Events are simple actions like clicks, focus, alerts, mouseovers, scrolls, etc. jQuery lets us subscribe to any event and perform an action when an event is performed.

Tag builder.

jQuery has a tag builder that you can use to dynamically create new items to be later appended to your document. Why would I need that? Imagine you have a table that will be populated on demand of a form below it. When you click on a Save button, a new row must be created with the new info. Then you would need to subscribe to the the Save button’s click, create the items that you need with jQuery’s builder and append them to the table.

Array and Dictionary iteration

You can iterate any collection by using each(). There are two main overloads to this method. One that can be called the result of a jQuery selector, and a generic one that can be used with any array, or any object as a dictionary.

Abstraction over configuration.

jQuery tends to abstract the programmer from some logic that is not relevant for the 80% of the cases. But gives you the tools in case you are struggling with that 20%. There are some functions that, given its repeated usage, are wrapped in a simpler-to-call function that makes it easier to read.

jQuery returns instances of jQuery.

It’s simple. When you invoke a function of jQuery that returns something, that something will always be a new instance of jQuery, except if it returns a primitive type such as the length of an array or the value of an input.

Never point at something directly.

The best example to this is the usage of .parent(). This function can be invoked when you have already selected a tag with jQuery and you want to access the tag that contains it directly, its nearest predecesor. The problem with this is that you if you eventually need another tag in between, the new tag will be the new parent. Also, I’ve seen chained calls to .parent() that makes it even worse. In those cases, and whenever .parent() does not really make sense, I strongly recommend using .closest(), which will reference the closest tag in its way until body that matches a selector.

Read documentation.

Sounds like something obvious, but it is not. Reading as much documentation as you can about any library, plug-in or framework you are about to use will give you better options and less problems in the future. As a matter of fact, developers tend to hate the past ourselves as we find a problem with our 6-months-old code. So, try to make yourself a less hateful developer by coding the best you can.

Final words.

Again, this is not a second API documentation for jQuery, but the top tips I would give to anyone that has not been so fond of this library, or even frontend development, in the past. Also they are the key tools I keep using every time I need to use jQuery.

I could be describing more and more jQuery functions, but I guarantee that these are the ones you are going to use the most.