We Keep Coding

What are the advantages of jQuery over writing JavaScript myself? [duplicate]

This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
When should I use a javascript framework library?
All,
I'm fairly new to web app development.
Recently, I've built a few HTML5 apps specifically targeted at iPads and iPhones.
I've noticed that very few people seem to use straight JavaScript - virtually everyone uses jQuery (Prototype, YUI, Mootools, etc. seems somewhat less popular).
If I'm starting out - SHOULD I use jQuery? Or, would I be better off writing my own JavaScript?
In general - I prefer using as much of "my own" code as possible. I'm uncomfortable using a framework if I can avoid it - I feel like it prevents me from understanding what's going on "underneath the hood."
(Sure - even if I'm using straight JavaScript - there are many levels "underneath the hood" (e.g., browser's JavaScript enging, the OS, kernel, etc.), that I don't understand, but the lower the level I do understand, the better.)
The only concrete advantage I can think of for not using jQuery... loading the ENTIRE jQuery framework, when I only need a handful of it's functions - seems unnecessary and wasteful.
So - in general - would I be better off creating my own, highly-tailored, application-specific JavaScript for each project?
Or - should I bite the bullet, get over my reluctance to use someone else's code, and use jQuery? Are there advantages to it besides just not having to create my own versions of functions that have already been written by someone else?
E.g., are it's functions somehow optimized or more efficient than what I could produce on my own?
[UPDATE]
One of the common themes in the answers so far... jQuery eliminates the need to worry about browser differences. Good point.
By in my case, I'm writing apps specifically for the iPhone, iPad, and Android. As far as I know - the browsers are pretty consistent. The vagaries and idiosyncrasies of IE6, 7, and 8 really don't seem to apply. Is that true? If so, does it eliminate a major reason for using jQuery?
Another key issue... jQuery is so popular, that there's a good chance that it's already in the user's cache, thus eliminating the need to load it. True... but is that the only performance hit? In other words... does the existence of the hundreds of functions that are part of jQuery impact the performance of my page? (I don't know how JavaScript engines work, so I have no idea if this is the case...).
Many thanks in advance for your advice and guidance.

I do understand you. I had the same thoughts for quite a while. However, in this particular instance it has a good reason why so many people are using a framework (jQuery as the most popular nowadays). The reason is, not to care about browser-differences + a nice toolkit of methods and functions.
But the first thing (browser differences) is by far more important. If you're going to write everything on your own, you just have to care about SO SO many things for all those browsers and versions out there, it's just disgusting. So some smart clever people came up with the idea, why not creating a library which abstracts all those differences and we can use the same set of methods on almost any browser platform. Boohja, that is how a Javascript library is born.
Another point you mentiond: loading the ENTIRE jQuery framework (...)
Well, as you also correctly mentioned, jQuery is so popular it's so likely that an user already has a jQuery-version cached in his browser. So it's always a good idea to first try to load a library like jQuery from a common CDN like Google. The chances that the browser don't even need to download it are pretty good.
Now I'm not gonna argue about the code quality and stuff like that. But jQuery is a pretty solid lib. It offers a very nice browser abstraction along with a convinient syntax (jAndys opinion). But there are lots of other very nice librarys out there. In general I would always recommend to use one, especially for large scaled web applications.
At some point, you'll start anyway to write your own methods to abstract browser differences and behaviors on your own, because it is just annoying to write so much more code every time. Therefore no need to invent the wheel here (only for learning purposes probably).

This is more a question of philosophy than anything else. jQuery is highly optimized for performance, lightweight and there's a lot of things that are just tedious to do by hand every time. If you have a project, that only needs 4-5 functions, there's probably no need to use a library.
But if there's an application that uses class/id/attribute selectors, animations, listens to events, etc., then you should "bite the bullet".
There's no reason not to go with both approaches imo, just choose according to the project.

My opinion is that if you think that you can bend javascript to your will and not need a framework, then go for it.

I'd go for jQuery if I were you, simply because of the cross-browser quirks JavaScript has. jQuery handles this for you.
E.g., are it's functions somehow optimized or more efficient than what
I could produce on my own?
Probably, although there might be a few exceptions.

JavaScript (web browsers) should be standardized, but they not (yet). jQuery do that!

You might be interested in list of tiny JS frameworks, if you think jQuery is too large.

Yes, jQuery hides a lot from you. Yes, a page with jQuery will be slower than an optimized page without jQuery. But computers are so powerful these days that, unless you are using jQuery in a very inefficient way in huge applications, nobody will notice.
About the download issue: it is only 31KiB. Even with GPRS this will only take a couple of seconds to load.
My advice: learn jQuery, and then use it when appropriate.

