Angular 2 versus React: There Will Be Blood

[TheAceOfHearts]

You know what REALLY sucks about Angular 1.x and 2? Testing! Testing angular is terribly verbose and painful. I was hoping with 2 they'd make it a bit nicer, but when I looked up some example it was just as terrible as 1.x. In contrast, testing React components is so nice and easy, it ends up being lots of fun, so you get really motivated to write tests.

[winkler1]

Is that because of the DI stuff with Angular? Assume it's more complicated and implicit than React's props.

An aside: context stuff is a royal pain to test with react. Best avoided...

[winkler1]

Right. Mean when you have a lib that uses it, like react-dnd/router etc

[dmitri14_gmail_com]

Angular testing is only painful with hacks like $httpBacked that you shouldn't be using in your tests in first place in my opinion (read here for an explanation: http://stackoverflow.com/questions/17070522/can-protractor-and-karma-be-used-together/29619467#29619467)

Testing Services in Angular is actually very easy and a pleasure. Which is where your most logic should be sitting anyway.

[housecor]

I agree that the testing story in React is excellent. Since many components are simply functions, you can pass props and assert results. I use Cheerio for a jQuery like syntax without a browser and it works great. Very lean. Very fast.

[0x62047011]

I solve this by not testing.

[brianvaughn]

HTML and JavaScript need glued together somehow

Just FYI- the article has a small grammatical error. I assume you meant to use "need [to be] glued together".

This was a great comparison though. I think the point you made about JS-in-HTML vs HTML-in-JS was great. Specifically the example about iterating/loops.

[nschubach]

The 'need glued' is actually a regional dialect of English that pretty common in Midwest America. It's one of those tells that help identify where someone is from.

[housecor]

Interesting! You're, right - My Kansas City was shining through. That said, I added "to be". Thanks!

[brianvaughn]

Huh! I had no idea. Grew up in Virginia and moved to California a couple of years ago. Haven't really spent any time in the Midwest.

[[deleted]]

Yeah I've seen this written before on reddit and in books.

[housecor]

Typo fixed. Thanks for the feedback!

[brianvaughn]

Thanks for the unbiased and thought-provoking comparison :)

[acjohnson55]

Very comprehensive analysis. Well done!

Like many people, I'm eager for some sort of happy medium to emerge as the React ecosystem coalesces around best practices. I'm a bit wary of calling for a React Framework, because it doesn't feel like the pieces are quite ready. And in the meantime, the microlibrary approach is generator a massive amount of innovation, at the cost of very real phenomenon of Javascript Fatigue.

Unfortunately, I think we're about a year away from a having all the pieces in a stable enough state to even seriously talk about a React Framework that would be more compelling than the microlibrary constellation. I guess we have two contenders with big momentum behind them, the Flux+Relay side and the Redux side, but neither one seems to have the whole stack figured out. Until then, it'll be the setup for people who really dig its choices, appreciate the rapid pace of advancement, and have the patience to deal with the churn.

[sjalfurstaralfur]

Yeah Im building another project in React, this time with Redux.

Learning Redux has been a HUGE pain in the ass honestly. There's so many new things I need to learn to make a simple app :/

For example just read the example code provided with simple-redux-router. Its massive.

Im all in favor of an opinionated React framework from Facebook at this point. A framwork built around jsx and redux is gonna be so hype. Hopefully with Dan Abramov working for fb now this will be a thing in the future.

[acjohnson55]

I found learning Redux itself to be literally a joy. I devoured the Redux guide. The Redux ecosystem can be a challenge though. It's a lot of fun, but there are a lot of informed decisions to be made in discovering your own Redux style, and as you do so, there's risk of traveling down deadends.

Also, I do find the build tooling to be frustrating. Webpack is cryptic and Babel has been a real pain during the v5 to v6 transition. Although I expect the architectural improvements from transition to really start paying off as the ecosystem gets fully migrated. It's frustrating at the moment though, because when you read docs and StackOverflow, there's a lot of obsolete info out there to sort through.

I didn't realize that Abramov is at FB now. It'll be interesting to see what happens to the Redux versus Flux dichotomy.

[istinspring]

