I read something a while ago that I think really sums the key difference, is that angular and other frameworks inject javascript into html and its awkward. React injects HTML into javascript, and it seems, that way around is a lot more powerful as you have all of javascript to manipulate html rather than having HTML/Templating/Extensions to manipulate Javascript.

The two advantages are speed (it's supposed to be faster) and its closer to the web component standard than react, so if/when web components become mainstream it could be a lot easier migrating from angular2. However, both of those wouldn't be my prime reasons for choosing a framework though.

I think a lot is preference. I think HTML in JS is dirty just like HTML in server side strings. Other people feel the opposite, that putting new tags which are similar to inline onclicks and other events that we moved away from w jQuery is dirty. There is truth to both.

Angular gives a lot of flexibility in code style and structure. You can componetize everything and have all your component files in one folder. You can inline it. Or you can go more MVC style folder structure like I do.

I personally like my html being approachable to junior devs and not being so chopped up and abstracted away from static HTML markup like it might be with React. Not sold on the new tag styles of A2 but I suppose it will just take some adjustment.

> Other people feel the opposite, that putting new tags which are similar to inline onclicks and other events that we moved away from w jQuery is dirty.

Not even remotely the same thing. HTML has a hierarchical structure which isn't a particularly good structure for a web application. Javascript syntax allows far more control over the hierarchy.

Your example is akin to saying putting a tank in an airplane is the same thing as putting an airplane in a tank.

> You can inline it.

Pretty thin separation between inline templates and JSX. But then, I've never understood why people think putting their template in a different file is somehow separation of concerns.

> I personally like my html being approachable to junior devs and not being so chopped up and abstracted away from static HTML markup like it might be with React.

Oh it's abstracted, with completely invalid HTML syntax and template variables. That's not to say that it's bad, I quite like the simplicity of the event/binding syntax of Angular 2. But JSX and Angular Templates are just two sides of the same coin.

> Not even remotely the same thing. HTML has a hierarchical structure which isn't a particularly good structure for a web application. Javascript syntax allows far more control over the hierarchy.

I agree with you on the control but my point was that a lot of people that dislike Angular don't like the idea of putting tags on HTML elements which is very reminiscent to inline onclicks and the hackish approach to apps from yesteryear.

onclick="doSomething()" versus ng-click="controller.doSomething()"

Sure, there's a lot more under the hood with Angular but it looks and feels similarly and it scares some people away toward other approaches.

JS used to have a lot of inline code back in the day. Then jQuery came along and devs moved their JS into separate files but everything was still tied to elements and very frail. It was terrible for apps of any complexity. Now we have a ton of options and there is no consensus. However, maintainability is easier and building robust front-ends that don't break when someone moves a div or renames a class is not difficult anymore.

Angular is my favorite but I'm also liking what I'm seeing from Vue for a lot of applications.

> But then, I've never understood why people think putting their template in a different file is somehow separation of concerns.

We can point our UX designer at this separate file and he can understand it, which would not be the case if it's buried in JS?

> Not even remotely the same thing. HTML has a hierarchical structure which isn't a particularly good structure for a web application.

Is there a "good" structure for a web application that jumps to your mind?

Yes, isolated components with as few components being aware of the application state as possible. This is the fundamental structure if a redux app, which is effectively the point if Web Components.

Throwing on click tags or jquery selectors on a huge HTML document is not a good structure.

I like that summary but I think it is dishonest. Angular doesn't use HTML, it uses strings with templates that use a superset of HTML with barely well-formed special attribute names.

And React doesn't use HTML either. It uses function calls that can be made to look kinda like XML by using a transpiler.

Neither puts HTML in JS or JS in HTML because neither actually uses HTML. Both build a virtual DOM: React does it explicitly with nested function calls, Angular does it implicitly using flat pseudo-HTML templates as strings.

React is really just a DSL for components that looks kinda like XML but if you consider React Native it is apparent that being able to render those components to HTML (on the server) or to the DOM is just an implementation detail of the renderer (i.e. ReactDOM, React Native, React Windows, WebGL, etc).

So Java Servlets was the right approach all this time?

Pretty sure PHP predated Servlets (if not by much).

Which is predated by CGI scripts working conceptually in the same way.

The page/request-oriented model is bad. It forces your code organization to match an implementation detail.

A component model is great though. Wicket is the library that gets it. Whenever I write Angular (or Django, or anything) I wish I was writing Wicket.

One can use the @Component decorator with the template & style options - currently it seems to be the norm to do so, at least until the template compiler is understood more widely (it is pretty fresh), although long term having the template and styles in the same file probably will not be sustainable for more complex components.

Angular 2 has some serious perf advantages over anything else out there, reportedly up to 2x React in some scenarios (i.e. repaint perf). It also is set up for incremental rendering, as opposed to React's blocking rendering loop, which can allow for more flexible UX. With the new bundling system for Angular 2, I believe it is currently a fraction of the size of React (I think the Angular team achieved < 10 KB app framework size, although I haven't checked out the new npm packages to be sure).

React wins out on simplicity though, including how simple it is to communicate between components. React is also currently a lot more mature, with a much more mature third party ecosystem.

Edit: I stand corrected on the size, but the 10 KB minified & gzipped is the Angular team's goal I remember reading.

You don't have to make separate files. You can inline the template in a component

If you want React, just use React.

"Is there any way to use it without making/(being allowed to make) separate HTML templates and CSS files? If not, this is a serious disadvantage" Translation: "Can I sh*t where I eat? If not, this is a serious disadvantage"