can I overuse Jquery?

[AdrianH]

Hi. First off, new to facepunch, was looking for a new programming community and was recommended to try this one out. Hello World!

Anyway my question is: I heard that Jquery should only be used if needed as it slows things down. However if I am already linking the Jquery library because I need it to do some animations, does that mean I am free to use Jquery as much as I wan't on other parts of the script were I could have just written plain Javascript?

I just find Jquery makes my code so much neater, and I don't have to worry about different browsers handling my JavaScript differntly. Also I use google libraries, so hopefully the client as already downloaded everything any ways. While on the subject, do you know if most smart phones download google libraries by default?

Thanks for any answers. :)

[Coment]

Well, yeah, if it's already downloaded you might as well make full use of it.

By the way, I don't know if the jQuery you're including is in one of those libraries, so I'll just go anyway and remind you to use a global version, like
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Also, any smartphone that has javascript enabled should be able to download those libraries without any problem...

[AdrianH]

Thanks for the reply. For some reason I thought calling the individual functions might add more bulk, but now that I think about it more, i guess not.

And yeah that is the library I'm using.

[DrTaxi]

The additional functions are all loaded when you load jQuery, using them won't use any additional resources beyond the ones required for actually executing those functions.

Anyway, while I too believe it's bad that jQuery and other JS frameworks are being used far too much these days, it's kind of a lost cause. If you use a lot of modern websites, chances are you'll have some two-digit figure of jQuery instances loaded in memory at all times.

[Shadow801]

Unfortunately JavaScript is used far too often these days

[KmartSqrl]

[QUOTE=AdrianH;44481326]Thanks for the reply. For some reason I thought calling the individual functions might add more bulk, but now that I think about it more, i guess not.

And yeah that is the library I'm using.[/QUOTE]

The thing you need to watch out for is calling $('.selector') repeatedly. Always try to save $('.selector') to a variable and then use that so that the DOM lookup doesn't have to happen every time. For example:

$selector = $('.selector');

$selector.show();
$selector.children.hide();

[AdrianH]

[QUOTE=KmartSqrl;44481627]The thing you need to watch out for is calling $('.selector') repeatedly. Always try to save $('.selector') to a variable and then use that so that the DOM lookup doesn't have to happen every time. For example:

$selector = $('.selector');


$selector.show();
$selector.children.hide();

[/QUOTE]

Thanks, this is exactly the kind of habits that are hard to discover when self learning. This would only be for collecting static variables correct? Like if I wanted to collect the screen size and then use that to check a bunch of logic, I would:

$windowWidth = window.innerWidth;

Now I am free to reference that. (*edit this logic statement is always true but please ignore that)

if ((windowWidth <= firstCollapseThreshold) || (windowWidth >= thirdCollapseThreshold)){
		return 1;	
	}
	else {
		return 0;
	}
}

But if I wanted to get the state of a check box, and only refer to it once to execute a command, and next time I will want to check again to make sure it has not changed, then I would just go ahead and call a selector. Correct?

[editline]7th April 2014[/editline]

And thanks to the other replies. I am using Jquery for the animate feature. And obviously none of the stuff I am doing could be done with PHP so not sure why the so serious on that.

[CBastard]

[QUOTE=AdrianH;44481794]

$windowWidth = window.innerWidth;

[/QUOTE]

For something like this there isn't much point not directly using window.innerWidth.

Also prefixing a dollar symbol is generally reserved to indicate that a variable is a jQuery element.

var $selector = $('.selector');

as opposed to

var something = 65;

Also if you are returning 1 or 0 you should probably be returning true or false.

[AdrianH]

Thanks. I just debuged that. PHP variables start with $ and I am getting my syntaxes all mixed up. (too many godam programming languages in my head!)

[CBastard]

[QUOTE=AdrianH;44481943]Thanks. I just debuged that. PHP variables start with $ and I am getting my syntaxes all mixed up. (too many godam programming languages in my head!)[/QUOTE]

You get used to it. Also ideally all your HTML, CSS, PHP and JavaScript will be in separate files which also helps.

[AdrianH]

[QUOTE=CBastard;44481994]You get used to it. Also ideally all your HTML, CSS, PHP and JavaScript will be in separate files which also helps.[/QUOTE]

It is. :smile:

[Pugsworth]

If you use jquery so much that you forget how to do everything in normal javascript, that's when it can become a problem.

[lkymky]

[QUOTE=vexx21322;44482459]If you use jquery so much that you forget how to do everything in normal javascript, that's when it can become a problem.[/QUOTE]

What if you only know jQuery and don't know javascript?

I'm also amazed browsers don't natively have jQuery in them

[KmartSqrl]

[QUOTE=lkymky;44487477]What if you only know jQuery and don't know javascript?

I'm also amazed browsers don't natively have jQuery in them[/QUOTE]

It's a [B]very[/B] good thing that browsers don't have native versions of jQuery. If they did, we would run into the same kinds of compatibility issues that everything else that is browser native already has. I don't want to have to worry about which version of jQuery my user's browsers come with. I want to know that the version of jQuery I want to use is the one that is going to be used.

