angular / angular.js

AngularJS - HTML enhanced for web apps!
https://angularjs.org
MIT License
58.86k stars 27.52k forks source link

Documentation: jqLite #11729

Open evilaliv3 opened 9 years ago

evilaliv3 commented 9 years ago

Currently AngularJS does not clarify at all its relationship with JQuery and jqLite

what is stated by the documentation is that AngularJS when present will make use of the real JQuery while if missing will ends using its jqLite implementation: https://docs.angularjs.org/misc/faq

what is totally missing is a clarification of why JQuery is preferred when present. is it for compatibility reasons?

project like GlobaLeaks (github.com/globaleaks/GlobaLeaks) would benefit of such a knowledge in order to minimize the the footprint of the application having a clear understanding of the possible losed compatibility if any: https://github.com/globaleaks/GlobaLeaks/issues/1249

gkalpak commented 9 years ago

I think it is more clearly illustrated in the angular.element docs:

jqLite is a tiny, API-compatible subset of jQuery that allows Angular to manipulate the DOM in a cross-browser compatible way. jqLite implements only the most commonly needed functionality with the goal of having a very small footprint.

There are some small incompatibilities in methods (described in the aforementioned docs).

So, jqLite wwas implemented in order to avoid the overhead of requiring jQuery, but it is already loaded in the page, then is definitely makes sense to use it (as it is more powerful). In any case, ngJq provides a way to determine what to use (jqLite, a specific version of jQuery etc).

evilaliv3 commented 9 years ago

thanks @gkalpak

probably i've been not clear. let me elaborate with a better context and precise questions:

context: i do not use directly jquery functionalities, so my doubt is on the choice to include jquery or not.

questions:

gkalpak commented 9 years ago

On situations like mine, where my project does not use explicitly any functionality of jquery, does the angularjs team suggest to include it or not an what are the reasons?

AFAICT, the team neither suggests nor discourages including jQuery for your own needs. So, if your project does not use it, I don't think of a reason why to include it. As far as angular itself is concenred, the team has gone to great lengths (they implemented their own tiny version of jQuery) to make sure angular works consistently (to the extent possible) across all the supported browsers without requiring any external library (including jQuery). In other words, jQuery is more powerful, feature-rich and extensible than jqLite and probably offers better browser compatibility (e.g. supporting older browser versions than Angular needs to support). But jqLite offers all that Angular needs with a much smaller footprint. Bottom-line: If you don't use jQuery, avoid the extra baggage.

Is there any known drawback in not including jquery (performance, browser compatibility)?

None that I know of. Regarding browser-compatibility, Angular has a pretty extensive test-suite which is run against all explicitly supported browsers. With every build, the same tests are run both with and without jQuery, so there shouldn't be any difference (as far as Angular itself is concerned).

Regarding performance, I don't know of any benchmarking between jqLite and jQuery taking place as part of the regular build process, but I would be very surprised if it turned out that the tiny, Angular-focused jqLite performed worse than a big library as jQuery. In any case, it should be fairly easy to benchmark your app since (as long as your code does not rely on it) enabling/disabling jQuery is as easy as (un)commenting a single script element on your HTML.

Not necessarily relevant, but Angular 2 will drop jqLite altogether and not use jQuery at all. (You will be still free to use it, but Angular itself won't needed nor use it.)

DISCLAIMER: I am not speaking on behalf of the team. These are my own opinions, based on my experience from working with Angular.

mgol commented 9 years ago

Is there any known drawback in not including jquery (performance, browser compatibility)?

None that I know of. Regarding browser-compatibility, Angular has a pretty extensive test-suite which is run against all explicitly supported browsers. With every build, the same tests are run both with and without jQuery, so there shouldn't be any difference (as far as Angular itself is concerned).

Well, if you don't interact directly with the jQuery/jqLite API then that might be true but if you use it directly then jQuery does do more, a couple of examples off the top of my head:

  1. Workarounds for .val() in IE; e.g. IE<11 don't trim the value as required so jQuery trims it for you.
  2. Inputs losing its value in IE when you change its type to radio.
  3. The .selected property not working with default values in IE.
  4. IE has clone bugs when operating on host objects (like ActiveX objects)
  5. A lot of issues concern old Android versions (<4.4) that Angular still officially supports but that are not tested so thoroughly as in jQuery. and many more.

And of course jQuery has more features and that doesn't just mean new methods but more powerful current ones, like:

  1. Better .find() support - all CSS3 selectors, selectors with leading combinators (e.g. $('#id').find('> span')) etc.
  2. .css(something) takes getComputedStyle into account, normalizes its various bugs in browsers.

So jQuery does allow you to do more, its size isn't just patching older browsers or adding completely new methods. As with everything, the decision if you want more features & more battle-tested DOM handling or a smaller JS size is yours; there is no one right solution. I'll just say that if you need to use jQuery/jqLite directly a lot and not just via Angular directives then you'll be safer with jQuery.

Narretz commented 9 years ago

I guess we can improve the docs here, but it's not something that affects a lot of devs, most of which will have jquery included.