If you're already using a framework, should you never write "plain vanilla" js?

This is more of a question of style and preference than anything, though it's possible that there might be performance considerations as well.
If you're using a framework (say jQuery for the sake of argument, though it could be any framework) and you need to write a new function. It's a simple function, and you could easily accomplish it without using the framework.
Is there an advantage to using the framework anyway, because it's already loaded in the browser's memory, has a readily-accessible map of the DOM, etc.? Or will plain-vanilla js always parse faster because it's "raw" and doesn't depend on the framework?
Or is it simply a matter of taste?

The answer is going to depend greatly on what you're working to accomplish. In general, you're guaranteed at least a minor performance penalty for function overhead if you use a framework to achieve something that can be accomplished using "vanilla" JavaScript. This performance penalty is typically nominal and can be disregarded when taking other advantages of your framework into mind (speed of development, cleaner code, ease of maintenance, reusable code, etc).
If you absolutely have to have the most efficient code possible then you should try to write pure JavaScript that's highly optimized. If, like in most real world scenarios, you're not concerned about a handful of milliseconds in performance difference, stick with your Framework to maintain consistency.

There's always something to learn when you're solving problems with pure JS as opposed to having external code do it for you. In the long run, it's more maintainable because it's your code. It's not going to change. You know what it does. That's where the value of solving your own problems really comes into play. If you do your research on MDC, MSDN, and the ECMAScript spec, cross-browser scripting becomes a lot easier to process. Sure, Microsoft has their own ideas and their own DOM, but that's where the fun (read: challenge) is.
Cross-browser scripting in pure JS really heightens your problem-solving ability along with your understanding of the language. If there still are things that confound you, then jQuery can come into the mix and bridge the mental gap, so to speak. It's great to drive around in a luxury vehicle, but what use is it if you don't know how to change a tire when it goes flat? The best jQuery devs are the ones that know JavaScript well and know when to use jQuery, and when to use plain JS.
Sometimes, you just have to roll up your sleeves and do some hard work. There isn't a jQuery plugin for everything, and jQuery can't hide you from all the quirks that various browsers have to offer. Getting the job done with your own code is very rewarding, even if you had to sweat it out to make it work.
It's perfectly acceptable to use many different tools to complete a singular task. You just need to know when and where to use them.

From my understanding of jQuery it doesn't actually maintain a map of the dom in Memory and just has cross browser methods for walking the dom. Somethings will natually be faster in some browsers over others (such as a class based selector in Firefox will be faster than in IE because IE doesn't have a built in function for getElementsByClassName and Firefox does). If you don't need the frameworks methods for doing things I would say go ahead and use the native JS as that is generally what you chosen framework will use.

I would say do it with the framework, just because it will bring consistency inside the project. If you are using the framework everywhere even in small function, it will be easier to maintain.
As for the other factor it really depends on what you are trying to do.

I've been working on a javascript-heavy project. I've found that almost every time I had a cross-browser bug in my code, it was in a place where I had code like this:
var element = $(selector);
// lots of code ...
element[0].someVanillaOperation();
and that vanilla wasn't exactly the same across all browsers. What I love about jQuery is that (most of the time) it hides the browser differences and its functions work the same across them all.

If you're selecting elements by ID then plain Javascript is faster. It doesn't, however, provide any of the selection niceties that you get with jQuery - selecting multiple elements by class in a single call, for example.
Take a look at this link: http://www.webkit.org/perf/slickspeed/ which runs a speed test. It's an older version of jQuery, but the results in terms of raw speed speak for themselves.
Personally, I tend to use jQuery for everything - it keeps the code cleaner and the fact it pretty much dispenses with cross-browser JS support issues is worth any performance overhead in my book.

Wrap jQuery, dojo with custom library?

Coming from Java, I'm wondering if a Java best practice applies to JavaScript.
In Java, there's a separation of interface and implementation, and mixing them up is considered a bad practice. By the same token, it is recommended to hide implementation details of your library from end developers.
For example, log4J is one of the most popular logging libraries out there but it is recommended to write code to the slf4j library or the Commons Logging library that "wraps" log4j. This way, if you choose to switch to another logging framework such as logback, you can do so without changing your code. Another reason is that you, as a user of a logging library, how logging is done is none of your concern, as long as you know what logging does.
So back to JavaScript, most non-trivial web applications have their own custom JavaScript libraries, many of which use open source libraries such as jQuery and dojo. If a custom library depends on, say jQuery, not as an extension, but as implementation, do you see the need to add another layer that wraps jQuery and makes it transparent to the rest of JavaScript code?
For example, if you have the foo library that contains all your custom, front-end logic, you'd introduce the bar library that just wraps jQuery. This way, your foo library would use the bar library for jQuery functions, but it is totally oblivious to jQuery. In theory, you could switch to other libraries such as dojo and google web toolkit without having a big impact on the foo library.
Do you see any practical value in this? Overkill?