Not to mention, what happens when non-backwards-compatible changes are made to jQuery? Oops your site broke for half of your users, but if you update it'll break for the other half that don't have the new version in their browser yet.

No thanks!

[lkymky]

[QUOTE=KmartSqrl;44489480]It's a [B]very[/B] good thing that browsers don't have native versions of jQuery. If they did, we would run into the same kinds of compatibility issues that everything else that is browser native already has. I don't want to have to worry about which version of jQuery my user's browsers come with. I want to know that the version of jQuery I want to use is the one that is going to be used.

Not to mention, what happens when non-backwards-compatible changes are made to jQuery? Oops your site broke for half of your users, but if you update it'll break for the other half that don't have the new version in their browser yet.

No thanks![/QUOTE]

Write less, fuck up more... :v:

However I do see your point, I forget that we have this ongoing problem with having to hack our way into compatibility regardless of what language we write in.
I'm the kind of person who asks questions like "Why is HTML the only language to render a site" etc

I just wish jQuery was [B]more[/B] prevalent to the point of it being standardized so actual javascript is completely optional

Its an extremely accessible language for people learning about webdev, however because of that it has prevented me from properly learning javascript.

[KmartSqrl]

[QUOTE=lkymky;44492194]Write less, fuck up more... :v:

However I do see your point, I forget that we have this ongoing problem with having to hack our way into compatibility regardless of what language we write in.
I'm the kind of person who asks questions like "Why is HTML the only language to render a site" etc

I just wish jQuery was [B]more[/B] prevalent to the point of it being standardized so actual javascript is completely optional

Its an extremely accessible language for people learning about webdev, however because of that it has prevented me from properly learning javascript.[/QUOTE]

I think your dissonance with how this works is that you're viewing jquery as a language, which it absolutely is not. It's just a framework. It DOES provide some really handy stuff, but it's not even remotely close to being a full language like JS (which makes sense seeing as it's build on JS).

The only thing preventing you from "properly" learning javascript is yourself. jQuery isn't stopping you, you're just choosing to use it haha.

[editline]8th April 2014[/editline]

I really disagree with wanting jQuery to be standardized though. Look how long it takes for new features to arrive in native browser JS or in CSS. jQuery is an abstraction above native browser implementations and that is a good thing. It takes consistency of behavior OUT of the hands of browser vendors and gives devs control over it, which is awesome.

[graymic]

[QUOTE=Shadow801;44481539]Unfortunately JavaScript is used far too often these days[/QUOTE]

What the hell are you talking about?

[Shadow801]

[QUOTE=graymic;44496204]What the hell are you talking about?[/QUOTE]

It's used for things it shouldn't be. when half a site's functionality relies entirely on JavaScript (not including JS based web applications) you're doing something wrong.

[graymic]

[QUOTE=Shadow801;44505817]It's used for things it shouldn't be. when half a site's functionality relies entirely on JavaScript (not including JS based web applications) you're doing something wrong.[/QUOTE]

Please care to explain, Not including JS based web applications? So what constitutes a right way or wrong way in your books?

[Alternative Acc]

[QUOTE=Shadow801;44505817]It's used for things it shouldn't be. when half a site's functionality relies entirely on JavaScript (not including JS based web applications) you're doing something wrong.[/QUOTE]

The boundary between single-page applications and strongly JavaScript based web services can be pretty fluid, though. Besides: A lot of big web applications [i]do[/i] rely so heavily on JavaScript nowadays that disabling JavaScript makes them nearly or entirely unusable. Try using Twitter with NoScript blocking all scripts, and you'll find yourself hitting a brick wall on anything but Twitter profiles. Facebook essentially becomes useless as you can't read posts on your timeline; it wants you to use a mobile version made for really old phones instead. And last but not least, some websites become hard to navigate because their navbars require JavaScript (especially if the sites use Bootstrap's or Foundation's navbar). All of these cases could be considered "JS based web applications" because without JS, they break or force you to use a cut down version.

Contrary to your opinion, there are a lot of benefits to relying on JavaScript to implement half of a web site's functionality. AJAX is a huge one. By design, traditional web applications need to send you to another page when you submit a form. AJAX allows this submission to be done without leaving the page. This alone allows interactions that are difficult or impossible to pull off with pure HTML and CSS, like inline replying to posts, rating content without reloading or leaving the page, dropdown menus, and a lot of other stuff. You can't do any of that without JS.

[KmartSqrl]

[QUOTE=Shadow801;44505817]It's used for things it shouldn't be. when half a site's functionality relies entirely on JavaScript (not including JS based web applications) you're doing something wrong.[/QUOTE]

You seem to be completely blind to the fact that you can do things with JS that you could [B][I]never[/I][/B] do with pure HTML/CSS.

There is nothing wrong with a website being completely reliant on javascript. Every notable web browser supports it. If you turn it off and break websites, that's your issue. I'm not going to cripple my UX or write twice as much code just to support the minuscule percentage of people who have JS turned off.

[inaba]