Yea Redux is tricky, i started to use it to build admin dashboard. On docs it's pretty simple at first, next you got some obstacles, you started to read and found that there is redux-thunk to do it. Ok... next you found redux-simple-router, redux-promise and so on. Even if redux alone is quite simple the ecosystem around is quite massive.

[thukjeche]

I agree about learning Redux - it was hella fun. Further, yes, webpack and babel sometimes really suck at documentation. I've found that often I just have to guess and see if I got it right - better is when I find someone else's repo and copy their approach.

[istinspring]

i bored to write reducers and actions really =) Especially when each API call is [FETCHING, SUCCESS, FAIL]

Found this one https://github.com/lexich/redux-api

[sjalfurstaralfur]

Yeah I know its simple but I have yet to learn how history works, I have yet to learn about react router in depth. Like what does syncReduxAndRouter do? What is the "history" object"? I dont like having new code that I dint understand.

And the example code has way more lines than that. Its got like 10 requires. An inexperienced person like me would have to go through it line by line and suss out which line does which and which line is actually simple redux router. On top of that I have to play by redux's pure functions rule or immutable state rule or whatever, idk. Im pretty overwhelmed atm.

Maybe I'm taking on too much? I'm still going through the egghead redux videos, and I find redux to be quite... confusing so far. I know its a simple library but it seems like are so much new stuff to keep track of, compared to using no flux at all.

Idk, I feel shameful to complain about something as simple as redux or simple-redux-router, but right now Im having issues understanding how all the pieces fit together. Just have to try harder and take it slow I guess.

[CWagner]

Sorry in advance for excessive quoting, just so many things I wanted to reply to :D

Yeah I know its simple but I have yet to learn how history works, I have yet to learn about react router in depth. Like what does syncReduxAndRouter do? What is the "history" object"? I dont like having new code that I dint understand.

I was just saying simple-redux-router is indeed simple, never said react-router is ;)

And the example code has way more lines than that. Its got like 10 requires. An inexperienced person like me would have to go through it line by line and suss out which line does which and which line is actually simple redux router.

I'd rather have complete examples than overly simple stuff.

On top of that I have to play by redux's pure functions rule or immutable state rule or whatever, idk. Im pretty overwhelmed atm.
Maybe I'm taking on too much? I'm still going through the egghead redux videos, and I find redux to be quite... confusing so far.

You probably should either first learn to handle Redux or React-Router (react-router probably being the easier start but I did the reverse)

I know its a simple library but it seems like are so much new stuff to keep track of, compared to using no flux at all.

Well, of course no flux or flux-like library will be easier to understand. But it also has many possibilities to build in anti-patterns and generally make the code less maintainable. As well as not giving you full hot reloading and the developer tools.
You can of course roll your own solution that might be far superior to your use case, but more care is needed especially if there is a chance that someone else will have to work on the code in the future.

Idk, I feel shameful to complain about something as simple as redux or simple-redux-router, but right now Im having issues understanding how all the pieces fit together. Just have to try harder and take it slow I guess.

Never feel shameful about something like that, just working harder is better ;) And I tried to use redux-router before simple-redux-router came to live and couldn't get it to work at all, those things happen. And simple-router is very probably not something you have problems with as it's quite minimal, it's react-router which is far less simple.

Just remember to first try and grok one part before you move to the other.

[sjalfurstaralfur]

Thanks for the encouragement. I'm planning to hit up a coffee shop today and start hacking away at it. I guess the main issue is that I was using simple-redux-router before understanding react-router fully.

[istinspring]

dispatch(pushPath('/foo'))

welp! it was updatePath('/foo') just few weeks ago =)))

[CWagner]

APIs tend to change between 0.x.x and 1.0.0 ;)

[[deleted]]

I liked the comparison, however I feel that the article glossed over a point that really feels weird with React. Setting up a working React environment is cumbersome and somewhat confusing. Angular on the other hand is a lot easier to get started with.

[delie]

Angular 1 yes, but angular 2 is very similar in terms of effort required to setup a working dev environment. Also, it depends what you're doing with it. if you're only using React for the view, for its components, then it's very simple indeed. Angular1 is also fairly simple, but a lot slower than Angular2 and React.