JQuery vs. AngularJS: A Comparison and Migration Walkthrough

https://www.airpair.com/angularjs/posts/jquery-angularjs-comparison-migration-walkthrough

by daniellmb • 12 years ago

28 15 12 years ago

daniellmb• 12 years ago

If you already understand both jQuery and AngularJS, it may seem a little silly to compare them. Like comparing a motor to a car. Yet, this article will help those that know about jQuery, and want to learn more about the strengths AngularJS has to offer. Specifically, the comparison shows what both of these tools are good at, and empowers you to know what one best fits the needs of your application.

There are a several factors that will help you decide whether or not to use AngularJS. In my opinion it's not so much how complex the user interface is, although that is certainly relevant. The first thing to consider is where you want to put your application logic, server-side or client-side. The more things you want to push down to the client, the more likely AngularJS will better fit your needs. Are you creating a single page application where url-to-resource routing is done in JavaScript, or will that be handled server-side? Will you be merging data with templates on the server, on the client, or both? I suggest you look at the "too long; didn't read" chart in the article, and see if you need the features AngularJS provides. How important is it to you that your client-side code is testable? While it is possible to unit test jQuery code, the way most developers write nested callbacks tightly coupled to event handlers, does not lend itself easily to isolated testing. Finally, you need to decide if your team wants to embrace the declarative style of application development advocated by AngularJS. Such as using the directive ng-click vs. $(elm).click(). This will most likely require a change in mindset, and should be carefully weighed.

drinchev• 12 years ago

Yep. Totally agree. Actually I was freaked out when I saw the article title, asking my self : Did I miss something?.

Backbone and Angular are more comparative than Angular and jQuery. Also Angular is using a similar to jQuery language jQLite [1].

1: https://docs.angularjs.org/api/ng/function/angular.element

carsongross• 12 years ago

Java Socket Programming vs J2EE: A Comparison and Migration Walkthrough.

Raphmedia• 12 years ago

At first, I was confused. "Oranges vs. Apples!". But then, I saw the file size. I understand the article as in if you use Angular in your app, you shouldn't be also using jQuery. It is also a good way to introduce Angular to someone that has experience with jQuery. That being said, "orange vs. apples".

debacle• 12 years ago

I don't understand. The comparison breaks down in the very first example - where is the example of Angular's excellent DOM abstraction and compatibility magic?

"And then I refactored something that was bad to make it faster."

There's also a typo in the jQuery example.

There's no comparison. jQuery provides way more for actual DOM magic than Angular does.

As I have outlined in this article, AngularJS can do everything that jQuery does and much more...

But you didn't. You didn't even provide an Angular implementation of your very first example.

meesterdude• 12 years ago

I was puzzled by this too. I'm not familiar with Angular, but am of course curious. My side project uses a fair bit of Jquery, but I wonder if some things would be better served in other ways.

cozuya• 12 years ago

These articles are essentially clickbait. The Angular docs themselves say "this is not a low-level framework, if you need that, use something such as jQuery"!

nlh• 12 years ago

Agreed 100%. This would be hugely helpful for me (and others I hope): I get where Angular shines (heavy-lifting for single-page apps). The part I'm missing is how to do the day-to-day jQuery stuff in Angular. Change CSS classes on button clicks. Hide & show elements on drop-down changes. Etc.

In my mind, Angular is still "for building a rich app", whereas jQuery is "for adding a bit of magic to an otherwise static page" (I know that's not really true, but it's what I use it for.)

I'd love to get fluency in Angular - or at least a great understanding of it - for that latter case. Is it usable for the day-to-day "magic" bits of an otherwise normal webpage? (Other than the 2-way data binding example which I see all the time and understand).

jasode• 12 years ago

JQuery vs AngularJS comparison is reasonable because many developers will know JQuery and wonder what that new AngularJS thing offers them. That's why the following epic stackoverflow answer has 6000+ upvotes:

http://stackoverflow.com/questions/14994391/thinking-in-angu...

Also, bloggers will often compare them as the following article does (HN discussed it previously):

http://okmaya.com/2014/03/12/the-reason-angular-js-will-fail...

So yes, JQuery vs AngularJS is like comparing apples & oranges but one way to reach the understanding of why it's apples and oranges is to explicitly compare them!

While many line-item features of AngularJS and JQuery do not overlap, they do overlap in devs' mindshare to program a web page. Hence, the comparisons will continue.

_mtr• 12 years ago

1 Framework Comparison

jQuery is a library, not a framework!

ape42• 12 years ago

Don't several frameworks use jQuery?

klibertp• 12 years ago

Yeah, precisely because it is a library and can be used with many different frameworks.

Lately I was convinced that all frameworks should die and be rewritten as reusable and - important - interoperable libraries. jQuery is a good example of such a library.

angersock• 12 years ago

One of the annoying sticking points with Angular for me has been that it really doesn't play nicely with jQuery or jQuery-derived components (like a lot of the awesome stuff in the jQuery-UI package).

Like, sure, I get it, I get it, you're a framework for doing all this high-brow enterprise single-page app stuff, you own the DOM, you have DI patterns for testability, yadda yadda yadda...why the hell is it so hard to use, say, flotr2 to draw charts with you?

Why does your documentation not show the (common!) example of wrapping working and existing jQuery (or AJAX, or whatever) libraries into directives/services in The One True Angular Way?

Sure, polymer and web components and all that happy horseshit will make things better--years from now. Some of us are trying to deliver functionality today. It's like the devs/community don't even acknowledge that this is a problem.

prakash-news• 12 years ago

got my doubt on both of this though i m not a javascript or jquery fan, always try to make my way to the middle with css. Thanks for this article.

JQuery vs. AngularJS: A Comparison and Migration Walkthrough

Related Stories