When I first started learning to code, I found it difficult to navigate through the terminology, jargon, and acronyms that seem to accompany every technology I played with. And it can get even harder when things sound very similar, or operate in a similar ecosystem.
In this article we’re going to demystify that question, and leave you with a better understanding of what both of these technologies are, as well as the benefits of using them. Let’s dive in!
- So what is JQuery then?
- Perfect, now what is frontend code?
- What does JQuery do exactly?
- Downsides to JQuery to be aware of
- Where should I go from here?
2. So what is JQuery then?
Wow, there was quite a bit of jargon in that definition. Let’s take a minute to define some of it.
A library, like where I get books?
In programming, a library is a collection of useful code, grouped together to be reused later. Libraries have a well-defined interface that makes it easier to perform the functions it was designed to do. They generally make it so you have to write less code to accomplish the same amount of work.
So let’s say you wanted to write a program, which at some point saves some data to your hard drive. You could write that entire program yourself, which would be quite a bit of work. Or you could use libraries someone already created, to make some parts of that program easier to code.
3. Perfect, now what is frontend code?
Typical web applications can be thought of as having two parts—the backend (server-side) and the frontend. Knowing the difference between the two is essential to being a web developer.
The server-side code is code your users never see. It’s the code that is responsible for the logic of your application, the code that saves data to a database, etc.
4. What does JQuery do exactly?
JQuery makes it easier for you as a developer to interact and modify your HTML and the data it contains. For example, let’s say you want to disable that button so it can’t be clicked again. You could do that with the following JQuery code:
JQuery is used twice in there. The first being the selector, which is represented by the $. This will go through your web page and it will return an HTML element with the i.d. “my-button” if there is one. Then through the use of the .prop method, it will change that element’s properties, to include the “disabled” property with a value of true. And voilà—you can’t click your button anymore.
document.getElementById(“my-button”).disabled = true;
Though the code isn’t that much more complicated for our simple example, I would need a much more complicated explanation to explain what document refers to and why we can use the getElementById function on it.
5. Downsides to JQuery to be aware of
The newly developed frontend frameworks make it easier to write large, complex frontend applications and are a good alternative to JQuery for large codebases.
6. Where should I go from here?
And I would also recommend looking through JQuery’s documentation to see if it can be applied in your next project. I recommend the JQuery UI library, it has saved me quite a bit of work in the past and it will always have a special place in my heart.