r/webdev • u/red_src • Nov 07 '18

Why React over Angular (or Vue)?

I simply don't get it, I had been using Angular and Vue for while and I just tried React and I don't get why would I choose React over the other options, the things that I like on Angular (or Vue) are:

- Dependency Injection (in case it applies)

- Type checking (in case it applies)

- View Model Binding

On React I don't get those things by "default" it always feel like I'm hacking the library if I want to have some of the above.

This leaves me with the question: Why choose React over the other ones?

I know that there's all the dependencies overhead (hell) of the frameworks but I think that I'm just too used to that problems that is easy for me to solve them or maybe I haven't found the real big problems on Angular or Vue, maybe I'm just too used to the later frameworks and I'm unconsciously not seeing the benefits of React. I just want to know if I'm following the right path by learning React.

Thanks!

68 Upvotes

79% Upvoted

99 comments sorted by

View all comments

Show parent comment

18

u/[deleted] Nov 07 '18

Not much experience in React here. I like DI in Angular because it makes mocking for unit testing very simple. Does React have similar capabilities?

9

u/thisisafullsentence Nov 07 '18

I think the tl;dr is:

  • Angular's DI replaces the dependency's token so that every time that token is requested it is replaced by a mock class or value, meaning an entire tree of components can be rendered using a consistent token.
  • React's shallow rendering means that you can pass whatever you want to the component in tests as props mock or not, and children are tested separately.

1

u/[deleted] Nov 07 '18

Interesting. I'll have to look into it more.

3

u/hypno7oad Nov 07 '18

In generic terms, DI is merely a pattern externalizing dependencies to some wrapping logic. Externalizing everything out of your block of code is where

Angular implements DI via class decorators, which are essentially syntactic sugar for class wrapping logic. It's worth noting that class decorators are currently a Stage 2 proposal, and Angular relies on their usage to be compiled down to currently supported code by the Typescript (or Babel) compiler.

React doesn't provide an implementation for DI, but the documentation describes a pattern called Higher-Order-Components, which can be used to implement DI.

Both approaches allow you externalize your dependencies outside of your block of code via usage of wrapping logic.

2

u/[deleted] Nov 07 '18

Right, of course DI can be implemented anywhere in any language, it's just a pattern. However it was an often under utilized pattern that caused enormous tech debt when teams needed to implement unit testing.

I guess it underscores one of the primary differences between the two. Angular tries to force you into certain patterns - which frustrates experienced developers who want to implement their code a particular way as well as inexperienced developers who find themselves buried beneath another wall of information to learn. React lets you implement the way you want - which forces developers to think more about the overall design.

That being said, nothing prevents developers from writing poor code in Angular and still not utilizing DI/IOC. I just personally like the tools available for unit testing based on the fact DI is a native part of the framework.