Тёмный

Why you should care about DECLARATIVE programming 

Joshua Morony
Подписаться 73 тыс.
Просмотров 17 тыс.
50% 1

My modern Angular course: angularstart.com/
In this video, we look at how the same search filter can be built using both an IMPERATIVE approach and a DECLARATIVE approach (and the benefits of the declarative approach).
Read more: eliteionic.com/tutorials/impe...
Get weekly content and tips exclusive to my newsletter: mobirony.ck.page/4a331b9076
0:00 Introduction
0:46 Imperative Approach
3:16 Declarative Approach
7:43 Conclusion
#rxjs #angular #declarative
- More tutorials: eliteionic.com
- Follow me on Twitter: / joshuamorony

Опубликовано:

 

18 май 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 35   
@TomMcLellan1
@TomMcLellan1 2 года назад
Great side by side comparison... getting comfortable with rxjs and "everything is a stream" mindset is a bit of an investment, but seems essential for state management / ngxs / ngrx
@tanishqmanuja
@tanishqmanuja 2 года назад
Your precise explanation makes it look so easy . Amazing work sir !
@ChauTran
@ChauTran 2 года назад
You earned yourself a sub. Thanks for making this video!
@LarsRyeJeppesen
@LarsRyeJeppesen 2 года назад
Great stuff, thanks
@samucancld
@samucancld Год назад
Great content 👍
@jkevinparker
@jkevinparker Год назад
"'Scuse me Egon? You said crossing the streams was bad!" :) These videos are REALLY helpful. Thanks!
@bagratzakaryan3778
@bagratzakaryan3778 Год назад
good explanation
@mertdy
@mertdy 2 года назад
Really nice video. Thank you for the explanation :) However, is there any performance comparison for these approaches? I could not find it in the article as well.
@JoshuaMorony
@JoshuaMorony 2 года назад
I haven't performed or seen any particular performance comparison between an imperative and reactive approach like this, but I assume any performance difference would be negligible (would be interested to see any resources anyone has on this though).
@supersymmetry2517
@supersymmetry2517 2 года назад
I am a little confused: In my humble opinion this is not imperative vs declarative. This video describes two different levels of abstraction - both - using declarative style programming.
@JoshuaMorony
@JoshuaMorony 2 года назад
Thanks for the comment! I intentionally chose two very similar examples to try to highlight the difference I'm talking about, and it's a kind of distinction that is very particular to RxJS. It is a common view in RxJS that declarative/reactive programming ends when you subscribe. Without subscribe, the source of the observable is connected (unbroken) to its sink in the template. With subscribe, this stream is broken and I then have to manually control how to handle the data I pull out of the stream and then supply it to the template. That is the distinction I am making in the video between what I am calling imperative and declarative. But that's also just my opinion in the end!
@Plasticcaz
@Plasticcaz 2 года назад
Yeah, when he showed his "imperative" example, that looked mostly declarative to me. I associate imperative programming with lots of basic programming concepts like loops, if statements, and mutable state. Declarative programming, as I understand it, hides this from the reader and focuses on WHAT you want done, rather than what the computer will do to accomplish it, allowing the reader to understand what is going on at a higher level of abstraction, rather than having to think about state. Both examples are declarative in my opinion. The second one makes better use of a reactive programming library (I'm not familiar with this one... it's pretty cool). That's just how it looks to me.
@marcel5235
@marcel5235 10 месяцев назад
Now I know why angular introduced signals, as someone who is React developer where everything is declarative, this is nice but holy crap that rxjs is overwhelming stuff. To be able pull out short code I need to know rxjs or hopefully wait for stable signals and use rxjs only when necessary
@nt6494
@nt6494 9 месяцев назад
I think you should take a bit more time understanding RxJs instead of relying on signals, yes signals will take care of 90% of your needs, but RxJs and its operators are nothing to sneeze at when it comes to utility and overall power. Knowing how to utilize RxJs in those 10% of hair-raising cases will only be possible if you've used RxJs for a long time, which you won't be if you move to signals.
@cipherxen2
@cipherxen2 6 месяцев назад
No one in the world would expect that a react coder will understand angular. They like that jsx weirdness so much that they will never appreciate the simplicity of angular.
@marcel5235
@marcel5235 6 месяцев назад
@@cipherxen2 I do not think so. I understand angular, most of my coleagues know angular and most of us can learn any frontend framework. Imho a Little bit judgemental commet from you.
@_Greenflag_
@_Greenflag_ Год назад
I'm so the imperative guy that when I saw your imperative code I though " ah, this is the reactive approach " 🤣😆😝
@sinefinehabitarevolo
@sinefinehabitarevolo 2 месяца назад
The imperative example isn't imperative. It is still pretty declarative. The only difference between the two examples are that in the imperative one, you are subscribing and saving the result as a property whereas in the declarative one, you are directly looping over the stream in the template. The ngFor is doing the subscribing for you.
@husaininajib
@husaininajib 5 месяцев назад
I have question on this. I've tried to implement debounceTime on the searchTerm$. So that the api calls inside client$ will not get spammed. However there's 1 behaviour that I don't like which is when the page loads for the first time, it will apply debounceTime making the API calls been delayed. I'm figuring out is it possible to not apply debounce time when the page loads for the first time? 🤔🙏
@JoshuaMorony
@JoshuaMorony 5 месяцев назад
You can use the startWith operator to immediately emit a value, and if you have debounce further up the chain of operators it will still debounce other values coming through the stream
@aram5642
@aram5642 2 года назад
ReactiveForms, despite having the two observable streams (statusChanges and valueChanges) are otherwise so imperative...
@JoshuaMorony
@JoshuaMorony 2 года назад
Would be great to hear your thoughts further on this if you felt like sharing/elaborating (e.g. are there any particular changes you'd like to see in ReactiveForms?) :)
@aram5642
@aram5642 2 года назад
@@JoshuaMorony An example would be a complex form with control cross-dependencies and dynamic validators - such as: control B is disabled when control A has value of x, or - control C is not required but when control A or B have a certain value, the value of C has to be a number between x and y. Etc. If, in order to achieve that, you need to explicitly subscribe to specific controls or use .setValue() or .updateValueAndValidity() or re-assign Validators in your code - it means the api is imperative and not declarative. With declarative api, you should be able to provide a configuration object with all those conditional behaviors described as properties and callbacks. I think this is what formly and some other packages do. There is currently also a poor connection of the api with the template. You are scolded by console warnings when you use "disabled" attribute, "required" is ignored I think. Yes, a lot to be wished for :) I hope I clarified. :)
@JoshuaMorony
@JoshuaMorony 2 года назад
@@aram5642 Fantastic! Thanks for sharing your insight
@arrowpaine
@arrowpaine Год назад
you don't need to unsubscribe to value changes or http requests. angular handles the subscription. the destroy subject is useless.
@JoshuaMorony
@JoshuaMorony Год назад
You can make a judgement call on not unsubbing from things like HTTP requests - they emit once and then complete so it's generally not going to be an issue. But if you manually created the subscription, Angular doesn't handle unsubscribing for you and it is possible for it to cause problems (i.e. sub to http.get, component is destroyed but subscription still lingering, subscription completes after component has already been destroyed which can cause unexpected behaviour/errors). I prefer to just have an unsub strategy for every manual subscription that is created (which generally is very few anyway)
@wahoobeans
@wahoobeans 11 месяцев назад
The declarative approach seems very coupled to angular because of the async pipe. Without the async pipe, we have to “imperatively” subscribe.
@JoshuaMorony
@JoshuaMorony 11 месяцев назад
The declarative approach still exists outside of Angular and observables. Even with observables (and without the async pipe) you can still be declarative, it's just important that you only manually subscribe "at the end" - e.g. how the async pipe for Angular subscribes when you are displaying it in the template - nothing else is being done with the data in the app at that point. What you want to avoid is subscribing to pull a value out of a stream and the imperatively set that somewhere (e.g. on a class member) and then do something else with that value.
@wahoobeans
@wahoobeans 11 месяцев назад
@@JoshuaMorony I see. Thanks for the explanation. In other words, declarative is basically letting rxjs do all the work as opposed to some of the work
@TheSaceone
@TheSaceone 2 года назад
i know declarative is the recommended way but man it is so confusing compared to imperative
@MikeStock88
@MikeStock88 2 года назад
That's a reason not to use it Code is meant to be easy to read
@mark78750
@mark78750 Год назад
A valid point
@petraveryanov2572
@petraveryanov2572 Год назад
First, you never unsubscribe from formControl.valueChanges - just useless code. Second, you very rare unsubscribe from GET requests - just 99% useless code. (Cancelling GET request when component is destroyed just after it is created? Guess for such components should neglible) As a result you do not need that destroy$ subject at all and now both approaches result in ~same amount of ~same code. P.S. From my experience in real life you always need some extra features: some loading indication? filtered clients count? Disabling input while clients loading? etc. And then it is interesting to see which code is smaller/prettier.
@_Greenflag_
@_Greenflag_ Год назад
I think you don't need to unsub HttpRequest, that's done automatically by Angular
Далее
How to handle errors REACTIVELY with the async pipe
8:30
Why use OnPush in Angular? Not for performance...
13:15
The perfect plank !! 😱😱
00:19
Просмотров 2,3 млн
Imperative vs Declarative Programming
4:44
Просмотров 288 тыс.
The purest coding style, where bugs are near impossible
10:25
Declarative vs Imperative in Functional Programming
17:45
My go to way to manage state in Angular applications
9:43
You might not need useEffect() ...
21:45
Просмотров 137 тыс.
Should we really NEVER subscribe in Angular apps?
13:22
What the Heck Are Monads?!
21:08
Просмотров 66 тыс.