Skip to content
loading...

First Impressions: learning Angular after React/Redux

jen chan on December 17, 2019

Back story: I just started a new job and have to learn Angular, fast. I haven't touched since it was AngularJS (1.x). It's now Angular 8... [Read Full]
markdown guide
 

Hi Jen! Its always hard switching from one well known technology to other which works different, all the different patterns, idioms, approaches, community resources... It's a lot of stuff to process!

That being said many of the description of Angular in this article are imprecise or just incorrect which is easy to understand as the time spent with Angular vs React was considerably shorter ( i guess) and Angular was approached with Angular.js / React pre&existing know how which is not really that applicable.

eg: react does NOT have actions or reducers... Its the Redux library which provides these concepts...

Similarly Angular does not have actions or reducers but it has an NgRx library which is like upgraded redux.because it handles async and side-effects as first classconcepts

Wish you all the best on your learning journey

 

Hi Tomas, thanks for the thoughtful note. And yes good catch, actions and reducers are a Redux thing. In trying to compare like with like, the things I think are similar or different aren't actually there. It's such a stubborn thing to get used to one paradigm of module ecosystems, and certainly too easy for me to conflate the functionality of one set of tools with its availability in another. There's a lot that needs clarifying for sure.

 

To build off Thomas’s comment, ngrx is a set of related redux libraries built with Angular in mind, but at the end of the day, it’s just another redux library.

I would say that the “service & provider” approach you describe is not the best practice in Angular. Most articles I find recommend Redux for Angular just as they do for React.

NB: ngrx is fully compatible with React. It relies on RxJS observable, which work well with React’s...well, reactive, functional approach.

If only ngrx was more promoted in React tutorials...

 

Bwahaha with useReducer(), vanilla React now has both actions and reducers. Watch out, tri-state area.

 
 

I have yet to try writing a project in react with just JS. Hmmmm

 

Man, you should review what you are saying and comparing here. For example, hot reloading is not related at all with change detection

 

Thanks. I intended to compare the difference between local dev on React with that on Angular. I'd like to hear what's wrong with my mental model.

 

Hmm yeah you're right, change detection listens for state changes and actually doesn't change the DOM. Hot reloading does the complete opposite...

 

Whether change detection triggers a render depends on how you’ve setup your Angular component’s change detection strategy. By default, Angular watches all template-bound properties and will re-render.

OnPush, by contrast, effectively memo’s Inputs (read: props), and only re-renders when an Input value or ref has changed.

I just learned about using OnPush to optimize change detection last night. Having spent a few weeks with Angular now I'm less conflicted trying to connect the dots between React and Angular on what I'm confused by. It's taught like two separate schools of thought I can't reconcile yet. Frankly I'm not even sure which I prefer!

 

Angular has different binding architecture somehow.

[] Input Property

() Output Event

[()] Two-way binding

 

Thanks for making those distinctions! Yeah, the binding architecture works totally differently. It could be argued props in React are class properties that are "bound to"/passed down to nested components... but again this is more of a mental shortcut than something that invokes DOM changes

 

Angular Input properties also exist on on the class, are also bound to templates, and may also be passed to child components.

The difference between React and Angular here are minor. Angular gives you more flexibility, but that can lead to bad anti-patterns.

Thanks for adding your thoughts to subsequent concerns! Can you tell me more about what you think are anti-patterns?

 

Hello Jen. Angular has one way data binding also. It really is a matter of choice how you want to bind data in angular.

 

Not to be mean or anything but you shouldn't have written an article about a topic in which you have limited knowledge. This should've been a blogpost on your opinion.

 

This is a blogpost. Blogposts contain opinions. You sound like you know the territory more than I do 🙂. Could you offer some areas I need to re-examine and clarify?

 

Yes, thank you for writing first impressions. They're messy but fresh. It looks like other commenters are already offering corrections and guidance.

Please do offer any pointers if you've used Angular too to ease the adoption🤣

 
[deleted]

I see where you're coming from now. I agree the title trades brevity for accuracy and for other newbies, it's irresponsible. Let me think about a different title

 

I still don't fully understand why Redux is always married with react.

 
 

Yeah I never quite understood why either. There's a lot more flexibility in tooling react though.

 

So would you file Angular in the "Have Used, Would Never Use Again" quadrant like others on the State of JS survey?

 

Used, and will continue to use due to work.
I didn't do the state of JS survey this year.
tbh I need more time investment in any framework in a large scale sense to understand its benefits.
While I'm annoyed at some of the fixed tooling libs, I haven't tried to create too many custom things with it yet, nor tried ngRx

code of conduct - report abuse