Although it makes sense from a theoretical standpoint, in practice I'd say it's overkill. If nothing else for these two reasons:
Anything that adds to the size of
the request (or adds more requests)
is bad - in web world, less is more.
If you're using say jQuery, the
chances of you switching to
something like Mootools is (imho) slim to none. From what I've seen, the top libraries each aim to solve different problems (at least in the case of Mootools and jQuery - see this great doc for more info on that). I'd assume that you'd incur a tremendous amount of headache if you were to try to implement a middleware library that could easily switch between the two.

In my experience and being a Java developer myself, sometimes we tend to take the whole "abstraction" layer pattern too far, I've seen implementations where someone decided to completely abstract a certain framework just for the sake of "flexibility" but it ends up making things more complicated and creating more code to maintain.
Bottom line is you should look at it on a case by case basis, for example you wouldn't try to create an abstraction layer on top of struts, or on top of JPA, just in case you then go to a different framework (which I've rarely seen done).
My suggestion is, regardless of the framework you are using, create objects and components that use the framework internally, they should model your problem and be able to interact between them without the need of any specific framework.
Hope this helps.

There are a lot of good answers here, but one thing I don't see mentioned is feature sets. If you try to write a library to wrap the functionality provided by, say, jQuery, but you want to be able to easily swap out for something like prototype, you have a problem. The jQuery library doesn't provide all the features prototype provides, and prototype doesn't provide all the features jQuery provides. On top of that, they both provide their features in radically different ways (prototype extends base objects -- that's damn near impossible to wrap).
In the end, if you tried to wrap these libraries in some code that adds 'abstraction' to try to make them more flexible, you're going to lose 80% of what the frameworks provided. You'll lose the fancy interfaces they provide (jQuery provides an awesome $('selector') function, prototype extends base objects), and you'll also have to decide if you want to leave out features. If a given feature is not provided by both frameworks, you have to either ditch it or reimplement it for the other framework. This is a big can of worms.
The whole problem stems from the fact that Java is a very inflexible language. A library provides functionality, and that's it. In JavaScript, the language itself is insanely flexible, and lets you do lots of crazy things (like writing a library, and assigning it to the $ variable). The ability to do crazy things lets developers of javascript libraries provide some really creative functionality, but it means you can't just find commonalities in libraries and write an abstraction. I think writing javascript well requires a significant change in perspective for a Java developer.

Someone wise once said "premature optimization is the root of all evil." I believe that applies in this case.
As others have expressed, you don't want to abstract for the sake of flexibility until you have an actual need for the abstraction. Otherwise you end up doing more work than necessary, and introducing unnecessary complexity before it is required. This costs money and actually makes your code more brittle.
Also, if your code is well organized and well tested, you should not be afraid of major changes. Code is always changing, and trying to anticipate and optimize for a change that may or may not come will almost always get you in more trouble than it saves you.
Acknowledgement: I should give credit to Agile programming and my practice and readings on the topic. What I've said comes directly from my understanding of Agile, and I've found it to be an extremely good razor to cut out the extra fat of my work and get lots done. Also none of what I've said is actually JavaScript specific... I'd apply those principles in any language.

There are good arguments calling this development practice - wrapping in order to switch later - into question in any language.
A good quote by Oren Eini, from his writeup on wrapping ORMs:
Trying to encapsulate to make things
easier to work with, great. Trying to
encapsulate so that you can switch
OR/Ms? Won’t work, will be costly and
painful.

This is definitely something that is done in enterprise environments.
Take for example a company that has their own custom javascript framework that is used on all of their projects. Each of the projects decide to use their own framework (jQuery, Dojo, Prototype) to add functionality to the underlying modules of the company framework. Employees that move between projects can now easily do so because their API with working the project's codebase is still the same, even though the underlying implementation could be different for each project. Abstraction is helpful in these situations.

