What Are Some Empirical Technical Reasons Not to Use Jquery

What are some empirical technical reasons not to use jQuery?

Update 2015:

In this answer from 2011 I'm talking about libraries like jQuery, YUI
or Prototype. Today in 2015 that reasoning is still applicable to
frameworks like Angular, React or Ember. In those 4 years the
technology progressed tremendously and even though I see considerably
less prejudice against React or Angular than I saw against jQuery or
YUI, the same kind of thinking - though to a lesser extent - is still present
today.

Update 2016:

I highly recommend an article published few days ago:

• Why jQuery? by Michael S. Mikowski, author of the Single Page Web Applications book

That article is basically a very detailed answer to this very
question. Had it been available when I was writing the answer below - I would have definitely quoted it.

Original answer:

I'll answer about jQuery but those are the same arguments that I've heard against using YUI, Prototype, Dojo, Ext and few others. Main arguments that I've heard:

1. file size, which in fact is 84.6 KB in case of jQuery 3.2.1 - probably smaller than the logo on an average website and can be served from Google's CDN which is likely to be already in the cache of most of your visitors. As using jQuery always means smaller file size of your own JavaScript files, it can actually mean smaller download, even if not already in the browser cache.

2. speed - writing pure JavaScript may be faster, but writing portable JavaScript seems to be impossible for most of the people. A website that is faster but doesn't work on every popular browser is useless in the real world. Besides jQuery uses some pretty heavy optimizations to actually be pretty damn fast and keeps getting even faster with every release, so it's actually not so easy to write faster code by hand for anything other than trivial examples.(*)

3. "intellectual property" - a company is scared using someone else's code - while in fact jQuery is open source and free software that is used everywhere from your grandma's blog to Amazon, from Twitter to Bank of America, from Google to Microsoft - if they can use it then any company can use it.

4. I can't remember hearing any other argument being used seriously.

(*) Here's a trivial example: getElementById('someid') vs. jQuery('#someid')

Is using getElementById faster? Yes. And of course everyone always checks the parentNode to catch when Blackberry 4.6 returns nodes that are no longer in the document, right? jQuery does. And everyone handles the case where IE and Opera return items by name instead of ID, right? jQuery does. If you don't do it then your code is not portable and you introduce subtle bugs that can be very difficult to find. And getElementById is the most trivial example that one could possibly find - don't even get me started on events and AJAX and the DOM...

Update:

There is actually a fourth result of asking why someone doesn't want to use jQuery. I forgot to put it on this list because it is not really an answer but rather the lack of any answer. The comment I got yesterday reminded me about it. This is hardly a "technical reason" to be added to the list but may be interesting nonetheless and may actually be the most common reaction.

What I personally suspect to be the main underlying reason to all of those reactions, though, is what I believe to be the biggest obstacle to progress in computer science: "I don't want to use it because I never did, therefore it must not be that important."

It was once the reaction to optimizing assemblers, compilers, structured programming, higher level languages, garbage collection, object oriented programming, closures or pretty much everything that we now take for granted — and today it's AJAX libraries. Maybe some day no one will remember that we once used to manually interact with the raw DOM API on the application level like now no one remembers that we once used to write programs using raw, unadorned, inscrutable hexadecimal numbers.

Is it possible to use jQuery to manipulate XUL elements?

XUL and HTML actually deal with opacity the exact same way, and it is jQuery that incorrectly detects what the browser can do. jQuery thinks it's in a different browser when it's living inside XUL, and so opacity effects are handled differently - by jQuery. Since it IS in Firefox, and it should deal with opacity normally, you can override this like so:

jQuery.support.opacity = true

Do this right after jQuery is loaded.

There is probably a whole category of similar fixes that can be post-applied to jQuery to make it behave better, but I haven't looked in to it.

How to limit jquery selectable to 1 tr and pass selected items to another page

Here's the solution I came up with. As I say in OP it may not be the prettiest way to do this but it works. Posting it so it may help someone else.

