Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

I just asked this question at SO about some bugginess I am experiencing with jQuery and IE8, and someone commented that he was appalled that I would mix JavaScript with jQuery (he has since deleted his comment for some reason).

This person had a high reputation, relative to mine (3000+), so I don't want to ignore his criticism. I'm still relatively new to web development, and I mostly work alone, so I wasn't aware that this could be a problem. Why should mixing the two be avoided?

share|improve this question
    
<offhand comment> Yes it is appaling you would mix JavaScript with jQuery. avoid it. </off hand comment>. Seriously though the only thing strange is lack of consitency either use mostly jQuery or mostly javascript. Don't go for a 50/50 mix. –  Raynos Nov 8 '11 at 16:06
6  
I'm sure the reason that he deleted his comment is that he realized that he sounded foolish. –  Adam Crossland Nov 8 '11 at 16:07
1  
Did that user have a lot of rep from the JavaScript or jQuery tags? A C# ninja would have a high rep, but not know how to answer a question on e.g. Fortran and might hold a number of ill-conceived opinions about it. –  StuperUser Nov 8 '11 at 16:08
1  
@Chad javascript sexually transmitted disease? –  Raynos Nov 8 '11 at 16:17
3  
Like jAIDS or jCLAP, nothing to trifle with. The only safe library is abstinence! –  Chris Nov 8 '11 at 16:19

5 Answers 5

up vote 2 down vote accepted

The issue, and likely, the reason for the comment, seems to be the lines with document.getElementById('firstName');. jQuery can do the exact same thing, and it's generally "safer", since it handles differences between browsers nicely.

The best rule of thumb to follow is use jQuery a DOM manipulation library of your choice (for many people, this is jQuery) to manipulate the DOM, and javascript for everything else you need to do.

share|improve this answer
    
Not that what you're saying is wrong, but the reason I selected those items that way was because later I wanted to do quick string manipulation that I thought would be easier and faster with basic js –  user25791 Nov 8 '11 at 16:10
2  
The best rule of thumb is to use <cross browser manipulation of choice>. And I can defiantly say jQuery is not that one for me, however on the grand scheme of things, it's not that bad –  Raynos Nov 8 '11 at 16:10
1  
@tjb1982: that sort of micro-optimization rarely pays. It almost never pays in user interface development, because users are really slow and the number of objects on the screen is small. –  kevin cline Nov 8 '11 at 20:21

First of all, it's not jQuery vs. JavaScript. It's jQuery vs the DOM API as-is which is crufty and ugly and kind of obtuse but traditionally most-importantly, unevenly supported in a big way in Microsoft browsers before IE9. But it's all JavaScript. If you're thinking about it any other way you need to lift open the hood and learn what JQ's internals are actually doing.

And no I honestly don't see what the problem with using both is. If you're mucking with the DOM you should know the DOM. One of the things I like about jQuery is that it gets the hell out of my way. Why should I fire a method to get a property I know is available in all browsers when I can just reference it via [0].someProperty instead for instance? Using both shouldn't make it harder for another UI dev to tweak your stuff if jQuery is in the mix because it's never going to have a problem with you doing that. At any time you can wrap any dom collection or object in a $ produced object wrapper by just tossing it in as an argument of the $ function and you're back in jQuery-land so it's not like you've made your code harder for somebody else to modify because that person was less comfortable with the native API.

But they should be able to read plain vanilla DOM API stuff if it's their business to tweak things at that level, regardless of their comfort-level using it. That's just the threshold of technical literacy for a proper entry-level UI-dev as far as I'm concerned. Generally speaking, of course, it can make code more legible to be consistent in the things that you do, but when you feel there's a sensible reason to go one way or the other, there's no reason not to. The key to making that decision is to know a lot about both.

In the scenario where somebody is really freaked out when they see a mix of things happening both the JQ way and the DOM API way, that's often a server-side dev not wanting to wade through stuff they don't really understand in order to re-use your code when you get smacked by the prodigal programmer-murdering bus. In that scenario, they shouldn't even be looking at this stuff in order to understand how to re-use your code for implementation on other pages or to set some alternate behavior. They should be looking at generic JavaScript objects, methods, and factories that expose a consistent/easily-documented API of your own for doing things like sticking a bunch of UI widgets of a given type on a page or setting all the combo boxes in a table to stop doing the auto-filtering thing when you type. All the DOM stuff should be buried and hidden from people who don't need to know it.

And that shouldn't be hard for you to do if ultimately it's all just JavaScript to you.

share|improve this answer

People like being black and white.

If you're going to use a cross browser normalization tool then use it. Don't use it to normalize some things but not others.

Example

var a = $("#foo");
var b = document.getElementById("bar");

Those two should not be mixed. Either you use jQuery for edge case bugs you might care about or you use the DOM for speed, but not both.

And yes personally I would also say:

WTF, write your code more coherently, why are you mixing DOM calls with jQuery calls.

As a side-note, you can assume that when he says "javascript and jQuery" he means "calls to the DOM API directly in javascript and calls to the DOM API through the jQuery abstraction layer". Any other comment would be misinformation / trolls.

share|improve this answer
3  
+1 great clarification, though explaining that you should avoid mixed dom and jquery calls is much more effective than the attack WTF. –  Chad Nov 8 '11 at 16:24
    
@Chad an off hand WTF without explanation is silly. However for some people (me included) it's all too easy to mock people for using bad practices when they simply don't know better. It's quite easy to assume people know better then they do. –  Raynos Nov 8 '11 at 16:27
    
The code in the original SO question would not get past my code review, that's for sure. Don't mix jQuery selectors with getElementById. –  Carson63000 Nov 9 '11 at 3:06
    
@Carson63000 agreed. Always use getElementById –  Raynos Nov 9 '11 at 3:43
    
@Raynos: use whatever you like but make it consistent. :-) –  Carson63000 Nov 9 '11 at 4:52

Some programmers tends to think in terms of what a tutorial or some programmer guru states.

Most probably, it would be easier to have the same framework used in your application to make the code easier to read and to understand.

But most of the times, frameworks have limitations or bugs so you can never apply what the tutorial or some programmer guru states.

I guess the most important is to satisfy the customer and to ship a bug free application

share|improve this answer

Not sure where such criticism would come from, seeing as jQuery is javascript.

The comment seems to have been deleted, so it is difficult to say exactly what the criticism was about. Could be more about your usage of jQuery or javascript.

share|improve this answer
    
The comment read: My god... why do you mix jquery and js?? –  user25791 Nov 8 '11 at 16:05
1  
Silly comment, which is probably why it isn't there anymore. –  Oded Nov 8 '11 at 16:06

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.