It is overkill. Javascript is not Java and is not in any way related to Java. It is a completely different language that got J-a-v-a in the name for marketing reasons.
If you are concerned with availability of add-on libraries, then choose a framework with a large ecosystem. In an enterprise environment you will be further ahead by standardising on a vanilla off-the-shelf uncustomised web framework that you can upgrade every year or so tracking the rest of the world. And then supplement that with a SMALL in-house add-on library which you will, of course, have to maintain yourself, not to mention training any new programmers that you hire.
Since you are talking about Javascript in the client (web browser) it is more important that you limit the complexity of the things that people do with it. Don't build huge amounts of client side code, and don't make stuff that is so brittle that another programmer can't maintain it. A web framework helps you both keep the linecount down, and keep your own code reasonably simple.
It is not a question of Javascript best practice, because that would be different for server-side JS such as Rhino or node.js.

Adapter pattern is not a common solution in this case. The only example I know to use this pattern is extjs. Javascript projects are usually too small and they aren't worth the effort you would make by creating such an abstraction layer.
The common solution for this problem is that you try to use multiple frameworks together for example with jquery.noConflict.

I've done this before, and can talk a bit about the experience of writing a library/toolkit wrapper.
The plan was to move from Prototype to some other library. Dojo was the first choice, but at the time I wasn't sure whether that's the library to move everything to (and by everything I mean ~5MB of Prototype-happy JS). So coming from a world of clean interfaces, I was set to write one around Prototype and Dojo; an awesome interface that would make switching out from dojo a breeze, if that was in fact necessary.
That was a mistake that cost a lot of time and effort for a few reasons. The first one is that although two libraries can provide the same functionality, (a) their API will almost always be different, and most importantly (b) the way you program with one library will be different.
To demonstrate, let's take something as common as adding a class-name:
// Prototype
$("target").addClassName('highlighted');
// Dojo
dojo.addClass("target", "highlighted");
// jQuery
$("target").addClass("highlighted");
// MooTools
$('target').set('class', 'highlighted');
Pretty straight-forward so far. Let's complicate it a bit:
// Prototype
Element.addClassName('target', 'highlighted selected');
// Dojo
dojo.addClass("target", ["highlighted", "selected"]);
// jQuery
$("target").addClass(function() {
return 'highlighted selected';
});
// MooTools
$("target").set({
"class": "highlighted selected"
});
Now after choosing an interface for your version of the addClass you have two options: (1) code to the lowest common denominator, or (2) implement all of the non-intersecting features of the libraries.
If you go with the 1st -- you'll loose the "personality" / best qualities of each of the library. If you go with #2 -- your addClass' code will be at 4 times larger than the ones provided by any of the libraries, since for example when Dojo is included, you'll have to write the code for the function as the first param (jQuery) and the Object as the first param (MooTools).
Therefore, although it is theoretically possible, it isn't practical, but is a very nice way to understand the intricacies of the libraries out there.

Is there any need to learn JavaScript DOM methods for web development, now we have jQuery et al?

With the availability of JQuery, is there any need to learn direct DOM manipulation with Javascript in order to be a professional web developer/site builder/etc.?
This probably could be asked with Prototype, MooTools, etc. too, but I'm not familiar with them apart from their names.

Note: This question was rephrased so
my answer reflects the initial
question but I kept on adding.
Absolutely. Jquery IS Javascript and while it does abstract a lot of the cross-browser DOM discrepancies, one is still prone to the same exact parsing errors, scope misunderstandings, and so forth.
Using jQuery without knowing basic DOM knowledge or necessary Javascript knowledge is what I would consider dangerous, somewhat like giving a very powerful gun to a child who just may accidentally shoot himself in the foot without knowledge of how to use such a powerful tool the proper way.
A person that's taught straight with jQuery would have absolutely no idea how to debug issues if the error being thrown refers to anything in the DOM. For something as simple as comparing to see if an element is another element ( for things like current state ), they would try something maybe like:
if ( $('a.current') == $('a.current') ) { }
Which would return false since two unique jQuery objects are created. If they had known how to grab the reference to the DOM nodes they could have just done $('#el')[0] == $('#el')[0].
Anytime you use a jQuery plugin and run into some mysterious behaviour, without DOM knowledge you pretty much have to rely on someone else to help you out. Developers with DOM knowledge would be more able to debug and know the root of the problem, so you're only setting yourself up to lose more time scratching you head puzzled in jQuery land.
Furthermore, if one wishes to ever get to a high knowledge level and not just be an ordinary joe jQuery developer then he would greatly need a vast knowledge of the DOM discrepancies and Javascript in general otherwise you're limiting your skill level by a huge margin.
If you stick around Stackoverflow for awhile you'll see this in day to day questions, in which people who took the easy shortcut lack the basic JS/DOM knowledge necessary to solve their issues.

