8 ms·
I believe the point is that many libraries use about 1% of jQuery. That hardly justifies pulling in the entire thing. A personal anecdote: I recently un-jQueri
by __david__ 13y ago
I believe the point is that many libraries use about 1% of jQuery. That hardly justifies pulling in the entire thing.
A personal anecdote: I recently un-jQueried a little piece of code and ended up with only a couple lines of extra code.
Certain parts of jQuery are heavenly and well worth it, but really basic usage doesn't actually save that much. $("#something") instead of document.getElementById("something") is not really buying you much in the way of cross platform-ness or thoroughly debugged code and is hardly reinventing the wheel.
- dudus 13y agodocument.querySelectorAll() uses the same kind of syntax for selectors as jQuery.
- jonknee 13y agoAnd requires IE 9+ which rules it out for a lot of people...
- nelmaven 13y agoActually, no. IE8 supports it. http://caniuse.com/queryselector http://caniuse.com/queryselector
- mattmanser 13y agoIE8 is limited to the old CSS selectors so basically it sucks and doesn't really support it.
- sfeng 13y agoBut so is all of the actual CSS in your app.
- emn13 13y agoIn practice, especially for javascript usage, the old CSS selectors cover all the bases. The new-stuff, while great for styling, isn't all that relevant for scripting. nth-child, say, is often (though not always) simply an indexing operation on the return value of querySelectorAll; and in general you don't even want that since usually you have a specific element in mind and have labelled that element with a class to find it. I don't support IE8 anymore, and use CSS3 liberally in the actual css, yet I can't think of more than a handful of cases I used the selectors from javascript, certainly none of them critical. Do you actually use this?
- camus2 13y agoand support only a limited subset of the selectors jQuery supports.
- latj 13y agoI agree with the overall message- you should be thoughtful with all your dependencies. You should only add complexity when it makes sense. However, the author goes beyond just selector vs. getElementById(). Does the way the author uses XMLHttpRequest work in other browsers the way it works in IE? I honestly dont even remember anymore. How about the code for fade? I never even knew the details of this feature. And I'm not sure I want to.
- Jach 13y agoConsidering XMLHttpRequest is what other browsers used before IE caught up, I assume it does work the way you'd expect across modern browsers. I'd have to check the standard and IE8+'s conformance to the standard to be sure. That's what this post is really about for me, reminding that modern browsers follow a standard that allows for getting rid of most of jQuery. Reading it also made me recall a post from 2005 by PHP's creator: http://rajshekhar.net/blog/archives/85-Rasmus-30-second-AJAX-Tutorial.html http://rajshekhar.net/blog/archives/85-Rasmus-30-second-AJAX... (Note IE uses ActiveXObject.)
- annnnd 13y agoXMLHttpRequest was first introduced in IE5. I think in retrospect MS regrets its introduction, but that is another discussion entirely.
- fish2000 13y agoAs I recall, they specifically implemented it in order to facilitate Outlook’s web interface – their collective regret may be tempered by the satisfaction they got from all those high-margin site license sales to which that feature contributed.
- billmalarky 13y agoI wouldn't mind hearing a snippet of that discussion. Why would MS regret XMLHttpRequest?
- 13y ago
- jonknee 13y ago> I believe the point is that many libraries use about 1% of jQuery. That hardly justifies pulling in the entire thing. Sure, but if you use a few libraries that all use a couple features of jQuery you still only need to load jQuery one time and everything just works. You may not care if it only works on the most modern browsers, but someone who uses your library probably will.
- Kudos 13y agoOr you need jQuery two times because one of the plugins you need is not well maintained and depends on an older version. This actually happens.
- jeena 13y ago> $("#something") instead of document.getElementById("something") or even just document.querySelectorAll("#something")
- davej 13y agoYou lose some browser compatibility with qSA, whereas gEBId works everywhere. You need IE8+ for qSA, and you need to ensure the page isn't in quirks mode. If you're OK with that then you can also do: var $ = document.querySelectorAll. Probably best to do this within a closure so that you're not hijacking any jQuery instances that may be on the page.
- smrtinsert 13y agoFor me jquery is all about events. Making sure I get the event tree bubbling in the correct way across the entire universe of browsers and all its data being normalized is such a time saver. Even their support isn't perfect, but I'm sure its way better than any other event library out there in terms of breadth and depth of testing. The selectors bit is a nice to have, but that is getting easier since its inclusion in dom itself. Since I code mostly in clojurescript in my home hours any functional idioms from jQuery I no longer use. A long time ago jresig joked about making an oo form of jQuery. It's not that funny now, as it might be slightly easier to wrap an object based lib for all the various compile down to js languages (typescript, coffeescript, clojurescript, scalajs, etc)
- mdavidn 13y agoAbout one year ago, I developed a shared widget. Some fraction of my clients refused to load jQuery, as they still preferred older, less popular DOM libraries. Starting with jQuery's battle-tested event handling code, I trimmed features unnecessary for my widget: event.data, IE7 support, consistent focus events. I replaced jQuery's indispensable descendant selector feature, formerly jQuery.delegate, with a simple conditional in my event handlers. (e.g. Walk parentNode references from event.target, looking for a class name.) I was left with about 75 lines of code in my DOM abstraction library. I preserved jQuery's tricks for Microsoft's attachEvent and Safari's text nodes. About 15 lines were dedicated to normalizing attributes. My polyfills for preventDefault and stopPropagation were about 10 lines each. It's amazing how far native DOM has come in recent years.
- craigc 13y agoIf you are looking for a standalone event (delegation) library check out one I wrote http://craig.is/riding/gators http://craig.is/riding/gators. The syntax is very similar to jQuery.
- hacknat 13y agoIt might be the most cached file on the internet. Pulling jQuery is hardly expensive. Especially if you're pulling it from the google cdn.
- justatdotin 13y agocaching won't help for libraries that want to have a particular version of jquery baked in ...
- aj 13y agoCaching or CDN does not help in squeezing out JS performance (actual JS execution and not n/w performance)
- hacknat 13y agoYou think that a page that loads jQuery but doesn't use most of it incurs a performance penalty? I'll grant there are a few initializations and dom checks that jQuery does, but it probably blocks for all of 20ms.
- julien_c 13y ago...which is significant.
- talmand 13y ago20ms is significant?
- Dylan16807 13y agoThink of it as a fifth of your time budget spent doing nothing.
- hacknat 13y agoMost modern browsers are able to paint while loading script files, especially if you put your script files at the bottom of the page, where they belong. So, no, 20ms of parsing, compiling, and a small amount of execution is not a lot of time. Period.
- shurcooL 13y agoSo why not break up a large library into smaller useful pieces. Why can't we import only what we need.
- adrianmoses 13y agoYou can create a custom build of jQuery and exclude specific modules: https://github.com/jquery/jquery#modules https://github.com/jquery/jquery#modules.
- MagicWishMonkey 13y agoTwo things: 1) The minified jquery script is ~100kb, for a script that is loaded once per website that's pretty tiny. Especially when you consider the fact that the latency involved with opening the network connection to fetch the file will likely exceed the time required to pull the file down. Once you've initiated the download the difference between pulling down 20kb and 100kb isn't all that much. 2) You can use the google jquery file reference. That means a big % of your site visitors will already have the cached script in memory, and for those that don't the download will be pretty speedy given that it can be fetched from the google domain in the background (while the rest of your site assets are being fetched by the browser).
- talmand 13y ago$('#something') and document.getElementById('something') are not quite the same thing because of what you'll do after you create that reference.
- thebuccaneer 13y agoWould just like to point out that, if you are using a commonly used CDN, jQuery/Zepto will most likely be cached already in the browser.