Why is Angular so less popular than React? (2024)

I am in no way the whole crowd, but having used both legacy AngularJS, React, and Angular 4+ in production for medium-sized apps, this is my main takeaway:

The mental model for React is much simpler than Angular's.

In React, There are two concepts one needs to understand: Components, and Hooks. JSX too, but as a web dev the HTML-like syntax was already familiar.

In Angular, you need to understand: the binding syntax; Components; Templates; Factories; Modules and Services. And learning bindings also means learning RxJS (which I love as a standalone lib, but is a big cognitive load when coupled with the rest of ng).

Even just comparing the "Fundamentals" page of Angular versus the "Main Concepts" of React (which, isn't exactly the best measure of complexity, of course, but it's A measure), you can see Angular spends 8 of its 10 sub-sections explaining essentially-required concepts, while in React it uses 6 out of 12 sub-sections.

React is much more concise in terms of concepts, and instead just has a bunch of common patterns that are sufficiently approachable and memorable, but most importantly can be "rediscovered"/"derived" on your own, rather than relying on framework-provided "black box" concepts.

I have found good success with React + RxJS, in fact. They have some overlap, but with the benefit of interop outside React, and Rx is excellent at both message-passing-style events, as well as general-purpose "data binding".

And the total load is still in my perspective smaller than Angular. I have never even casually used Vue (I've since switched to gamedev as a profession), so I cannot comment on it, but from a cursory on its docs, it seems like a leaner Angular, which is good.

> How did you make the switch to game dev?

I've always had gamedev as a goal, and since 2012 participated in "game jams", which are basically make-a-game hackathons; as well as making free web games/prototypes. The industry is very portfolio-focused.

Mostly did webdev as a way of supporting myself until I got a gamedev job (but I like doing webdev too). I currently work at a company that makes corporate/educational games, but am collecting more experience to be more competitive on the actual entertainment industry. Which is a bit more challenging given I'm based in Brazil.

That being said, it's much easier to "switch careers" when you're 22 and it barely started!

My favorite things about Angular were it's choice to use TypeScript, RxJS for state, CSS-in-JS-like, and Dependency Injection. I'm glad I learned Angular to be exposed to all those choices.

My favorite things about React were JSX and FP.

Seems like you've found a good way to have it all.

This is true for Angular as well. To use the framework you don't need to understand everything it provides. In https://angular.io/start we're aiming to reduce the initial conceptual overhead.

We understand that we can work on simplifying the mental model of Angular. This is something we're working towards. We're careful with in process though because we want to provide a consistent, backwards compatible development experience.

I've used both for non-trivial apps. I find angular heavily over-engineered. The problem is not just the learning curve, but the fact it becomes almost impossible to do anything the framework authors didn't envisage. React is just plain functions so you can do whatever you want, it never got in my way.

Now, if angular would prove substantially better in terms of performance or maintainability or so, that might've been ok. But they're not. Performance is on par, I find refactorings actually harder because of the heaps of boilerplate angular requires, etc. They invented way too complex solutions to solve problems that either don't exist, or other frameworks solved better.

I'm comparing my experience from rather big real world apps. So the react app had all of that (didn't use redux though).

To give just one example. If you want to dynamically import components, in react you just use a dynamic import, since it's just like importing any other js function. Compare this to the angular way and draw your own conclusions: https://angular.io/guide/dynamic-component-loader . Granted, angular may have things that are easier to achieve than react as well. And I don't like the looks of jsx and so on. But my generic experience was that angular was always working against me. It reminded me of my java EE days.

I am curious. I have never used Angular or React seriously. But I have an upcoming project where I have to use an external HTML Canvas library.

Would you suggest I go with Angular or React?

It's a fairly complex project, involving user based label designs, data manipulation, etc.

I am API based server and a heavyweight front-end.

React and angular basically both do the same thing: render a component tree to (usually) the DOM. You use a framework to make this easier for you and I think react does that way better. But if it's all about raw data manipulation and using that canvas lib, you may not need either?

