The general tooling process is pretty simple, no need to convince people of the merits of JSX.

Architecturally speaking many people still like separating presentation from business logic.

Angular has a lot of mature tooling and wrappings around current libraries. Angular also offers a lot more tooling on the side, React is much smaller.

On an architectural side, while React keeps states in components, the state update mechanism is a bit obtuse compared to Angular's "scopes are just objects" philosophy.

It's dependent on how you view things, but if you're working on things where strict component decomposition is hard, and you "like global state in your views", then Angular's state mechanism (controllers) could work better for you.

Some would also declare that the non-turing-complete-ness of the template language in Angular is a feature, not a bug.

In templates is the biggest example - where you can use some JS constructs but not others, and have to learn a new set of directives instead of using if/for/while etc.

But also things like modules being an empty class that's only there so you have somewhere to put your annotations.

Not to mention needing to bundle a compiler, unless you use AOC, and the debugging is a nightmare (or at least used to be, I don't know if they've fixed it recently.) When your stacktrace is full of zone.js calls that are doing weird things because they monkey-patched Promise, you get the feeling that it's just not Javascript.

Some might say that JSX in React is similarly not JS. I respectfully disagree. The syntactic sugar is so light you could easily translate it yourself, by hand. Try doing that with Angular code!

And the trouble is that, as a new language that you have to learn, it is significantly inferior to JS/TS. So yes, give me React any day, where I can use real Javascript and not have to feel like the framework is fighting the language it's written in.

But yeah, I'm not really a huge fan of the template system either and the whole jsx thing is not really convenient.

Meanwhile, for Angular, I keep constantly going back to the documentation, trying to remember all the small details about templating, binding, decorators, modules, dependency injection, etc...

But I was lucky enough to work in a different project which had React, and it somehow felt more natural to my brain (more JavaScripty I suppose). I have played around even with Svelte and other frameworks as well, but to me personally Angular always stood out as the worst. By no means my personal view on the framework dimnishes its usefulness and I know a lot of people who prefer Angular. But for me personally it wasn't the best choice.

Double negatives aside, I tend to agree with you. I haven't done much frontend programming, but am about to undertake a medium sized project architected as a single page webapp. So my perspeftive in evaluating these frameworks is one of a fairly experienced non-frontend programmer. I can learn one easily, it's just a question of which I want to learn.

I looked at Angular and I really like the composability of directives. It seems like frontend frameworks have been maturing along a trend of composability. First jquery was popular because it eased the pain of manipulating individual elements of the DOM, then backbone was (and still is) popular because it introduced reactive components at a time when server side JS was growing in popularity, so it was a natural fit. Recently, angular grew in popularity for the same reactive advantages. There's something really attractive about the idea of cleanly separated code for each physical element/region on a page. That's why people liked directives, and angular was definitely onto something.

However, it seems like React accomplishes all of the same feats as angular, and offers the same advantages, but does it in a much cleaner fashion. JSX is far more intuitive than the Angular directive syntax, yet maintains all the composability advantages. It also has a natural place in a full stack arxhitecture if you choose to drink the look aid and implement a flux-like design. To me, React seems like the next step in the evolution of reactive frontend frameworks. Angular is the homo erectus to React's homo sapiens. :)

If you're starting a new project now, it seems to make far more sense to go with react over angular, especially if you're primarily interested in the east composability patterns. Also, the momentum in developer communities is clearly trending toward React, especially with the recent changes announced for Angular, and the continually improving support of react.

I was also introduced to Pete Hunt, core contributor to react, a few years ago. He was smart as hell and honestly that's enough of a reason for me to prefer React over Angular.

Angular 4 is an improvement over Angular 1.x, but Angular's main problem is still needless complexity, both in syntax and concepts added by the framework, and a totalitarian approach, in the sense that Angular seems to want to replace vanilla JavaScript/DOM/Browser API's with it's own slightly different and unnecessary versions. What you learn developing in Angular is therefore specific to Angular and not transferable to other domains. Personally I find that depressing and demotivating.

Angular 4's HTML templating syntax is terrible. I get the feeling the deliberately set out to make it as complex and inconsistent as possible — it's hard to phantom how else they ended up with such a mess.

Angular seems to have been inspired by the worst of Java EE from days of yore, it's riddled with needless complexity and ceremony. No one should have to work with that with the nice alternatives we have today.

As to JSX, it's something close to what I wanted a long time ago... when E4X was added to Mozilla's browsers, along with support for it with Flash/ActionScript3 and XML literal support in VB.Net (not that I love that language) ... interactivity to the UI was SO much simpler. The shame is it was never really supported in other browsers, which left it dead on the vine.

When JSX came out, it's REALLY close to what I already wanted, and in most cases better. In the end, I can compose a React/JSX component starting with a static render function in a file by itself... I can grow it and turn it into a class or wrap it in higher order components. Compose with extensions like react-redux, material-ui, react-jss with ease. Every single time I write an Angular component, I'm looking up configuration arguments for @directives. It's just painfully restrictive by comparison.