[QUOTE=Shadow801;44505817]It's used for things it shouldn't be. when half a site's functionality relies entirely on JavaScript (not including JS based web applications) you're doing something wrong.[/QUOTE]

That doesn't really explain anything though.

[AdrianH]

[QUOTE=KmartSqrl;44508540]You seem to be completely blind to the fact that you can do things with JS that you could [B][I]never[/I][/B] do with pure HTML/CSS.

There is nothing wrong with a website being completely reliant on javascript. Every notable web browser supports it. If you turn it off and break websites, that's your issue. I'm not going to cripple my UX or write twice as much code just to support the minuscule percentage of people who have JS turned off.[/QUOTE]

Unfortunately if you are making a website professionally (like for someone's business), you have to make it still usable with JavaScript turned off. JavaScript will just make the user experience better. I think your even supposed to make it so that it will function without CSS, but I don't honestly bother with that.

Essentially you have to assume that there are millionaire investors out there who are running ancient version of IE with their javascript turned off. FML right?

[djjkxbox360]

[QUOTE=gokiyono;44509240]That doesn't really explain anything though.[/QUOTE]

Who knows, maybe he's talking about changing pages using javascript and stuff like that where it can break back button functionality

[editline]10th April 2014[/editline]

[QUOTE=AdrianH;44509554]Essentially you have to assume that there are millionaire investors out there who are running ancient version of IE with their javascript turned off. FML right?[/QUOTE]

Eh what? You shouldn't support anything unsupported/deprecated, if they're running unsupported operating systems/browsers then they know they're going to run into issues. Every modern browser (even old ones) has javascript on by default, and I don't know anyone who turns it off.

[KmartSqrl]

[QUOTE=AdrianH;44509554]Unfortunately if you are making a website professionally (like for someone's business), you have to make it still usable with JavaScript turned off. JavaScript will just make the user experience better. I think your even supposed to make it so that it will function without CSS, but I don't honestly bother with that.

Essentially you have to assume that there are millionaire investors out there who are running ancient version of IE with their javascript turned off. FML right?[/QUOTE]

No you don't. Most businesses aren't going to want you to do 2x the work (and therefore, cost them 2x the money) to service 1% of their customer base. I've been doing web development for a living for 7 years now and I have yet to have any real pushback from any clients when I say "this will require javascript".

[inaba]

[QUOTE=AdrianH;44509554]Essentially you have to assume that there are millionaire investors out there who are running ancient version of IE with their javascript turned off. FML right?[/QUOTE]

It's kinda hard for me to imagine this statement to actually be true.

[graymic]

[QUOTE=AdrianH;44509554]Unfortunately if you are making a website professionally (like for someone's business), you have to make it still usable with JavaScript turned off. JavaScript will just make the user experience better. I think your even supposed to make it so that it will function without CSS, but I don't honestly bother with that.

Essentially you have to assume that there are millionaire investors out there who are running ancient version of IE with their javascript turned off. FML right?[/QUOTE]

And no one is going to adhere to that, because that's retarded. The 1% or so who don't use JS can just deal with it. It's a waste of development time and resources thus a waste of money to even bother to cater to that...To put it bluntly.

[CBastard]

Generally it's a good idea to have content available without JavaScript for the sake of search engine bots and people who have it off for accessibility reasons.

For AJAX loading of pages for example I do this by having menu items that link to the target page itself but then use JavaScript to capture the click event, prevent the default action and instead load the content into the content area using an AJAX request using the clicked on element's href attribute followed by pushing to the history object etc. Without JavaScript the link still works and it will take the user/bot to the correct page, with it the user gets the enhanced functionality. This is essentially just progressive enhancement and it doesn't take much longer to implement in such a way that it degrades gracefully.

[AdrianH]

[QUOTE=KmartSqrl;44511504]No you don't. Most businesses aren't going to want you to do 2x the work (and therefore, cost them 2x the money) to service 1% of their customer base. I've been doing web development for a living for 7 years now and I have yet to have any real pushback from any clients when I say "this will require javascript".[/QUOTE]

Really? That's good news. Sorry for the un-factual statement, it's just the way I understood what I was being told as I have been learning things. I should really word any statements I make to be less sure to reflect my lack of experience.

Back on topic though, I am kind of addicted to Jquery now. Is it really that bad performance wise to have it on basic websites? Just things like being able to throw in drop down menus and the speed of development. Could there not be an argument for the time saved, thus money saved? Or would a more proficient Javascripter be able to do things almost as quickly?

[supersnail11]

[QUOTE=AdrianH;44531046]Really? That's good news. Sorry for the un-factual statement, it's just the way I understood what I was being told as I have been learning things. I should really word any statements I make to be less sure to reflect my lack of experience.

Back on topic though, I am kind of addicted to Jquery now. Is it really that bad performance wise to have it on basic websites? Just things like being able to throw in drop down menus and the speed of development. Could there not be an argument for the time saved, thus money saved? Or would a more proficient Javascripter be able to do things almost as quickly?[/QUOTE]

There is no good performance-related reason to not use jQuery, [i]especially[/i] on a basic site.