Never used it myself, but the guys from Flipboard made this react canvas renderer which might be useful for you: https://github.com/Flipboard/react-canvas

I think learning curve for Angular is steep compared to React. For React, all I need to know is javascript and I can start writing components but for Angular, I must go through some documentation to get basic idea of jargon it preaches before I can do anything substantial.

Not saying one is better than other but in my opinion, entry barrier for React is lower than Angular which may be an important factor for React's popularity.

Opinionated (professionally engineered structure) vs. Simple template system.

There’s no good or bad. As in any architectural adoption, it should’ve based on your team’s capabilities and support capabilities.

Experience matters too. There are good reasons to use either platform.

> Doesn't opinionated and professionally engineered structure mean "better"?

No, if it's overengineered.

If you have a corporate web app the connects to dozens of secure services, an opinionated framework specifically designed to manage that well is not “over engineered”.

Conversely, if your web app has one api to call, you may find an opinionated framework to be a rocket engine where only a lawn mower engine is required.

Depends on which circles you move on.

Enterprise Java and .NET shops usually reach out for Angular first.

And I have no intentions to ever advise React with its FP approach with a myriad of endless libraries, to devs that just want to get stuff done.

I have not done much react apart from a "hello world", but I have been using Angular2+ for years, having previously used AngularJS. Here are a few thoughts:

The learning curve is steep I agree. There does feel like there is a lot of ceremony and boilerplate required for even the more basic "hello world". Also if you are not familiar with RxJS before learning Angular then that is a second learning curve that you need to know too and it is a challenge.

The docs are also very frustrating:

- the API reference is usually just auto-generated with perhaps a single sentence saying "The FooBarDooDad does foo to bar" with zero other content, e.g. https://angular.io/api/core/Query

- the tutorial guides are absolutely huge epic documents, scrolling screen after screen after screen after screen and are far too long and far too convoluted to be useful in my opinion. It feels like they are several entire chapters lifted from a printed book or something, rather than something useful for a developer trying to implement something. E.g. https://angular.io/tutorial/toh-pt6 (and that is just part 6!) I've been doing this for years and I still hate having to go back to those docs.

- the tutorials are all talking about some "Heros" app that I have no idea what it is or what it is doing. I wish they just had examples for the simplest-possible case in stackblitz-widgets that does not need me to know the ins-and-outs of their sample app.

That said, once you are up and running with Angular I have found it is very easy to use, and RxJS is really nice once you get your head around it. Everything works largely as expected, and you can more or less forget about Angular and concentrate on the logic. As far as boilerplate goes, I have found that once you have done the boilerplate once, you just copy-paste from one file to another then do a search-replace for the name etc - takes perhaps 10 seconds etc before you are writing logic.

I would like the Angular team to add some sort of "official" state management feature though in the future. In my view, it is the biggest missing gap in the library and you either have to use NgRX as a separate library, or have to botch a global app state by using either a Service or a convoluted @Input/@Output chain

> Also if you are not familiar with RxJS before learning Angular then that is a second learning curve that you need to know too and it is a challenge.

You are not the only one mentioning this here. Do you believe it's wise to start with learning RxJS before you even approach Angular if you are a VanillaJS/JQuery "dinosaur" looking forward to learn Angular?

RxJS is very cool and well designed, and stands on its own. Worth learning about even if you don't use Angular, but definitely if you do! The basics are easy to understand, but there are a whole lot of deep profound operators that it will take a long time to master, although you don't need them all at first.

https://rxjs-dev.firebaseapp.com/api

Reading the guide and pondering the following table helped me understand how other mechanisms in JavaScript work together and relate to each other, and the corner that Observable occupies:

https://rxjs-dev.firebaseapp.com/guide/observable

>Observables are lazy Push collections of multiple values. They fill the missing spot in the following table:

 SINGLE MULTIPLE Pull: Function Iterator Push: Promise Observable

