AngularJS and jQuery

One of the most popular JavaScript libraries – jQuery – is losing popularity in favour of AngularJS. Despite that fact there are several examples where the jQuery comes with a helpful hand. I will try to show a few examples when it is not worth to play with AngularJS, as jQuery will be faster and easier.


Soft comparison

At first lets compare these two – check out popularity:

jQuery AngularJS
StackOverflow questions tagged 61 294 545 612
GitHub repositories 36 231 58 145
GitHub users 167 132
YouTube results 75 500 312 000
Twitter followers 51 000 210 946

It should be noted that jQuery first stable version was released on August 26th, 2006 while first version of AngularJS was released scarcely in 2009.

AngularJS popularity and superiority over other frameworks is not a subject of discussion. It’s really powerful tool but I won’t write about it this time. I would like to show that there are cases in which we shouldn’t be forcing AngularJS usage.

I see one case that I’ll always choose jQuery: simple marketing page and business card.

Code comparison

DOM manipulation in jQuery is simple and makes no effort. Let’s check out this simple example. I want to toggle some content with a click of a button.

Using jQuery:

<button id="btn">jQuery btn</button>
<div id="content">jQuery toggle content</div>
$(function () {
    $('#btn').click(function () {
        $('#content').toggle();
    });
});

That’s 7 lines of code. Lets do it using AngularJS:

<div ng-app="angularbtn" ng-controller="BtnCtrl as ctrl">
    <button ng-click="ctrl.toggle()">AbnularJS btn</button>
    <div ng-hide="ctrl.content">AngularJS toggle content</div>
</div>
angular.module('angularbtn', [])
    .controller('BtnCtrl', function() {
        this.content = true;
        this.toggle = function () {
            this.content = !this.content; 
        };
    });

AngularJS uses 11 lines of code.

Let’s give another example when jQuery can help us, more useful this time. I want to create cool widget and at first i have to grab element.

Using jQuery:

$('.my-widget').each(function ($element) {
    // do some animating with $element
});

That’s 3 line of code only.

AngularJS

myApp.directive('myWidget', [
    '$animate',
    function ($animate) {
        return {
            link: function ($scope, $element) {
                // do some $animate stuff with $element
            }
        };
    }
]);

Instead, AngularJS uses 10 line of code. Looks like kind of overengineering.

And one more example. I want to fade my header background while scrolling.

Using jQuery:

CSS

header {
    background-color:blue;
    height: 420px;
    left: 0;
    opacity: 1;
    top: 0;
    postition: fixed;
    right: 0;
    transition: opacity 700ms linear;
}
header.scrolled {
    opacity: 0;
}
section {
    width: 80%;
    margin: 0 auto;
}

JS

$(function () {
    $(window).scroll(function () {
        $('header').toggleClass('scrolled', $(document).scrollTop() > 400);
    });
});

It takes 5 line of JavaScript.

AngularJS

function getScrollTop() {
    if(typeof pageYOffset!= 'undefined') {
        //most browsers except IE before #9
        return pageYOffset;
    } else {
        var B = document.body; //IE 'quirks'
        var D = document.documentElement; //IE with doctype
        D = (D.clientHeight) ? D : B;
        return D.scrollTop;
    }
}

angular.module('myApp').directive('myWidget', [
    '$window',
    function ($window) {
        var win = angular.element($window);
        return {
            link: function ($scope, $element) {
                win.on('scroll', function () {
                    $element.toggleClass('scrolled', getScrollTop() > 400);
                });
            }
        };
    }
]);

It takes 23 lines of JS code.

Conclusion

For the convenience of your work, avoid overengineering. jQuery does great job when we are working on simple marketing page or online business card. It gives us ability to add great looking interactive effects to our page with a little effort. jQuery has utility capable of simple DOM manipulations that is missing in AngularJS. When it comes to create more complex page or business applications, it is great idea to use AngularJS  or AngularJS and jQuery together. Weight of jQuery makes these two frameworks can be successfully used together.