Simplest react component

    // HelloComponent.js
    import React from 'react';
    export default ({name}) => <div>Hello {name}!</div>


    // StatefulComponent.js
    import Hello from './HelloComponent.js';
    ...
       return <Hello name={this.state.name} />

People react (heh) strongly to React's JSX when they first come across it but at the end of the day I find React far more honest in its approach. Your Angular templates don't really gain anything from looking like they're just HTML templates -- instead you end up either serializing your data into some kind of string format or faffing about with magical nested "scope" objects (as if JS scoping wasn't enough to keep in your head).

But in order to maintain that illusion you also have to buy into these huge layers of added complexity when writing your own directives. I'd rather go all the way back to steamrolling the DOM with Backbone templates than these pretend-semantical lumps of custom elements and attributes.

Sorry for ranting. I'm still sore about being burned by Angular.

Bi-directional data binding and the isolation between style, structure, and logic felt was less productive. Angular has some nice properties, like dependency injection built in, but you can circumvent many of those needs with a functional component tree in react (or limit the surface area across components). The simple fact that you need @Output event emitters to handle callbacks is a good example of how bloated it feels.

It may be that I don't know nearly enough about Angular but even after a year of doing my best to learn the idiomatic Angular ways I wasn't impressed.

I'll take an "opinionated" framework any day of the week over what I see in the React ecosystem. Every React project that I've walked into has looked completely different from each other.

One common complaint about Angular is that it is "bloated." Yet every React project I've seen pulls in a million 3rd party libraries to solve the most trivial problems, and I've seen very few React apps that implement code splitting of features. So you have massive bundles being pulled into the client and the majority of code contained in those bundles are not going to be needed for a given user session because no user is going to use all features when they login.

Also, JSX reminds me of PHP code in the 90s. While you can separate your markup from your view logic and styles with discipline, most React devs don't. Most components I've seen are a large hodgepodge of markup, styles and logic.

Give me Angular any day of the week.

- Give me view encapsulation so I can write straight-up SASS and have it scoped to a component.

- Give me a template language to keep my view logic separate from my markup.

- Give me dependency injection.

- Give me code splitting / bundles right out of the box. Let me configure my routing without having to use components.

- Give me a sane, reactive forms module out of the box. Form controls are the standard way of interacting with the end-user and so the typical front-end application will work heavily with forms in some shape or form (no pun intended). I have yet to find a decent forms solution for React.

- Components should just be views. I like a framework that encourages developers to separate their concerns and get integration code, routing config, state management and the like into a separate layer of the app (and no, react hooks are not a good solution for this. They introduce tight coupling between the view and other app layers - I use them a lot, but they're no substitute for dependency injection).

- Give me pipes. Formatting and manipulating string data is a very typical problem that views need to solve. In React apps you'll typically see low-level JavaScript code doing this type of stuff inside of markup.

In my experience, I like the React way of defining components and functionality a lot better. The errors that Angular spits out from the HTML-templates are difficult to parse. There's also an unfortunate combination of a fractured community and incomplete first party documentation that makes Angular hard to ramp up on.

That said, Angular has a huge advantage that has made developing in it a lot faster for me. It's got everything right there. Angular doesn't have unique functionality, but it starts you off with a standard set of design patterns that stand you in good stead. React is just a frontend and when you're new to the space you don't know what else you need. Frequently, the productivity gain of not having to think about how to solve a problem is greater than solving the problem the "right" way.

Realistically, most teams solve this problem by having a senior team member who can pick technologies and design patterns. I haven't had that luxury on this last project, so I appreciate the Angular ecosystem. Javascript is great, but it's still very wild-west like.

JSX mixing presentation and business logic also looks weird for someone who lived at a time when not doing MVC in PHP was a blasphemy and would not get you a respectable job.

Admittedly AngularJS was horrible but nowadays Angular offers me everything I need while I watch other people moving to Nextjs or whatever latest buzz frameworks for features Angular provides (like server side rendering).

One of the nicest things about React.js is not having to deal with such a layered architecture, you work at the right level of abstraction ("components"), and those components are composable. Some people freak out with JSX but it pays off to finally have a proper GUI pipeline for web apps instead of manipulating the DOM directly, or being limited to directives embedded in HTML.

Long story short, I took 40+ hours of Angular 1.5 code and converted it to React code in a single 8 hour work day without any prior experience in React. I was both impressed and giddy. The next day I merged that reactify branch into my develop branch, and continued on.

I feel that React does components better. I feel that Angular 1.5's introduction of the component sugar over top directives and even components in Angular 2.x just felt shoehorned in as an afterthought.

I couldn't even spend a day trying to figure out how to componantize this app in Angular 2.x let alone 1.5.

Now I'm head deep in learning as much about the ecosystem as I can, Redux, Relay, GraphQL, all that good stuff. I've officially ditched Angular for the React ecosystem.

All that being said, I'm glad HTMX worked out for you!