Can angular and react play together?

Question

I really am coming to love angular, but react is getting a lot of attention. Are they really opposing forces?

Is it a good idea to use react and angular together? Could I? Should I?

What are the pros and cons of mixing them?

React is for UI, but angular can handle the controller and the view...but is react better at handling the view? Can we make a better app by relegating angular to the controller only?

Any good resources for doing these things?

One thing I do like about angular that seems to be less true with react is that angular really allows you to have separation of concerns, whereas react starts to confuse this a little. It seems to be contrary to the angular-way, at least.

Answer 1

As someone who has built apps in both, I can say that angular causes some hurdles when it comes to certain integrations and newer libraries and tools. When it comes to third party packages in general it's way behind, and it feels like it's a second class citizen to most npm libraries at best.

The biggest advantages I see in working with react compared to angular comes from the available libraries, and the simplicity around the 'everything is a function' approach.

• Component libraries like Mantine and shadcn are super clean (depending on what you're looking to build) and update often compared to angular material.

• Tanstack query and RTKQuery: Both of these libraries add a layer of abstraction to your api calls that make async code so much easier to deal with, and often leads to a better dx/ux (they allow you to think of your api calls as your 'external state' and have readily available tools to cache, dedupe, add loading and error states, and invalidate existing api calls).

• Tanstack Router: This is a super cool (albeit new at the time of writing this) library to handle routing in ways that allow you to do all kinds of cool things (too many to list, check it out here: https://tanstack.com/router/latest)

• Component composition. This isn't a library, but it's the idea that you can pass full on components down to other components as props. It opens the door to be able to make components reusable without adding a ton of props. Angular doesn't seem to have a direct comparison to this that I've tried, and the 'template' or 'contentChildren' approaches I've seen online are so confusing it's not even worth doing in my opinion.

While a lot of these libraries eventually get community adaptation layers to make them compatible with angular, I'd be hesitant to use them in a long term production build. They were not made with angular in mind, and in my experience I seem to run into the occasional 'where do I even begin' kind of bug more often than I'd like when trying to do so.

The good thing about angular is they make upgrades easy and straightforward, and it can do all the things you would need an app to do. It added some signal based approaches recently that could enable it to be very performant similar to solidjs (though state may end up hard to maintain in some of these scenarios), and it's fairly easy to structure an app in a commonly recognizable way (to other angular devs).

Personally I'd say react > angular for these reasons. There may things within the angular ecosystem I'm missing, but my experience with react has been more enjoyable once I got past the initial learning curve.

For what it's worth I was quite happy with angular before, and very well versed in rxjs and orchestrating the inevitable long chains of async code that you get with angular. I still manage a fairly sizable codebase in angular as our company moved to react. I'd recommend giving some other frameworks a shot. React has a bigger ecosystem and can make life easier, solidjs/vue/svelte are said to have good dx and can be -blazingly fast-.

Answer 2

Are they really opposing forces?

In some sense they are, and in some other sense they aren't. People are definitely using React inside Angular directives, but they mostly do that to get a performance boost and not because they think React is awesome. And if you're only looking into React for better performance, you're really missing out on the value proposition with React.

I would say that they are opposing forces in that they solve the same problems. Even though the argument that React is just the V in MVC and Angular is a "full blown framework" gets thrown around a lot, Angular and React are very comparable.

Angular has controllers and directives (as well as services and factories), whereas React only has components. And because of this, it's easy to interpret that as Angular being a more complete framework. But let's dissect this.

Controllers

React doesn't contain anything called a Controller, but there's a concept in the React world called a "view controller", which maps pretty well to Angular controllers. A react "view controller" is defined as any other React component, but it does minimal rendering. Its concern is data/state management, and then passing that state down to view components which then renders that data/state.

A simple example would be:

var ViewComponent = React.createClass({
  render() {
    return (
      <ul>
        {this.props.items.map(item => <li>{item.text}</li>)}
      </ul>
    );
  }
});

var ViewController = React.createClass({
  getInitialState() {
    return {
      items: []
    };
  },
  componentDidMount() {
    SomeStore.getItems()
      .then(items => this.setState({items: items}));
  },
  render() {
    return <ViewComponent items={this.state.items} />;
  }
});

So the ViewComponent here is concerned about the specifics of rendering HTML, and the ViewController is concerned about getting and managing data which it passes to the ViewComponent.

Directives

I don't think anyone argues that the concept of Angular directives maps pretty well to React view components.

Services and factories

This is something that exists in Angular just because it has the concept of Dependency Injection, and basically the only argument for "Angular is a more complete framework than React". You could argue for days if Angulars way of DI is a good fit in a language like Javascript, and if Javascript really needs something like it since it's so dynamic, but let's not do that.

Instead of creating its own module system like Angular does (and I think we can all agree that Angular modules in themselves add very little value), React allows you to use any module system you like. Transpiled ES6, CommonJS, AMD, plain old globals, etc. The community have pretty much agreed on ES6 and CommonJS, which is a good thing (and Angular is moving in that direction with Angular 2).

So if DI is your thing, it's very easy to implement together with a good module system. And there's even a really interesting approach of a completely new take on DI in React from Pete Hunt: http://jsfiddle.net/cjL6h/

Is it a good idea to use react and angular together? Could I? Should I?

I would only do it if you're planning to move to React down the line. Your application will be harder to understand and more complex, since you have to know both Angular and React. That said, a lot of people seem to be using React inside Angular, so this is just my opinion.

React is for UI, but angular can handle the controller and the view...but is react better at handling the view? Can we make a better app by relegating angular to the controller only?

Like I said before, this is a common misconception. Angular and React solves the same problems, but in different ways. A benefit of not tying your business logic layer to the Angular module system is that it's easier to migrate to something else. A lof of people use a Flux architecture together with React, but there's nothing React specific with Flux. You can use the Flux ideas with any framework.

One thing I do like about angular that seems to be less true with react is that angular really allows you to have separation of concerns, whereas react starts to confuse this a little. It seems to be contrary to the angular-way, at least.

I very much disagree with this. I find my React applications to have better separation of concerns than my Angular applications (and I've used Angular a lot). You just have to understand the React way of thinking, and it's also a good idea to learn what Flux is all about. I'm not saying that you can't write great apps in Angular, it's just my experience that it's easier to "fall into the pit of success" with React than with Angular.

Angular has a two-step learning curve. At first, you create a controller with a scope, add an array to the scope and print that out with an ng-repeat and you're awestruck by how simple that was. You add a directive, which is a little more difficult to grasp, but you copy and paste it and it works. Yeay! Then as you dig deeper, you hit the second step in your learning curve where you have to start to really understand the internals of Angular. You have to know that scopes inherit from each other with prototypal inheritance and the consequences of that (need a dot in all ng-model expressions, etc). And what's up with directive controllers? What are they and how do they compare to regular controllers? And what's transclusion? And someone told me that I need to perform this and that in the compile step of my directive, what's that?

With React, the initial learning curve is a bit steeper. But once you're over it, there's no second step. Learning Flux could be considered a second step, but learning Flux gives you new knowledge that carries over to other Javascript frameworks as well, something the "compile step in a Angular directive" does not.

Another big advantage that React has over Angular is that it's mostly just Javascript. Properties on React elements are just Javascript objects/functions instead of magic strings like in Angular attributes. This also means that your regular linter can tell you if there's an error on your callback attribute expression. In Angular, you have to run the code to see if it works.

And since Javascript already has block scope, you don't need to worry about prefixing your element names with something that makes them unique.

So am I saying that Angular is worthless and that you should move to React? No, I'm not. A lot of companies have invested a lot in Angular. But if you ask me, there are more quirks and oddities in Angular that you really have to know about if you're going to build a maintainable application. You should also think about the fact that Angular 2 is a complete rewrite, and it has taken a lot of inspiration from React (which is great!).

Answer 3

Just a thought : Yes we can use both into single project But this is good for learning purpose but the same project hard to maintain and costing is more as per current situation

Answer 4

Extjs is a contemporary if not direct replacement of React and Angular. One tangential answer is take a look at ExtReact. ExtReact is ExtJs's attempt to play well with React. The benefit of which is reusability of React components within Extjs Applications.

Answer 5

If you do finding yourself using Angular and React together, https://github.com/bcherny/ngimport is a really nice bridge between the two. It lets you share services/providers/factories/values/constants between Angular and the outside world by import/requireing them like you would any other code. Hope this helps!

Answer 6

Yes you can, as @Edward Knowles stated, you should use directives to make use of React. Although you can use ngReact, you also can create directives easily to make use of React.

In Angular, directives are the best way to integrate "View Oriented" components to your angular application, and React is one framework much oriented to presentation/view layer.

Since React uses selectors to append and render portions of your page, you may create a directive that works within angular in a way like this:

1. You gather data and manipulate it in your angular logic through services and controllers (Service and Data Layer)
2. Then, the directive receives and may manipulate that data (Kind of Model layer)
3. Then the directive calls React and passes it the information to render properly your info as you want using React handy functions. (View Layer)

Here is a great and rather short video on the integration of Angular + React + D3 for creating a basic chart.

Answer 7

Yes you can using a directive ngReact. There are some use cases where you might want to do that, however with Angular 2 coming this summer, I would hold out trying to implement it just yet.

As for speed you should watch this great talk during ng-conf earlier this year.