TOP 6 Mistakes in RxJS code

Поділитися
Вставка
  • Опубліковано 22 гру 2024

КОМЕНТАРІ • 110

  • @DecodedFrontend
    @DecodedFrontend  6 місяців тому +2

    To try everything Brilliant has to offer for free for a full 30 days, visit brilliant.org/DecodedFrontend
    You’ll also get 20% off an annual premium subscription.

  • @MichaelSmallDev
    @MichaelSmallDev 6 місяців тому +27

    One mistake I learned about recently: not using `defer` for `valueChanges/statusChanges` observables of reactive forms. In particular, reactively declared variables outside of any hook or constructor. For example, if you have `value$ = this.form.valueChanges.pipe(startWith(this.form.value), map(.....))` and then in `ngOnInit` do something like `this.form.setValue('initial value here')`, then `value$` will not actually start with `'initial value here'` since that happens at a different time. This can be fixed by wrapping the stream* using RXJS `defer`. That allows `value$` to initialize at a later time when the observable is being subscribed to, and that is after `ngOnInit` runs and sets the value.
    edit: good video as always, thank you. And nice talk yesterday.

    • @DecodedFrontend
      @DecodedFrontend  6 місяців тому +2

      Thank you Michael for sharing your expert! I appreciate it a lot 🙌 And thanks for your kind words 😊

  • @haroldpepete
    @haroldpepete 6 місяців тому +46

    i think even angular's creator can learn something from your videos, you're the best

    • @DecodedFrontend
      @DecodedFrontend  6 місяців тому +5

      Haha, thank you for this kind words, but this is actually very far from truth 😄

    • @developmentroselino
      @developmentroselino 2 місяці тому +2

      @@DecodedFrontend then tell us the truth

    • @DecodedFrontend
      @DecodedFrontend  2 місяці тому +1

      @@developmentroselino the truth is that I am a regular developer who doesn't know everything about Angular, still has to constantly learn and especially from Angular framework creators 😉

    • @developmentroselino
      @developmentroselino 2 місяці тому

      @@DecodedFrontend what a wise words, i just learning angular moving from .net webforms. thank you for the spirit of learning

  • @Dimonina
    @Dimonina 6 місяців тому +10

    Mistake 4. Won't shareReplay(1) keep the subscription active even after component is destroyed?
    Afair it will. In this case we can use refCount or takeUntilDestroyed BEFORE shareReplay(1).

    • @DecodedFrontend
      @DecodedFrontend  6 місяців тому +12

      Hey! Thanks for this comment. Yes, indeed. The shareReplay keeps the source subscription to the source observable "alive," which might be a problem if it was a long-living subscription, and usage of refCount can prevent this behavior. For HTTP calls, it is not a big issue since the HTTP call is complete immediately anyway. However, overall, you highlighted a significant nuance of the shareReplay operator, which I should have mentioned but, unfortunately, forgot to do because I was focused on other things. I think I will create a separate video about shareReplay because it is indeed an important piece of information. Ironically, I made a mistake making a video about mistakes :D

    • @Dimonina
      @Dimonina 6 місяців тому +6

      @@DecodedFrontend yep, it would be nice to make a separate video about that. It's a very subtle thing in rxjs and experienced devs sometimes miss this moment, including myself. Thank you for your content!

  • @tarquin161234
    @tarquin161234 6 місяців тому +2

    Thanks

    • @DecodedFrontend
      @DecodedFrontend  6 місяців тому

      Thank you so much for your support 🚀 Much appreciate it 🙏🏻

  • @adiscivgin
    @adiscivgin 6 місяців тому +2

    Perfect explanation of something that is really needed for angular developers around the globe. Saw those mistakes everywhere. You rock, really.

  • @ahmedmotawea2072
    @ahmedmotawea2072 20 днів тому

    Great video to show the issues in small piece of code, hoping to see full list of those edits and how to fix them

  • @MrKOHKyPEHT
    @MrKOHKyPEHT 6 місяців тому +6

    Btw tap operator doesn't modify stream even if tap callback will accidentally return some value so +1 to safety side effects :D

    • @DecodedFrontend
      @DecodedFrontend  6 місяців тому +4

      Yes, that's true :) however, it is worth mentioning that you can mutate the object that “goes through” the tap operator. E.g tap(Val => Val.prop = “new value”) will cause that mutated object will go to the operator after the tap. So you have to be careful here 😉

  • @arthuravanesyan9707
    @arthuravanesyan9707 6 місяців тому +1

    Thank you. Of all those who talk about angular, your videos are the most useful and detailed. I like that you are not afraid to explain some things using source code, it gives a moore deep understanding of the principles of the framework. I have a request: could you consider the microfrontend and the role of angular in it? I think this is a very relevant and interesting topic. For example, it confuses me that in the case of Angular you have to use a custom webpack configuration because it doesn’t seem like the authors themselves approve of this, otherwise they would have added such a feature to Angular themselves.

  • @TibinThomas1993
    @TibinThomas1993 6 місяців тому +1

    Thanks for the content
    Adding few of my leaning below
    1. The use of `debounceTime()`, `delay()`, or any other time-related operators can hinder performance, especially when there are many subscribers.
    2. Late subscription to Subjects can be a challenging issue for beginners to identify and debug.
    3. `TakeWhile` will unsubscribe from the stream when the specified condition is met.

  • @orz5516
    @orz5516 5 місяців тому +1

    common mistakes:
    1. Subscriptions inside functions that triggers multiple times (through DOM events like click, hover etc...).
    2. Creating multiple subscriptions inside angular life cycle hooks when the observable results are dependent on one another and thus creating race conditions.

  • @Kobe24Geo
    @Kobe24Geo 5 місяців тому +1

    Can you make a video about good and bad practices generally in Angular? For templates as well as ts component logics

  • @diego_sabbagh
    @diego_sabbagh 6 місяців тому

    Good job. I knew most of the things you explained (also cause I've already watched the other videos you referenced here) but I still have a tricky question:
    does async pipe unsubscribe from EVERY subscription in the chain? in your example at 9:30 does async pipe unsubscribe also from the valueChanges of searchConfigForm? doesnt it have a limited "range of action" as the takeUnitlDestroyed() ?
    thank you : )

  • @IhorKalchenko
    @IhorKalchenko 2 місяці тому

    great examples, that meet so many times on the projects. thanks

  • @pazzuto
    @pazzuto 4 місяці тому

    Been using Angular for a few years and I still learn things from you. Great video as always!

  • @kaxoonyoe7346
    @kaxoonyoe7346 6 місяців тому +4

    I think you are sitting in the deepest level of angular , very impressive!

  • @eXpertise7
    @eXpertise7 5 місяців тому

    You're really good. This is gold. Coming from Angular Dev with 6 year experience.

  • @SamiullahKhan
    @SamiullahKhan 6 місяців тому +1

    I see the nested observables is asked alot in interviews 😅. How the toSignal works here does it subscribes to observable and return new signal and unsubscribe on component destruction or does it create new signal on new emission, how does these things play out?

  • @alexeyn2281
    @alexeyn2281 6 місяців тому

    Great video! Could you give advice how to prorerly split vendor file to chunks?

  • @NPiki
    @NPiki Місяць тому

    Thank you! Great video

  • @juancarlosfigueroa617
    @juancarlosfigueroa617 4 місяці тому

    Hey Dmytro, great video really enjoyed to realize a couple of concepts I didn't had fresh on my mind, About point number 6 I think that's why is important to know at least thebasics of functional programming, implementing pure functions whenever possible, immutability for parameters and external global class properties is a great nice to have in your toolbelt of programming concepts to master, In addition to that the RxJS operators implement really well function composition so having those before a subscription happens and do all sorts
    of operations before the UI interacts with it makes it beautiful but of course with pitfalls like the takeUntilDestroyed and the side effects catching strategy, the cherry on top in newest angular versions it's to be able to do all of this operations and then jus translate it to a signal using "toSignal".
    Thanks for sharing your knowledge sir, happy coding!.

  • @AmarSingh-uw1db
    @AmarSingh-uw1db 6 місяців тому +5

    Gratitude for the knowledge ❤

  • @tobalhenriquez8233
    @tobalhenriquez8233 4 місяці тому

    What a great video!! Thanks for this. I think you can get even to more people with this begginer aproach!!

  • @mhadi-dev
    @mhadi-dev 6 місяців тому

    Thank you bro.
    Although I stoped coding in Angular two years ago, such content still useful. specially for a NestJS dev

  • @timurbirgalin4704
    @timurbirgalin4704 6 місяців тому

    A very interesting and usefule video! Some of these mistakes I'd made before and my coworkers explained me them.
    But now I have more systematic and deep understanding of all these bad patterns, so thank you so much:)

  • @MadarDoraeMon
    @MadarDoraeMon 6 місяців тому

    3:05 hey i have question ,
    suppose there is a button , get data
    upon invoking these method we will call the rest api ! and get the data , here i am not waiting for the component to be destroyed , as soon as i got the response either sucess or anything i am unsubscribing the Subject,
    because it is no longer required ,
    second time again new Subject will be created
    so if i am unsubscribing onDestroyed then i felt it is wrong , what if use clicked 10 times ! and we are holding the Subscription each time the Subscription will ovveride by new Subscriber , and in the end we are unsubscribing last Subscription , and remaining 9 will still bein the memory !
    this is my research what your call on this !! ,

  • @PawelOlbrys99
    @PawelOlbrys99 6 місяців тому

    Should untilDestroyed(this) from the ngneat library also be used at the end of the pipe?

  • @alph_jvne
    @alph_jvne 6 місяців тому

    My favorite coding content creator. Thanks, Dmytro!

  • @sebastiangutierrezcorrea379
    @sebastiangutierrezcorrea379 6 місяців тому

    Very good video! I learned a lot, your explanations are just clear and consise, thank so much for this content.
    Can you please make a video about i18n specially using @angular/localize, I haven't found a clear guide for the complete workflow (develop->extract->translate->merge) and loop again. How looks like this in an large/enterprise basecode, even the official docs are weak in this topic, how do Google use this in production, I will apreciate so much

  • @pierajzan
    @pierajzan 5 місяців тому

    I would love to see more angular "mistakes" videos. Through your experience you have seen many bad practices and can explain why they are bad. I hope for such videos :)

  • @amaizingcode
    @amaizingcode 6 місяців тому

    Great video! I hope you can share more tips like these. I think they can benefit the community a lot. Thanks!

  • @LuizFMPaiva
    @LuizFMPaiva 5 місяців тому

    Amazing video.
    thanks Dmytro, u never disappoint ♥

  • @theanswer1993
    @theanswer1993 4 місяці тому

    First time that I knew all the things you mentioned in the video. Kind of proud of myself 😂 Great video!

  • @andreifara9558
    @andreifara9558 6 місяців тому

    Great content as always! Even experienced devs can learn something from these tips.

  • @stanislautsishkou5632
    @stanislautsishkou5632 5 місяців тому

    Thanks for the perfect topic you've covered! Would like to add that do not recommend to use 'tap' operator at all, because it is always a side effect that even impossible to control. Such operator must be banned by the rules. All side effects have to be well-described as a part of behaviour, by creating the additional subscriptions that you could remove, add, event turn on-off by some condition.

  • @noob_dodger
    @noob_dodger 6 місяців тому

    Thank you, Dmytro!
    I just started learning rxjs and angular and some things are not quite clear to me. For example, is it possible to avoid manual subscripting in components for POST requests using async pipe?

    • @elmalleable
      @elmalleable 6 місяців тому

      i believe those unsubscribe after the call completes. I might be wrong but it should be in the docs somewhere

  • @FlorianBinder
    @FlorianBinder 6 місяців тому

    Thanks - I've learned a lot from this video!

  • @EmilioDegiovanni
    @EmilioDegiovanni 6 місяців тому +4

    Great job Dmytro! RxJS is so big that every day I learn something new

    • @DecodedFrontend
      @DecodedFrontend  6 місяців тому

      That is true :) I am glad that you learned something new from the video 😊

  • @arthurfedotiew3609
    @arthurfedotiew3609 6 місяців тому

    That was indeed a compendium of mistakes out in the wild, good job, Dima!)
    Regarding warming up observables, would you suggest using `shareReplay` or rather `share` with explicit configuration (connector, resetOn..., etc) to avoid misabiguity?

  • @nickolaizein7465
    @nickolaizein7465 4 місяці тому

    Thanks you, very nice!

  • @Marlon-ly4ui
    @Marlon-ly4ui 6 місяців тому

    Thank you @Decoded Frontend i think i have all of them more or less in my code , time for fixing!

  • @premkrishnan9019
    @premkrishnan9019 6 місяців тому

    Thanks for the clear explanations ❤

  • @creativemember
    @creativemember 19 днів тому

    Mistake nr 5: in the final version you react only to the changes made to userName, right? Which means, that setting a new Result Limit will not trigger a new request? Correct me if I'm wrong. Can we provide to DistinctUntilKeyChanged an array of keys? Btw, I love your videos, it's not so easy to find quality content for advanced programmers.

  • @juangoria3517
    @juangoria3517 6 місяців тому

    Amazing video. There's always something to learn!!!

  • @justinryu9387
    @justinryu9387 6 місяців тому

    Thank you very much for this video.

  • @nelson3391
    @nelson3391 5 місяців тому

    Thanks a lot!

  • @tz2014
    @tz2014 6 місяців тому

    Awesome, it's a always brilliant to learn from you

  • @balakumar5681
    @balakumar5681 6 місяців тому

    much needed, thanks!

  • @NigelStepney
    @NigelStepney Місяць тому

    More like this, please!!!

  • @TheSysmat
    @TheSysmat 6 місяців тому +4

    Nice, linter for take until

  • @VforVanish
    @VforVanish 6 місяців тому

    This was very interesting,thanks!

  • @INDUSTRYIND1
    @INDUSTRYIND1 6 місяців тому

    Can we have a video enterprise project setup

  • @goombagrenade
    @goombagrenade 6 місяців тому

    Thanks for another great video!

  • @arthurfedotiew3609
    @arthurfedotiew3609 6 місяців тому

    My top biggest mistake with rxjs in angular context for a long time was using it at places where it wasn't needed and not using it where it was.

  • @ugochukwuumerie6378
    @ugochukwuumerie6378 6 місяців тому

    Awesome content. Thank you

  • @timurmartinez4093
    @timurmartinez4093 2 місяці тому +1

    Thanks for the content. What is your nationality?

  • @andrewparker7603
    @andrewparker7603 6 місяців тому

    Awesome video 👍

  • @aresinodev
    @aresinodev 6 місяців тому

    Awesome 👏👏

  • @balintcsaszar6831
    @balintcsaszar6831 6 місяців тому

    nice to mention that rxjs eslint rules are exist to prevent these mistakes 👍
    and yes I know....I saw many project without proper eslint rule set, it is sad

  • @osamaalnuimi4548
    @osamaalnuimi4548 6 місяців тому

    Super
    Thank you 🎉

  • @StephenMoreira
    @StephenMoreira 6 місяців тому

    Great tips.

  • @tarquin161234
    @tarquin161234 6 місяців тому

    Great video. However, in step 3 you suggest we use a signal but I still don't see what you gain from that. It's just more code.

  • @lsak9703
    @lsak9703 Місяць тому +1

    Здравствуйте! Вы в Австрии живете?

  • @igorparampam5984
    @igorparampam5984 6 місяців тому

    Great video!

  • @deadlyecho
    @deadlyecho 6 місяців тому +1

    Injecting the DestroyRef just to avoid init the subscription logic inside OnInit instead of the Constructor... Typical Angular.. I am like "Brother Ugh... Brother Ugh..." 😂😂

  • @Ghost2012qte
    @Ghost2012qte 2 місяці тому +1

    Amazing

  • @ivanco_s
    @ivanco_s 6 місяців тому

    Grate vidio, thanks

  • @ExploringCodeCrafter
    @ExploringCodeCrafter 6 місяців тому +1

    Nothing learned, still a great Video for beginner🎉

  • @tz2014
    @tz2014 6 місяців тому

    Who else liked it before even watching the video thinking it's always quality content

  • @hengkeatyam3700
    @hengkeatyam3700 6 місяців тому +1

    For an RxJS expert, this is basic knowledge. For an RxJS beginner, it is damn complicated😅

  • @khoaanh348
    @khoaanh348 5 місяців тому +1

    ur content is very very hepfuylly

  • @HuyLe-zx8ko
    @HuyLe-zx8ko Місяць тому

    awesome

  • @IbrahimKwakuDuah
    @IbrahimKwakuDuah 6 місяців тому

    I would have added all the code to the 'valueChange' in the example

  • @exsitewebsolution6803
    @exsitewebsolution6803 6 місяців тому

    6 out of 6😁. lots of code update to do.

  • @elmalleable
    @elmalleable 6 місяців тому

    not me writing a jotai clone using rxjs to avoid directly using rxjs directly, which supports observable composition,
    give it any two or more observables and provide a function that computes your derived observable, it handles all the headaches so you can just code instead of wondering
    is this hot, is this cold, did i unsubscribe, should i call this or that in the right order.
    why are we still dealing with raw rxjs at this point after it has been out for so long
    just like reduxToolkit takes the pain out of working with redux
    some already already made a rxjs lib that supporst composition. will probably edit this comment when i remember where i found it.
    anyone else thinking rxjs should have been simplified by now?
    like a library on top of rxjs that can catch these or provide simple constructs and pattern functions that should deal with most of these issues.
    rxjs has been around for far to be dealing with so many gotchas and edge cases.

  • @amrelsher4746
    @amrelsher4746 Місяць тому

    wow🥰

  • @headiezee1
    @headiezee1 6 місяців тому

    This is the best way to the show impact of rxjs mistakes and best practices: show code and results in dev tools

  • @Edgars82
    @Edgars82 6 місяців тому

    In mistake nr3 you did mistake. Should add sharereplay to observale if doing more than one async pipe to same observale.
    Edit. Ok in mistake nr4 you fixed mistake nr3 😅

  • @doslass
    @doslass 6 місяців тому

    Неймовiрна англiйська!

  • @LuciusFrederica
    @LuciusFrederica 2 місяці тому

    Hall Larry Garcia Mark Young Deborah

  • @etexalbania7301
    @etexalbania7301 6 місяців тому

    Why overcomplicate this basic filtering, when users can have a button and after btn click you call rxjx for filtering. This situation are no benefit for nobody, the user does not need real time filtering, he needs just filtering to work and to have correct results. Angular made things more difficult with this kind of examples they promoted with rxjs library

    • @DecodedFrontend
      @DecodedFrontend  6 місяців тому

      Hey 👋🏻 Thanks for your comment. The “overcomplicating“ you’re referring to, is actually a UX pattern, which doesn’t have any direct relation to Angular or RxJS. Those 2 are just tools that allow you to implement this particular behavior. If you need something simpler - just implement it. Angular doesn’t force any certain UX patterns.

    • @etexalbania7301
      @etexalbania7301 6 місяців тому

      @@DecodedFrontend thank you for the reply, you did a great video, but we have also to consider the time that developers including you spent on studying rxjs operators for such behaviors, considering also the fact that it will become optional in angular rxjs library. So my point is why creating such UX patterns, rather than having all the parameters passed as a query string after a button click and get the results, that is what I meant by overcomplicating things, and I did not mean it for you personally but for the whole frontend ecosystem in general with this fancy filtering all over the js frameworks

  • @anastasiia6513
    @anastasiia6513 6 місяців тому

    🥸😎🤓🥸😎🤓🥸😎🤓

  • @bleed8028
    @bleed8028 6 місяців тому

    probably im wrong, but sometimes see something like this:
    stream$.pipe(
    ...any logic
    ).subscribe(value => this.subj$.next(value))
    so, guys in my team often use useless subjects and move values from observables to subjects
    please let me know, if my comment is correct, im newbie in angular and feedback will be useful for me

    • @volodymyrusarskyy6987
      @volodymyrusarskyy6987 6 місяців тому

      It all depends on the code that you didn't provide.
      Technically proxy subjects are not required BUT there might be a case when a stream emits a value before a component can subscribe to it (for example, async pipe is not executed due to parent IF-statement being falsy), so the value is lost. Subscribing to a stream in a way you showed ensures that the value is preserved and can be used anytime.
      Without a context it is hard to say what is going on in your code and what was the original intention of your colleague.

  • @PawelOlbrys99
    @PawelOlbrys99 6 місяців тому +1

    Should untilDestroyed(this) from the ngneat library also be used at the end of the pipe?

    • @DecodedFrontend
      @DecodedFrontend  6 місяців тому +1

      A quick check shows that this operator relays also on takeUntil - github.com/ngneat/until-destroy/blob/master/libs/until-destroy/src/lib/until-destroyed.ts#L61
      So my assumption would be that untilDestroyed should be also placed in the end. However, I would recommend to double check it with the author of the library because I didn't work with this library before and I can miss something.

  • @anandu06
    @anandu06 6 місяців тому

    Great video ❤