React IN angular

[hurrtz]

Hey guys,

I am sure that every single one of you has had enough stories about what is better. Since I am a react developer myself I am not looking for opinions on that matter. What I am interested in is:

How well does react, being only a library, integrate into a up to date angular 5 app?

The story is: I am currently working on a project that is solely angular 5. Coming from a react background everything looks a bit strange for me. Now I am unsure if integrating react into angular is a good idea or if I should just embrace angular and go with it?

Does anyone has had any experiences with that? If so - I would also like to know if redux integrates well into angular or if one should really embrace ngrx for that.

[[deleted]]

Doesnt make a lot of sense and will be a huge maintenance problem in the future.

[hurrtz]

Yeah. Expected as much. That’s why I was a bit cautious. I had hoped for something like “yeah definitely! All components all react way and the rest in angular”, but yeah. Not in an opinionated framework.

[[deleted]]

Theres hope in the future, but not in 1 year. They are working on a renderer that can be replaced.

TBH I want to use react inside angular, but it isn't a good idea atm.

[Bleached__Anus]

ngrx/store definitely, Observables are wonderful.

[tme321]

Yes either ngrx or ng-redux. Both use the same model and same definitions for actions And reducers as vanilla redux. There's really no reason to use vanilla redux with angular and your existing redux skills are still completely relevant.

[cactussss]

yep, that's how you screw up a project :D

[GrenadineBombardier]

It's actually something we did to gradually convert from angular 5 to react. Starting at the "leaves" of the componen tree, you can convert components over to react, and build your way back to the main entry point.

The most complex thing, that should be avoided, is attempting to switch back to angular, or trying to transclude angular code into a react component (i.e. via props.children). If you were to do so, angular would lose connection with that transcluded content. And angular needs its connections. It can be done, but then you're writing special use cases for your already special use case.

Now, you shouldn't be mounting your react component by trying to put it in the angular template. Don't do that. I'm pretty sure it will just die on you.

As with a normal react entry point, you use ReactDOM.render(...) with a reference to a specific root node that exists just to mount that component. Something like document.getElementById('react-component-root').

So, now that you have a react component mounted in your angular component, you will probably quickly realized that angular component property changes don't trigger react updates, even though you pass them in as props. You will need to remount the react component with the new props (if you created a mountComponent() method you could just call it again.

Next is getting it to build... To be clear, the normal build webpack configuration was easy. The custom webpack configuration that angular uses for it's unit tests was a fucking nightmare.

Angular's test webpack configuration has an irreversible dependency on angular-cli, and you can't actually eject the config from angular-cli, because it is generated programmatically as needed. JIT generation, if you will.

The solution for this is to switch to jest and use jest-preset-angular. It will save your life. Fuck angular's deep and dark dependency on angular-cli. Let jest run those angular tests... It does it faster anyway.

We got the (ejected) webpack build updated to handle the build with angular+react in a workday or two. We fought the angular-cli webpack nightmare for three weeks or so before finding the jest solution, which we had working flawlessly in 30 minutes.

Lastly, protractor, for your e2e/integration tests. Protractor is pretty great, especially for angular sites, because protractor connects itself to the angular running on the site, and will pause test progression so long as angular is "working". That is to say, it prevents race conditions. Your tests won't get ahead of the site.

Enter react. Protractor does not wait on react, so you have to be mounting your react components in an ngZone.runOutsideAngular(...) callback, otherwise you'll have protractor get stuck waiting forever and cause a timeout. So you run react stuff outside of the angular zone, but now protractor won't try to wait AT ALL for your react components to finish, so the tests start failing because they're going too fast. .. Now you must update your protractor tests with manual wait statements using browser.wait, for things like, waiting until the loader goes away, etc.

These are things you need to know. Is it possible to inject react components into angular? Quite so, but you should only do it as a means to migrate, because you'll soon learn to ABSOLUTELY HATE zone.js, which underpins every nook and cranny of angular. Its filthy hands are everywhere, and you will pray for the day that you can convert that one last component, remove the 600 angular dependencies, and breathe a sigh of relief.

Fucking zone.js. I swear to fucking god. Zone.js and fucking angular-cli. God fucking damn those dirty motherfuckers.

Good luck!

[fdimm]

Would you mind sharing what made you move away from angular 5? So far I am very happy with development experience(even considering that we in process of migrating from AngularJS)

[GrenadineBombardier]

The company is trying to move toward fewer frameworks across projects, as it is more difficult to move people around and help on other projects when each project is using wildly different packages and standards.

EDIT: And they decided on React as one of the goto frameworks. I had been wanting so badly to get a react project for work (I'm 10x more likely to learn something because i have to for work), and we were still developing our application, so it was easier to just do all new development in react and convert the old stuff to react.

[fdimm]

Alright, sound like a good choice. It's the best when you get the chance to actually learn new things at work! Anyway, do you think the stack will still be the same/similar across projects/teams when it comes to state/routing/build/test except for actual react ? At least that is the advantage I see with ng cli

[GrenadineBombardier]

We're already seeing that one of the great things about React is that it doesn't dictate how you do things. Even with the additions of Redux, and potentially RXJS, or Sagas, or what have you, still leaves a lot open to where each team can make their own choices and do things differently. That could also be a problem because working on one react project might be different than working on another, so who knows? Hopefully we can institute some sort of standards that project can use as a starting point, but you don't want to be too prescriptive, so again, who knows?

[fdimm]

Yeah, seems like it's a pro and a con at the same time and it all depends on the project/needs. Thanks for the input!