In some circumstances, you could conceivably not want the overhead of a DOM manipulation library.
E.g. for mobile development, mobile internet connections are still a bit slow at the moment, so you might want to save bandwidth by forsaking a library and going with native DOM code. (And possibly save a bit of execution time, as mobile devices are currently a bit slower at running JavaScript than desktop computers.)
But the devices, libraries and internet connections should all get faster as time goes on, so I reckon it’s unlikely you’ll do a lot of direct DOM scripting in mainstream day-to-day web development.

If you don't want to learn the underlying basics, sure it is :)
If you're not interested in how stuff works, sure it is....
If you want to cry for help each time you hit the limits of jQuery, sure it is!
If you want to depend on people here answering you simple questions, sure it is :D (reps for us...)
"The fool wonders the wise man asks."
In other words, know how the tools you use work, otherwise you'll end up with a horrible dependency.

You can use a library like jQuery with little knowledge of Javascript and almost no knowledge of the DOM, but that will only get you as far as the library lets you. You will only be able to do things that others have done before you.
Knowing how the underlying system works will also let you use the library more efficiently. Knowing what the library has to deal with lets you know why there is a big performance difference for certain ways of using the library, and why some things doesn't work at all.

There's a great many things that jQuery simplifies for you, but knowledge of the underlying JavaScript that jQuery calls can make things a little faster:
$('<div />').appendTo($('body'));
and
$(document.createElement('div')).appendTo($('body'));
are both equivalent, but the latter is a shade faster (albeit only in the order of milliseconds), since you're using JavaScript directly, rather than having jQuery calling document.createElement() on your behalf. Again, this is definitely a ridiculous micro-optimisation.
Other examples are working with Date, Math and string objects/functions. jQuery doesn't implement replacements for these (wisely so, since they're fairly easy to work with already).

New to javascript, why is jQuery such a beast?

I'm new to javascript (functional programming is okay for me, though) and I am wondering how jQuery got away with some of the design decisions they made. Is it just too much work to fix now or what? For instance, there seems use of strange symbols in strings when accessing elements in the DOM or weird function definitions for $, that are forcing me to check references every other time I want to get some basic data.
Can someone point me to a learning source where I can learn all of these nuances of jQuery (jQuery's examples just don't cut it, they're too spread out)? Maybe someone has a super good reference site/pdf for jQuery?
Thanks
EDIT:
And as a side point, in regards for learning, why the heck is the entire jquery.js file collapsed onto a single line? It is unreadable.

Try reading jQuery in Action, it's a really good book to get started with jQuery. Next to that you can also watch examples on jquery.com, but I did prefer the book to get started.
For JavaScript basics you can try w3schools.
In the beginning I had the same problem with the $ functions etc, but after I read the book it became all clear to me, and to be honest, I wouldn't use plain JavaScript without jQuery anymore for DOM manipulation.
For your edit: you have a compressed (or minified) version, which has all code on 1 line, most spaces removed etc to keep it small and a readable version. Both files can be found on the download page from jQuery.

The strange symbols you refer to are mostly CSS selectors, the standard way to address elements on the web. jQuery could've come up with its own conventions, but decided to go with what was standard and best known.
jQuery itself is surprisingly consistent. Once you wrap your head around the jQuery style you barely have to consult the documentation; things just work as you'd think they should.
The jQuery documentation is actually quite good and includes an example with every command. It also has a large user base, so a quick search will generally answer any questions you have. Google is your friend.
I'm guessing the issue is not jQuery, but a difference in javascript style compared to languages you're more familiar with. Watch Crockford's "Javascript: The Good Parts" for a reasonable introduction to good javascript style.
http://video.yahoo.com/watch/630959/2974197
Also check out Dustin Diaz's posts, I found his early screencasts where he'd build an app and talk about what he was doing very educational:
http://www.dustindiaz.com/

I think jqapi.com is a more useful jQuery API documentation resource than jquery.com

Compressed javascript uses less bandwidth to load up, and decreases load times. Use js beautifier to expand it.
jQuery is the greatest thing to happen to the DOM API, which is just awful to deal with. It also handles cross-browser issues and older versions, giving them functionality they otherwise wouldn't have.
The strange symbols in selectors are from CSS, not the fault of jQuery. The selectors API is now being built into browsers, so it's worth it to understand what they mean.

As for a functional programmer every imperative language is probably a failure in your eyes and mindbending to capture, with javascript and jquery probably on top of that list. They both have side effects all over. Jquery is really about manipulating the DOM so the side effects are the means and the goal, as opposed to proper functional programming.
If you're young enough you can still make the mind switch though :-)

start on jQuery Docs Main page...

You could try some other JavaScript frameworks to find out which one suits you best.
Although jQuery is pretty cool for most people, it's not the holy grail for everyone.
Maybe it's just not "your thing".