Yep it might help to learn some RxJS "in isolation" before encountering it for potentially the first time in Angular.

No need to master it - probably spend an hour or two on RxJS tutorials & samples to get to know it before jumping in with Angular so you know where the join is between Angular + RxJS.

For me, I was first getting into web development before Angular 2 was out. I thought it was super cool that I could make an incrementing counter and a to do list but just couldn't figure it all out.

I then tried React and it just kind of made sense. Since then from the sidelines I've heard Angular has gotten much better but personally don't see any reason to use anything other than React at this point in time.

I think Vue's reactivity system just fundamentally doesn't work which is why Vue 3 is basically an entirely new paradigm/framework trying to masquerade as an update. I have a feeling its going to split the community and end the way angular did.

I haven't used Svelte at all but it looks very interesting.

Saw a 2 man team that got features done in a couple of weeks on jquery move to angular and turn into a 15 man team that took months on each feature.

Management was very happy with how modern the stack felt

Sales came to a halt for 2 years since features came to a halt.

Turns out Angular is freaky hard to do right.

on the other side, we went from jquery messes with a bunch of state machine issues to being able to comfortably add client-side interactivity with a lot less worries when moving to Angular 1.x

There were definitely Angular-related issues, but they were replacing a lot of "my state machine is out of sync" issues that just scopes and watching mostly solve (except for the prototype inheritence gotcha)

I rebuilt my company's homepage and SaaS customer area from scratch in half a year, after the old 20 people jQuery team had been stuck for months implementing framework-like features with no useful progress.

I guess whether or not you'll be productive with Angular depends a lot on your experience and expectations. I come from the C++ world and Angular felt like MFC, so oddly familiar.

Because a bunch of college kids and bootcampers only learned React and are afraid of the job market spotlight moving on from where they're standing.

Popularity is not a useful metric when evaluating frameworks. Community engagement and core team motivation are, and some people may use popularity as a proxy for those measurements.

I am working on creating a web app now and for some reason decided to learn Dart and AngularDart at the same and do it with these technologies and it's close to being nightmarish. There are way too many concepts and things that tie together sort-of magically -- all to get a few form fields on a screen. I wonder how people come back to fix issues or add features in their Angular app after a few months away from it.

That said, I think, for bigger groups/companies working on a complex product, I can see that Angular ensures a certain level of "architecture" and code organized correctly instead of being coded to each dev's personal style.

But way too complex for single-person apps or for simple SPAs.

All that to say Angular is less popular because it is too complex to learn and use quickly.

> decided to learn Dart and AngularDart

Why use anything but Flutter if you choose Dart?

Angular: Learn about property binding, event binding, pipes, templates, views, metadata, attribute directives, structural directives, services, modules, components, injectors.

React: Write a function that generates a piece of HTML. Use standard event handlers to manage user interactions. Update state via setState methods. Ship it.

The first time I saw this in Angular's material implementation I was completely floored: https://material.angular.io/components/dialog/overview#shari...

The method for passing data to a dialog component is to import a magic constant and inject a data field into it's constructor? It's a completely over-engineered, nonsensical solution for a problem that doesn't even exist in React. There's so much stuff you have to be familiar with in Angular just to build the simplest features.

Yes.

Take a look at what you have to go through if you want to create a custom component in angular material (that can sit inside a form):

https://material.angular.io/guide/creating-a-custom-form-fie...

Something has gone completely wrong here.

The last time I looked at Angular Material was quite some time ago, but at the time I was really surprised because it didn't follow the conventions established in the docs, and the conventions it did use seemed nonsensical given the design of the Angular framework.

I can only guess that "same team" was a design-centric subteam for Angular while the engineering-centric team worked on the framework/documentation itself, or that Angular Material was under pressure to get implemented before all the best practices were established and by then they were stuck with the API.

It reminds me of the whole .NET ecosystem. All of these custom magical special ways to do everything, compared to ‘dumb’ setups like node/ruby/go where the actual logic is just right there in front of you

