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?

erdysson · Accepted Answer · 2015-12-15 09:08:01Z

4

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

answered Dec 15, 2015 at 9:08

erdysson

1,49013 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sjokkogutten Over a year ago

In case you are wondering about VanillaJS, its a joke to remind developers that programming can still be done without the need for additional JavaScript libraries :).

erdysson Over a year ago

exactly :) And it's funnier

anshulix · Accepted Answer · 2015-12-15 09:33:45Z

3

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.

edited Dec 15, 2015 at 9:33

answered Dec 15, 2015 at 9:28

anshulix

19711 bronze badges

Collectives™ on Stack Overflow

AngularJS vs (AnguarJS + jQuery)

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related