4 ms·
Is this a joke? A huge percentage of the web is running with Jquery. Jquery targets a different set of audience - Ones that want to do more stuff with less code
by neya 14y ago
Is this a joke? A huge percentage of the web is running with Jquery. Jquery targets a different set of audience - Ones that want to do more stuff with less code. This type of audience doesn't care about performance (mostly) because it helps them get things done.
Think of it this way - Everyone loves Ruby on Rails. But Rails IS slow. But that doesn't mean I should re-write my code in just plain C, just because it is fast and Rails is no longer needed according to a bunch of bloggers.
I think this argument is not about Jquery and is about frameworks in general.
In my humble opinion, I think [1]
$.ajax({
url: "test.html",
context: document.body
}).done(function() {
$(this).addClass("done");
});
is better than:
function ajaxFunction() {
var ajaxRequest; // The variable that makes Ajax possible!
try {
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e) {
// Internet Explorer Browsers
try {
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function () {
if (ajaxRequest.readyState == 4) {
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
var age = document.getElementById('age').value;
var wpm = document.getElementById('wpm').value;
var sex = document.getElementById('sex').value;
var queryString = "?age=" + age + "&wpm=" + wpm + "&sex=" + sex;
ajaxRequest.open("GET", "ajax-example.php" + queryString, true);
ajaxRequest.send(null);
}
[1]http://www.tizag.com/ajaxTutorial/ajax-javascript.php http://www.tizag.com/ajaxTutorial/ajax-javascript.php
- johnbender 14y agoI agree with your general point about the value of abstractions, but jQuery is rarely the bottleneck where DOM manipulation is concerned. Most of the execution time in browser applications is spent rendering/reflowing content. It's only sane to use the DOM API once you've shown that the jQuery JavaScript execution is a significant portion of total execution time relative to reflows. An interesting side note here is that the Rails analogy remains somewhat apt, in that much of the execution time in web applications is spent in the data store.
- noblethrasher 14y agoI mostly agree with your point that abandoning jQuery is premature but: 1. IE7 and above support the native XMLHttpRequest object; the code example is code is probably much longer than it needs to be (it can be trivially reduced by %50). 2. There is nothing to stop you from creating your own API. I had to do this because jQuery didn't interact well with a custom ASP.NET framework[1] Here is how I do Ajax stuff using a small library that I wrote[2]: var xhr = new $xhr(SOME_URL, function (data) { /* do stuff */ }) xhr.post(document.getElementById('form_id')); [1] http://stackoverflow.com/questions/7810022/ajax-via-jquery-and-asp-net http://stackoverflow.com/questions/7810022/ajax-via-jquery-a... [2] https://gist.github.com/noblethrasher/5383649 https://gist.github.com/noblethrasher/5383649
- Chris_Newton 14y agoIs this a joke? A huge percentage of the web is running with Jquery. I think you’re being too dismissive. It’s a fair question to ask, and the answer is not obvious and probably not the same for everyone on every project. Frameworks like jQuery became popular for good reasons, including easy DOM manipulation, AJAX, and event management, and in particular for offering these tools within a single, widely tested, cross-browser API. However, using native APIs instead is easier than it was a few years ago, unless you really still need to support very old browsers, and we’ve learned to use polyfill/shim strategies to fill in most gaps when we need to. We’ve also learned a lot about how to write better plain JS in that time, for which the folks developing popular JS libraries like jQuery deserve a lot of the credit. In effect, the major reasons for using jQuery have all become less important. Almost no-one really needs to write code like your “bad” example today, and even if they do, it’s the sort of thing you only do once and wrap up in your own library so you can reuse exactly the ideas you need and optimise it using the same tools as any other JS you write. On the other hand, jQuery has a number of potential disadvantages. There are run-time performance questions that can only be answered by profiling, but they are fair to ask. In any case, fetching jQuery means more download bandwidth and more HTTP round-trips, which is definitely a real problem for performance, particularly with mobile networks. The obvious counter is to say everyone should load jQuery from a CDN like Google’s, but now you have a third-party dependency that is a potential risk to reliability, security and privacy, and in any case not all web sites/apps run on the public Internet, so that choice won’t be for everyone. The thing that is increasingly bugging me is the universal dependency problem. Most of the little JS libraries I’ve looked at recently, things that do one simple job well, seem to depend on jQuery even if it offers no real advantage at all. jQuery has become the God Object of client-side JS development, and having one of those is rarely a good sign. So while I certainly wouldn’t go as far as to say that jQuery is no longer useful, I don’t think we should take it for granted that using jQuery should somehow be the default choice.
- Offler 14y agoThere is also the problem of upgrading third party libraries as they may drop APIs or change their behavior leading to so many bugs that you spend more time fixing these issues then if you had written native code in the first place.
- dwyer 14y agourl: "test.html", is clearly not equivalent to var age = document.getElementById('age').value; var wpm = document.getElementById('wpm').value; var sex = document.getElementById('sex').value; var queryString = "?age=" + age + "&wpm=" + wpm + "&sex=" + sex; ajaxRequest.open("GET", "ajax-example.php" + queryString, true); so your example reeks of hyperbole. The first piece of code is GET'ing an arbitrary, presumably static webpage and injecting the word "done" into the body, while the second piece of code appears to be pulling data from a form, sending it to another webpage, and then displaying its response into a specific div. As for the try/catch statements, I think the OP's point is that we don't need to worry about XMLHttpRequest failing anymore. The decision to support IE6 is up to you, but I think most web developers are willing to draw the line these days.
- neya 14y agoYes, your argument is fair, but I just wanted to give you a fair idea of writing code in Jquery vs plain JS. Also, think about cross browser support - Why re-invent the wheel? There will always be some missing features that will not be compatible uniformly across browsers and hence the need for frameworks like Jquery.
- psherman 14y agoAssuming you give your form elements names and the form an ID (unlike in the linked example) its trivial to get the query string using serialize and you don't have to fuss around with string formatting if you modify the form. $.ajax({ url: 'ajax-example.php', data: $('#myForm').serialize(), success: function(data) { $('#ajaxDiv').html(data); } });
- grannyg00se 14y agoYour jQuery: $(document).ready(function() { $.ajax({ url: "test.html", context: document.body }).done(function() { $(this).addClass("done"); }) }); Without jQuery: var oReq = new XMLHttpRequest(); oReq.onreadystatechange = function() {if (this.readyState === 4) { window.document.body.className += " done"; }}; oReq.open("GET", "test.html", true); oReq.send(); Screenshots (blue indicates successful ajax): without jQuery: http://browsershots.org/http://evening-harbor-8654.herokuapp.com/testNoJQuery.html http://browsershots.org/http://evening-harbor-8654.herokuapp... with jQuery: http://browsershots.org/http://evening-harbor-8654.herokuapp.com/testJQuery.html http://browsershots.org/http://evening-harbor-8654.herokuapp...
- neya 14y agoYour code is fine for this use case. But I'd have to bite my nails hoping it would work on browser 'X' for other use cases, which is simply not worth the headache. Cross browser compatibility is a real pain, you know? For me JQuery does it very well. And good luck using your new ajax function :)
- Offler 14y agoDrop support for old IE browsers, why are people still trying to fight to support them. I agree with the blog post, one day people will finally drop support for non-HTML5 browsers (IE8 and below) and they will see how easy it is to write clear, short native code that works fine in all browsers. It will take time though as many people aren't even familiar with the native APIs.
- bjxrn 14y agoYou want to know why people worry about older versions of IE? Because a large enough chunk of their visitors still use those browsers. It's that simple.
- WA 14y ago$.get('test.html', function(r) { window.document.body.className += " done"; }); But: This is not about short code. It's about readability. What's readyState 4? Why "open" a request before sending it?