To what extent should I use jQuery

[csdude55]

I'm only just now working with jQuery. I never really needed it, but I've recently implemented another framework that required it so... what the heck, might as well use it where I can save some coding size.

But here's the question. Since I'm already importing the framework, is there a logical reason to switch all JavaScript over to jQuery? Is it generally going to be faster, less processing demand, or overall better in any way than a comparable JavaScript code?

For example, I have about 250 lines that look like this:

var tele = document.form_name.tele.value;

if (tele.indexOf('372') !== -1)
 document.getElementById('example').checked = true;

Will it always be better to change it to:

var tele = $('#tele').val();

if (tele.indexOf('372') !== -1)
 $('#example').prop('checked', true);

Shorter code in general means a faster download time, so THAT's an advantage, I guess. But other than that, is there any other real advantage?

[JAB Creations]

NEVER use jQuery. It's 70KB of bloated pointless code. Everything done by jQuery can be done with scripts that barely add anything to your bandwidth. It's not shorter code. I've built all of my own functions and have refined them extensively the past decade or so.

Even worse: jQuery has versions and the code breaks like crazy. You'll end up wanting to use a new "feature" but will break a lot of the stuff you've written. By using pure real JavaScript unless you encountered an browser implementation bug then once it works it will continue to work. The only reason you should even consider learning jQuery is if you work at some large cold corporate office. Dependencies are weaknesses and you should never add dependencies without serious consideration to why you're using it. While JavaScript is an interpreted language others like C are compiled so you would have to carefully choose which compiler you would use (e.g. not using Intel as it intentionally gimps the performance of AMD processors and thus is monopolistic in nature).

Performance wise jQuery is slow. It adds unnecessary layers. I'm sure that a lot of the object detection is backwards too; you always detect the standards compliant approach first. There are benchmarks around the web that show how slow jQuery is compared to pure JavaScript.

If you want to learn good code you should research code that has been refined over years and years for the same projects that continue to expand instead of projects that fracture. I've been working on my JavaScript documentation [jabcreations.com] and while not everything has a description enough of it does to give you an idea. Click on the function names to view their code. Back in the 2000s there was no Stack and a lot of other resources; this was the site I came to in order to learn.

I hope this grants you enough insight. I'm not saying don't mess with it or consider some of it's libraries though if you want to be a powerhouse coder or greatly improve the ability to control the environment you're working with because your family, friends, clients, etc deserve it then keeping your code minimal (and strict) is the way to go. I also highly recommend using the XML parser instead of the HTML parser (application/xhtml+xml instead of text/html, use SQL's strict mode (MariaDB enables it by default) and maximize the sensitivity of error reporting. Learn how to code at a higher level and you'll be able to do things other people can't.

John

[tangor]

What he said ^^^^ !

jquery is for those who don't want to learn HOW to code, just want to plug and play by functions. That said, if one IS in that category, then jquery is useful, but the true benefits will be hidden. Don't have to do everything DIY, but if you really want to know how something actually WORKS, that's the best way.

[keyplyr]

I use jQuery to get functions related to responsive display. Old hat JS wouldn't do it as well.

Since I'm already importing the framework, is there a logical reason to switch all JavaScript over to jQuery?

With with the proper caching headers, the browser caches the jQuery library so it's very fast and offers a feature rich environment. Use it as much as you like.

[csdude55]

In my case I wanted to implement Infinite Scroll, which (in theory) should increase my relative pageviews and ad impressions. Whether that will turn in to more money has yet to be seen, but it's worth a shot.

I don't know of any way to implement Infinite Scroll without the use of jQuery, though. I load it from Google and my speed tests show it being cached, so I don't think that the download of the framework itself is a concern. I was more concerned about the processing time.

As far as I can tell, it varies from instance to instance. I know that using $.each seems to be a LOT slower than a foreach loop, anyway.

[NickMNS]

I don't know of any way to implement Infinite Scroll without the use of jQuery,

One of the main reasons I stopped using jQuery, was (indirectly) due to the implementation of infinite scroll (not really infinite scroll but the same general idea). The exact reason is to do with promises. jQuery has promises but the implementation is different from how promises are handled in the newest versions of JS. Here is an explanation of how promises work: [developers.google.com...]

should increase ... ...ad impressions.

Be very careful on how you implement AdSense with infinite scroll functionalities. AdSense is not meant to be used with infinite scroll and there is very little support and information available. The main thing you need to be sure of is not to use document.write(), or functions that use document.write() within them. An example is $().html or innerHTML. These are often used for adding content to an already existing page. What they do is take the content of the target element, make a copy, append or preprend the new content to the copy and return it to the page. What happens with the AdSense code that is in (child of) the target element, new ads are requested, but the initial ads remain. You end up with ads stacked on top of each other. Each time new content is added a new layer of ads is added. AdSense and AJAX don't play nice.

This demonstrates the point made JABcreations. You really need to understand how things are working regardless of whether you are using a framework or not, and is often easier to write things from scratch then to try an understand or figure out whether a framework is well suited for your specific use case.

[robzilla]

Whenever you run $('#something'), what jQuery does behind the scenes is basically just document.getElementById('something'). Like all frameworks, it's just a wrapper that makes development easier and quicker. The trade-off is that the framework needs to be downloaded and initiated, and that it's always going to be a little slower than the original language (unless you're not as efficient a programmer as the jQuery contributors).

Run this benchmark [measurethat.net] for an example.

Some things that jQuery makes simple are quite complex in vanilla Javascript, so it can certainly be a blessing, and I've used it in a few projects where load times were not an issue or there wasn't enough time to write everything from scratch. However, if you'd only be using a few of its functions, you might as well check the jQuery source and see how they do it. Because jQuery is Javascript, anything that can be done in jQuery can also be done in Javascript. Infinite scroll alone is not something I would include jQuery for.

I think the performance impact of jQuery is pretty minor compared to, say, a big PHP framework (I avoid those like the plague), so I wouldn't necessarily say you shouldn't ever use it. Just weigh the advantages and disadvantages with each project.

[csdude55]

I had a nice long reply typed up, but lost it >:-( Now I don't remember what I said!

But one other thing I needed jQuery for was the swipe function on mobile, to open / close mobile navigation and for an image carousel. Do you guys know of a way I could implement that without using jQuery?

I think that I could build my own Infinite Scroll using Ajax fragments, but swipe still eludes me...

Also, Nick, RE Adsense... I had to move over to DFP to make it work with Infinite Scroll, which was a nightmare! I created a thread on it last year, if you're interested:

[webmasterworld.com...]

Sheesh, that was a year ago and I'm STILL not finished! Somebody shoot me, please...

[JAB Creations]

An infinite scroll would be super easy once you've developed enough experience to look at your code as modules.

You'd want a well developed AJAX function that is very dynamic (not difficult) and you'd need to know which scrollbar and it's relative position (easier than making a dynamic AJAX function).

I remember trying in the mid-2000s to figure out how to select a grandparent frame and all I had to do was use

parent.parent

.

Do you have a reasonable recollection of many of the common native JavaScript methods? Are you well aware of the relevant JavaScript events? About 90% of determining how to have a script work starts with determining what, if any, is the appropriate event. Often you'll also discover a much easier way of approaching a problem after dedicating yourself to a more convoluted approach. JavaScript is in short Tetris with logic.

John