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, and this post includes a preamble comparing 1.x with current impressions to abandonees like me.
Update: As quite a few readers have rightly noted, this is a rather fuzzy and premature list of differences. If anyone has any insight on which or what to explore more, I'd love to know!
Disclaimer: This post compares Angular-cli with create-react-app and Redux. I haven't engaged with the OG libs.
I've heard many times that React isn't strictly a framework by definition, but it can be tooled it until it performs like one.
0. Preamble: Angular 1.x vs. Angular Today
- $scope is gone
- components are the new controllers, which are always classes
- binding is now indicated by brackets around directives (i.e. [NgClass])
- change detection does DOM updates
- No more repetitive binding out of class methods; it's replaced by exporting components as classes
- Business logic is handled by services, which come from providers
1. Similarities between React and Angular
- Both support typescript integration, live/hot-reloading, lazy-loading, scoped styles, modular component design, and lifecycle hooks
- Test driven development encouraged by both frameworks' teams: karma for Angular and jest/mocha for React
- Developed with support from big tech companies: Google for Angular, Facebook for React
- Encourage dumb components that are free of business logic
2. The Painful Differences
At this stage, I need to forget exactly what features with the same names do in React.
File Structure
This has got to be my biggest complaint initially. Angular's file structure seems excessive compared to React's. Each component folder contains a component.ts, component.spec test file, and a component.scss file.
Nested (container) components vs NgModules
Both frameworks emphasize the single responsibility principle of planning an app. While users can choose to flavour their own routing with react router, Angular's router module covers most of our routing needs.
React's core team and most avid developers have moved away from the container component pattern to use hooks but for the purposes of comparing like with like, this is as much as I know.
When multiple components perform the same group of functions for a feature in an Angular app, they can be placed into module folders with a .component.module.ts and it's own routing file component.routing.module.ts to further specify which components would become available to the rest of the app.
In React, the routing is controlled by react-router and Provider. The Provider in Angular modules however, don't serve the same purpose. They are simply module properties that import services (think of services as helper functions).
Dev with TypeScript
The Angular boilerplate app comes with Typescript included. Thou shall use TypeScript. As someone who learned React with Typescript this didn't really change how I feel about it, but I could see that being a deterrent. I did notice that type declarations where not needed as frequently compared to developing with CRA, and it may be due to a new version of Typescript being used on my project.
Learning Resources
React has a greater wealth of learning resources and pattern design guides by users of different experience levels. (Shout out @wesbos, @DanAbramov) Over a year ago, I wouldn't touch it due to the need for transpiling through babel, jsx interpolation, webpack config, etc. but there's so many rockstar developers and websites that come to mind for learning React/Redux.
I have noticed however that south Asian YouTubers have cornered the market on Angular tutorials 😁-- a welcome change. My only gripe is that the Angular.io documentation doesn't contain enough visual examples.
Hot Reloading || Change Detection
I've noticed with how quick React and Vue would compile during during local development. Some say it's the use of Virtual DOM, which only replacing differences in state with partial updates, instead of re-rendering pages completely.
In contrast, Angular has change detection, which listens for state changes, but doesn't update the DOM. Depending on what the circumstances are, I've heard it can help or hurt during local dev.
Import statements in JS modules vs Angular modules
Unlike Javascript modules or generic components in react where importing components become necessary the deeper nesting goes, files in each Angular component already "talk" to each other and don't require explicit importing. Modules have a declaration property to specify the components that make them up, whereas the imports simply address in-library modules that need to be made available to a specific module.
Services and Observables vs [Reducers & Actions]
Services contain reusable functions that execute data exchange or transform data–kind of like helper functions.
Every Angular module has a Providers property to specify how which Services are available to them. (It however, has nothing to do with the semantics of React's providers.) Services are injected in the root of Angular apps so that they can be used by any component, however. (See: Dependency Injection)
Using Redux with React, reducers manage and respond to changes in the state. Actions need to be defined and "action creators" are dispatched to update the state and change the view.
Angular doesn't have actions. API requests and events return an observable. The observable is a thing that's like an intermediary: it listens for events, then passes it on to subscribers. It can transfer data to a components, and handle HTTP requests.
Tooling
Since React only operates on the view layer of an application, devs get to choose any library under the sun for things like state management, form validation, data visualization... the list goes on.
The libraries for Angular are baked in during its installation and devs are usually set on the same few libs to do the same things. That saves the mental overhead of trying to create yet another form or button (no need for writing generic components from scratch).
Two-way Data Binding vs One-way Data Flow
This is the most confounding part for me to get used to. Angular's directives enable two-way binding. Every directive treats its DOM property as a model. Changing the view changes the value of the property in the model. You would think there's a million side effects; I'm not sure how they prevent that.
The only aspect of Angular that I've found so far that mirrors unidirectional data flow is its concept of dynamic forms.
Instead of passing props down nested components, input-binding enables this in React.
The Reactive Forms module emulates the Flux architecture of React. In place of actions and dispatchers, a valueChanges observable and subscribe() method tracks changes in the class component. The form model is the source of truth for the control of forms.
Promises vs Thunks
Thunks are one of many library modules used with Redux to enable async actions to dispatch.
Used in addition with observables, Angular takes fetched data and returns them as plain old promises.
These are all preliminary impressions and I have a feeling I'll be updating this over time. Please feel free to correct me or if anyone out there is working with both, I would love to talk!
Top comments (28)
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
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
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...
Man, you should review what you are saying and comparing here. For example, hot reloading is not related at all with change detection
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!
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.
Hello Jen. Angular has one way data binding also. It really is a matter of choice how you want to bind data in angular.
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?
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.
They feel better together.
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🤣
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
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