DEV Community

Cover image for First Impressions: learning Angular after React/Redux

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...
Collapse
 
tomastrajan profile image
Tomas Trajan πŸ‡¨πŸ‡­

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

Collapse
 
neolefty profile image
Bill Baker • Edited

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

Collapse
 
jenc profile image
Jen Chan

πŸ˜‚πŸ˜‚πŸ˜‚

Collapse
 
jenc profile image
Jen Chan

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

Collapse
 
jenc profile image
Jen Chan • Edited

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.

Collapse
 
jefftopia profile image
Jeff • Edited

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.

Thread Thread
 
theodesp profile image
Theofanis Despoudis

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

Collapse
 
rogerpadilla profile image
Roger Padilla • Edited

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

Collapse
 
jenc profile image
Jen Chan

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

Collapse
 
jefftopia profile image
Jeff

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.

Thread Thread
 
jenc profile image
Jen Chan

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!

Collapse
 
jenc profile image
Jen Chan

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.

Collapse
 
emmanuelagarry profile image
emmanuel

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

Collapse
 
awakeel profile image
Abdul wakeel • Edited

Angular has different binding architecture somehow.

[] Input Property

() Output Event

[()] Two-way binding

Collapse
 
jenc profile image
Jen Chan

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

Collapse
 
jefftopia profile image
Jeff

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.

Thread Thread
 
jenc profile image
Jen Chan

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

Collapse
 
seanmclem profile image
Seanmclem

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

Collapse
 
jenc profile image
Jen Chan

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

Collapse
 
eneajaho profile image
Enea Jahollari

They feel better together.

Collapse
 
alexaegis profile image
AlexAegis

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.

Collapse
 
jenc profile image
Jen Chan

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?

Collapse
 
neolefty profile image
Bill Baker

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

Thread Thread
 
jenc profile image
Jen Chan

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

Collapse
 
Sloan, the sloth mascot
Comment deleted
 
jenc profile image
Jen Chan

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

Collapse
 
steveblue profile image
Stephen Belovarich

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

Collapse
 
jenc profile image
Jen Chan

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