And every release .NET just keeps moving closer to the dumb systems. Simple and raw is good, keep the magic away

I am really glad there are other people who think this way. I am experienced with Python/JS/Ruby web app development models and recently had a look at ASP.NET Core web api projects.

The amount of complexity is mind boggling.

I mean, look at Flask in Python. Or even Expressjs in Node, why can't Microsoft come up with a simple framework that can run well on the .NET runtime?

I am a huge fan of C#, having used it for Desktop app development.

I would love to have a framework like flask in the .NET ecosystem.

Ah, yes, expressjs, or as I like to call it, "the mutation ecosystem," where who knows what middleware has mutated which object in which way, and whether any state has leaked or whether any assumptions about control flow will actually hold true. Where it's common to see callbacks, streams, Promises, generators, and async/await patterns all thrown together in a mishmash that requires continuous syntactical context-switching.

Honestly I'd rather develop in vanilla NodeJS where the approach is at least consistent, than in the Express ecosystem where sure your problems may have been solved 1000 different ways already but where none of them really fit what you want to do, and where there are many layers of hidden incompatibility that are going to require you to make adapters for each library anyway.

What's so complex about ASP.NET Core web api, other than having to learn to use a DI framework?

I found it very simple and minimal (again, other than the DI) when learning it.

Can you elaborate on the "mind boggling" complexity?

Flask is self-described as a "micro framework", which makes it simple to start with, but IMHO difficult to grow into something bigger.

I like the balance the ASP.NET Core 3.0 strikes.

 dotnet new webapp -o HelloWorld

Yields a fully functional site with* HTTPS* Logging* HTML templating* CSS/JS bundling & minification

And all of this is easy to customize and change.

"Web API" projects are even simpler-- it's just a small handful of files.

Is something like Nancy [0] close to what you're after? I've not used it myself because I prefer the structure of the full approach but from my extremely brief interaction with Express in Node it seems similar?

[0]: https://github.com/NancyFx/Nancy

Yes, same goes for Vue etc. You can hardly govern the freedom React provides. If you do, you can use Angular in the first place, because it has solutions out of the box. This is not to discredit React or Vue.

I am judging from my experience developing applications with 200+ developers across continents. You can write crappy code in Angular as well, but it helps you govern your architecture and your app. If you want modular components that can be reused, go for Angular. For smaller things or landing pages use Vue, React.

My experience.

9 major versions in ~7 years indicates that it's not remotely stable enough to be taken seriously, particularly for corporate stuff that will likely never get an upgrade. Even the "LTS" releases are only supported for 18 months.

React seems a bit better, but they don't seem to support older releases at all.

This couldn't be more wrong. The team does a great job handling upgrade paths post 2.0.

First off, Angular versions post 2.0 are nothing like AngularJS/1.x -> Angular/2.0. They are much more incremental and even the two times the entire renderer has been re-written it was an incredibly gradual process over multiple major versions with seemingly few changes to component and template APIs.

Second, upgrading between Angular versions couldn't be easier thanks to angular schematics. The process takes seconds and for specific rarer exceptions the team maintains this fantastic guide here: https://update.angular.io/

> This couldn't be more wrong. The team does a great job handling upgrade paths post 2.0.

The problem isn't how it's handled or how incremental it is, it's that there are so many upgrades with breaking changes, at least that's what they're communicating to me with their version numbers. There's also the lack of any real LTS versions I mentioned, 18 months doesn't cut it.

> They are much more incremental and even the two times the entire renderer has been re-written

Telling me that they've rewritten major components that frequently isn't exactly convincing me of the stability, its validates my previous belief that it isn't stable enough.

When they've got versions that are supported for 5+ years post release I'd consider it stable. It doesn't matter how good your upgrade guide is when you run into a bug or limitation with the current version and realize that you have to upgrade the entire framework and deal with all the breaking changes to get around it.

Compare that to react where you've got at least 3 years (assuming they follow semver) between breaking changes.