DEV Community

Cover image for How to Avoid Observables in Angular

How to Avoid Observables in Angular

Michael Hladky on October 16, 2019

Angular is an object-oriented framework. Even if there are a lot of things imperatively implemented, some services, and therefore also some third ...
Collapse
 
qdouble profile image
Anthony

Seems like an anti-pattern to go out of your way to avoid using observables with Angular and there doesn’t appear to be any strong benefit in doing so other than laziness in learning something new.

Collapse
 
marcus-sa profile image
Marcus S. Abildskov

Why would you want to avoid functional programming? 🤔
It seems like Angular is not the appropriate framework for you then.

Collapse
 
sebbdk profile image
Sebastian Vargr

Not sure i would put Angular in the functional programming camp based on how it is used, classes for components etc.

But it becomes a lot more to use if you mix FP into it tho. :D

Collapse
 
dolig profile image
Guillaume • Edited

I'm a big fan of react, and it happens that I've been working with angular for more than two years now (you can't always choose 😅 ).

At first, I've hated Observable because I was not able to understand and works with it, and also because frankly the documentation is not for beginners. Took me around 1 year to master and use Observable with ease.

I've tried mostly all the things written in this article and also read a lot of things, like "functional programming with angular", "store pattern in angular", and now "avoid observable in angular".

But please, if you don't like Observable or OOP, then angular is probably not for you, just use something else.

Tweaking, in my experience, always results into a mess.

Collapse
 
softchris profile image
Chris Noring • Edited

nice article. Think you have a little typo

this.result = this.http.get('https://api.github.com/users/ReactiveX')
      .subscribe((user: any) => this.result = user.login);

result would be assigned the subscription, even though you later override it in the subscribe(). I think you mean this:

this.http.get('https://api.github.com/users/ReactiveX')
      .subscribe((user: any) => this.result = user.login);
Collapse
 
oleksandr profile image
Oleksandr

Right!
One more logical thing I would rethink: mentioning where to subscribe: ngOnchanges and ...Check hooks are bad places to subscribe since to create onbservabke every time they are called

Collapse
 
rubenheymans profile image
Ruben • Edited

How about just do it like this :
async foo() {
this.user = await observable.pipe(take(1)).toPromise();
// this.user.id works here
}

Collapse
 
baluditor profile image
Baluditor

I only registered to this site, to say Thank You for this comment of yours. I've had trying to figure out how to to this and your comment ended a 7 hours long search. Thanks!

Collapse
 
rubenheymans profile image
Ruben

I really don't get why this isn't mentioned more. This way you can easily escape the observable horror when you don't need it. Also async await makes you code so much cleaner, most examples use .then() for some reason.

Thread Thread
 
xtealer profile image
XTEALER

It's just true!

Collapse
 
lewislbr profile image
Lewis Llobera

It seems that won't be an option in the future: indepth.dev/rxjs-heads-up-topromis...

Collapse
 
alexndreazevedo profile image
Alex Azevedo

Good article, Michal. I would only suggest a modification in the title because it sounds pretty confusing. Juniors tend to confuse Observables (object) with RxJS (library) and reactive programming (paradigm). Thus it's quite easy for people that read titles upfront to digest the content based on such statement.

The fact is because the Observable object is not avoided at all. They are assigned to the class variables in all examples, what we may consider that they still are in use. Only the subscription is avoided to be directly used in the component implementation.

Collapse
 
vinagreti profile image
Bruno João • Edited

Great poin.

I was going to say:
What about ChangeDetectionStrategy OnPush? We should only throw it in the trash?
We can see that you are doing it really wrong not caring about CPU and digest cicles.
Did you ever write any component, with good performance, that handles a lot of events (click, scroll) without using rxjs and OnPush strategy?
This does not make any sense IMO.
Please, study about OnPush and Async pipe instead of trying to creat such approach.
But you showed a lot of edges of Reactive Programming that takes a lot of time to understand and use with easy.

Sorry

Collapse
 
wojtrawi profile image
Wojciech Trawiński

Epic! 😁 I totally agree with you and based on my experience I do confirm that avoiding frp leads to messy code which is hard to reason about. Unfortunately most companies simply wants to get work done asap and do not care about maintenence. Local dev heroes create non frp code which makes adding new features like playing a jenga tower game 😁 one question which I already as asked you during workshop in Warsaw (but the answer was to subscribe which is in contrary to the art 😁):
How to handle the scenrio: land on the details page and want to create a form and further submit it. Form group is easy to create in a reactive way but upon submission I need the entity id which is kept in the activated route observable. Any idea how to get it without subscribe? 😊

Collapse
 
valentine314 profile image
David Valentine

Lol. Old reverse "IMO, don't do this" right at the end. I strongly agree. One thing not considered is the race conditions you create when you try to do logic on things you've pulled out of observables.

Might want to lead with the fact that this is a bit of an anti-pattern.

Collapse
 
danoswalt profile image
Dan Oswalt

I love the comparisons of different techniques, this gives me a much better feel for the fundamentals of observables overall.

Collapse
 
vivainio profile image
Ville M. Vainio