When would i use angular 2 over jquery

Hi i’m a pretty experienced front end developer with excellent sass, less, css, javascript, jquery, html, grunt etc. Now when i want to achieve some interaction that can’t be done in plain html, css i turn to jquery/javascript for user triggered events and ajax and this has served me well and still feels like the standard for web development. However i feel i need to learn a Javascript framework but i’m not sure what type of projects i would pick angular 2 over Jquery. Can i use it to build websites or is it just for apps? i was thinking of doing a portfolio site using angular but this seems over kill. Can someone shed some light on this with some examples

I was asking the same question about three months ago, sounds like you and I have the same skill set. I am by no means an expert on Angular at this point, but I think I know enough to safely say this: they are generally for very different purposes.

I am currently part of a huge angular project ATM for a nation wide niche job search web app. My part is creating a front facing CMS with WordPress for the static “about us” type pages but then to integrate Angular directives to interact with the app without moving to a sub domain or different site. Hope that makes some sense (NDA prevents too much detail here).

Anyway to answer your question from my limited experience…

Just use jQuery for your normal animations, interactions, and occasional ajax. Use Angular if you need to handle complex database interactions (like rapidly updating your “view” from server side data like thousands of entries filtered by a specific tag or search criteria). It’s pretty awesome for that, where people like me would think it needs to be handled by PHP or similar, Angular changes the game for that sort of thing.

Hope that makes sense, and I look forward to seeing other answers here as well.

4 Likes

Thanks for your reply.

It does make sense but wouldn’t it be best to do away with jquery and use angualr.

e,g say i have a pretty standard site, 3-4 pages, home page slider, contact form. What i understand is i can do the slider and the form validation all in angular without jquery (obviously i could just do it in vanilla js). would that be a good idea?

Does anyone have any examples of sites built in angular?

I’d say it’s just for apps. You could use it to build websites, but you really want a website to be accessible as possible and only use JavaScript to enhance the page. For an interactive app, go all out. Don’t sacrifice anything for a small subsection who wants to disable JS, they can always re-enable it for your site. Maybe leave the landing page to display some basic info if JS is turned off, but that’s your call.

Angular, React, Ember, Backbone, Vue, etc. are all there to help build apps easier, better, and be more maintainable. Having built things that were probably too large in jQuery, I can say that it becomes a hard to manage monster pretty fast. Using a framework can not only help you build cooler things easier, but they can free up a considerable amount of time you’d spend trying to manage DOM elements, data models, or state.

You can use jQuery with most frameworks, but usually there isn’t a point unless you already have it there because of Bootstrap or whatever. Even then, I think mixing it should be avoided in case you ever want to move away from it, you won’t have to write a big chunk of your JS code.

You can use an extension called Wappalyzer, which is pretty good and will give you a general idea of what a site has used to build their page.

3 Likes

I would say no, unless you don’t mind spending like 3x as long to build a small site (of course you gain the experience).

I was going to say “oh you can’t do sliders in Angular, that’s not what it’s for” then I found this : http://codepen.io/Fabiano/pen/LACzk.

So it looks like you can with an ADDITIONAL angular file called Angular-ui-bootstrap.

Still IMO I think it’s the wrong tool for the job if the job is a 4 page site with a carousel.

mawburn is on the money.

The big difference between jQuery and these other frameworks is that you need to handle the DOM manipulations manually in jQuery, in the frameworks the DOM is just a reflection of the current state and data in the page, when you have changing data over time these frameworks drastically reduce the amount of work you need to do to keep the page up to date.

I wrote an Angular tutorial building out a Gmail clone which you may find helpful as an overview of the important concepts in Angular 1. There’s a lot of concepts that it adds to help you structure applications, jQuery only handles DOM manipulation.

2 Likes

So would you say if i’m consuming content through a number of api’s i’d be better off using angualr?

Probably.

I’d say more likely if you’re trying to do more than updating a couple divs with data on button clicks, you’d be better off with Angular or React or another framework.

Doing it in jQuery can trick you. You’ll start by saying “I just need to do a couple things, I don’t really need much”. Then the next thing you know, your app is 1500 lines of unmanageable spaghetti code and you can’t remember where you stored the state of this or what ID you used for that other thing.

ok so how about this scenario

have a multi page site which requires a vertical split layout and when pages load in they want them to transition in (ie pjax). the site uses a number of 3rd party apis to display content and some of this will need filtering, searching etc.

Now i know how to do this in jquery but would this benefit from angular?

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.