AngularJS vs (AnguarJS + jQuery)

Question

I have a question about performance when you use only AngularJS with pure JavaScript and when you use AngularJS with jQuery.

ex:

app.directive('fitHeight', function($window) {
    return {
        restrict: 'A',
        link: function(s){
            s.contentminHeight = $window.innerHeight - 40 + 'px';
            var h = $window.innerHeight;
            $(window).resize(function() {
                if ( h !== $window.innerHeight ) {
                    h = $window.innerHeight;   
                    s.contentminHeight = ( h - 40 ) + 'px';
                    s.$apply();
                }
            });
        }
    };
});

I saw as the verification with AngularJS of $window resizes is deprecated, and other options was to create a Interval to check, I found jquery.resize more acceptable.

or

app.directive('leftmenuDropdown', function() {
    return {
        restrict: 'C',
        link: function(s, e){    
            e.click(function(){
                var m = $(e.parent().find("ul")[0]);
                if ( m.hasClass('dd-open') ) { m.removeClass('dd-open') } else { m.addClass('dd-open') }
            });
        }
    };
});

I search on google and I understood as .hasClass is more fastest than pure JavaScript.

About performance, what I should do? To keep jQuery with AngularJS or to use only AngularJS with pure JS?

Answer 1

I was searching about the DOM query performance of libraries and I saw the results below :

vanilla - document.getElementById('test-table') => 12,137,211 (ops/sec)
Dojo - dojo.byId('test-table') => 5,443,343 (ops/sec)
Prototype - $('test-table') => 2,940,734 (ops/sec)
jQuery - $('#test-table') => 350,557 (ops/sec)
YUI - YAHOO.util.Dom.get('test-table') =>   326,534 (ops/sec)
MooTools - document.id('test-table') => 78,802 (ops/sec)

you can find other performance details here. this is pretty much giving the performance idea about native more than comparison between libraries/frameworks. But You also need to consider the specs like cross-browser and the environment you use. Angular generally ties you up to its own methods (like directives) on DOM operations, and in the angular system editing DOM by jquery or native functions may result in malfunctionality. If you know what you do, the number above shows the performance results

Answer 2

Angularjs comes with jqLite

• You can have almost many needed functionalities in it, rest I did create an application with jQuery+Angular and got conflicts many times as the app get out of angular's scope.

Angular is widely popular

• You will find support for it such you get for jQuery, you can start with angular(jqLite) itself.

Performance

• of course loading two heavy libraries/framework and maintaining their equilibrium will cost you more.