$(document).ready(function() {
    $('#reservation-sheet').selectable({
     filter: 'tr, td', //lets filter to tr and td
     selecting: function(event, ui) {
      var selectingItems = $('.ui-selecting', this);
      var startingRow = selectingItems.first().prop('id'); //starting row id
      var splitCell = selectingItems.last().prop('id').split('-'); //since we have the row id in the cell id, we can use that to find changes
      if(splitCell[0] != startingRow) {
       selectingItems.not(':first').removeClass('ui-selecting'); //remove extra row to keep it at 1
      }
     },
     stop: function(event, ui) {
      var selectedItems = $('.ui-selected', this);
      var startTime = selectedItems[Object.keys(selectedItems)[1]];
      var startTime2 = startTime['id']; //get our starting cell
      var endTime = selectedItems.last().prop('id'); //get our last cell
      console.log('send to php: startingTime: '+ startTime2 +' endingTime: '+ endTime);
      //$.post('contact.php', {sTime: startingTime, eTime: endTime}, function(data, status) {
       //pop-up window to get name, email and phone number
       //then submit everything
      //});
     }
    });
   });

Performance overhead of javascript libraries

This is a good question! Next to the download time of the library itself, most of the frameworks are not doing very much, which means they do not delay page showing up or something.

JQuery's $.css method, which makes it easy to style elements can be become a performance bottleneck if you need to trigger this very often and operating directly on the style object is much faster.

I my opinion is better to do more with plain javascript, the more you have to gain high performance. For normal stuff like ajax requests, menu-fading and so on the performance of all the frameworks I have ever used is enough, and coding itself speeds up in turn.

Javascript 2 functions for onClick

You are not sending the value to the tracker, try this:

<input class="ScoreButton" onclick="doStuff(this.form);" type="button" value="Get score" />

Edit:

function getScore(form) {  
 score = 0;  
  var currElt;  
  var currSelection;  

  for (i=0; i<numQues; i++) {  
    currElt = i*numChoi;  
    for (j=0; j<numChoi; j++) {  
      currSelection = form.elements[currElt + j];  
      if (currSelection.checked && currSelection.value == answers[i]) {  
          score++;  
          break;  
      }  
    }  
  }

  return score;  
}

function doStuff(form){
   //calculate score
   score = getScore(form);

   //replace value
   form.score.value = score + "/" + numQues;  

   //correct answers
   var correctAnswers = "";  
   for (i=1; i<=numQues; i++) {  
     correctAnswers += i + ". " + answers[i-1] + "\r\n";  
   }  
   form.solutions.value = correctAnswers;  

   //send data to track
   pageTracker._trackEvent('Quiz', 'Petcare quiz', url, score);
}

Edit: I've refactored a little bit your code. Maybe this way works or can find where is the error.

Open a file using javascript

No, there is no way for JS to load content Asynchronously with out using, to a degree, AJAX. After all, loading Asynchronously is more or less the entire point of AJAX.

Personally, I would say you should just accept using JQuery, whilst it is not the perfect solution to all life's problems, it certainly does the job when it comes to AJAX requests like this.

EDIT

Though, that said, you may be simply wishing to simulate the use clicking a link... but that is a different question entirely.

how to add element as last child of article element

Pure Javascript

You can use a pure javascript solution like below. This code:

1. Gets the <article> by using document.getElementById()
2. Uses .appendChild() to add the newly created element to the end of the last child (which is the end of the article).

var article = document.getElementById("article");var element = document.createElement("h1");var text = document.createTextNode("Test");element.appendChild(text);
article.appendChild(element);

#article {  background-color: red;}

<article id="article">  <div>    <p></p>  </div>
  <div>    <p></p>  </div>  <div>    <p></p>  </div>  <div>    <p></p>  </div>  <div>    <p></p>  </div>  <div>    <p></p>  </div>  <img/>  <p> i want to add element after this</p>

</article>

---

Related Topics