RxJS Top Ten - Code This, Not That

แชร์
ฝัง
  • เผยแพร่เมื่อ 6 ส.ค. 2024
  • Another episode of "code this 💪, not that 💩" looking at ten important concepts in RxJS and how to avoid common anti-patterns. fireship.io
    - Source Code github.com/fireship-io/175-co...
    - ReactiveX reactivex.io/
    - print method code gist.github.com/codediodeio/e...
    #RxJS #JavaScript
  • วิทยาศาสตร์และเทคโนโลยี

ความคิดเห็น • 292

  • @Fireship
    @Fireship  5 ปีที่แล้ว +165

    RxJS has really helped me level-up as a JS dev, but I always feel like there's more to learn. BTW, I used zero-config webpack and plain JS to run the code. Source code is in the video description.

    • @MK-sh1sm
      @MK-sh1sm 5 ปีที่แล้ว +4

      Thanks for the video. It is an excellent summary. Do you think you can also cover how to write tree-shakeable packages?

    • @MarcoSync
      @MarcoSync 4 ปีที่แล้ว

      I really want to see RxJS in depth using Angular and Firebase! Maybe a new course? #Go🔥🚀 🤓

    • @aidemalo
      @aidemalo 3 ปีที่แล้ว

      pipe(share()) description messed up i think, if you will use interval() for example, both subscribers will get the value, without need of shareReplay() 5:34

  • @troythompson2
    @troythompson2 5 ปีที่แล้ว +298

    Been working with RXJS for years. This video just covered hundreds of pages of documentation. Thanks Jeff!

    • @Fireship
      @Fireship  5 ปีที่แล้ว +37

      Haha, does documentation even exist? I always use 3rd party resources for RxJS.

    • @pedrob.lescanopasquet8460
      @pedrob.lescanopasquet8460 5 ปีที่แล้ว

      I was thinking all the video the same thing

    • @DavidSmith-ef4eh
      @DavidSmith-ef4eh 5 ปีที่แล้ว +2

      I guess I am lucky that I've watched this video before reading the documentation...

    • @ultimatesheep
      @ultimatesheep 2 ปีที่แล้ว

      His name is jeff?

    • @jp46614
      @jp46614 2 ปีที่แล้ว

      that library is so useless it's just for lazy people

  • @majid70111
    @majid70111 5 ปีที่แล้ว +112

    If there would be a nobel prize for teaching dev stuff in an easy way this guy should get it!
    Thanks jeff :)

  • @realchrishawkes
    @realchrishawkes 5 ปีที่แล้ว +37

    This is awesome, thank you for sharing!

  • @patrickmullot73
    @patrickmullot73 5 ปีที่แล้ว +68

    Easy peasy! I love RxJS, so powerful! You can do really amazing stuff with it, but the most interesting part is the intellectual challenge it puts you through!

    • @Fireship
      @Fireship  5 ปีที่แล้ว +14

      Totally, RxJS and TS are two tools that have really helped me level-up as a JS developer in recent years.

    • @swaminathbera6407
      @swaminathbera6407 3 ปีที่แล้ว +1

      @Fireship can you make a video on learning path , or how to read docs. I'm stuck at reading docs, because I can't understand the complex syntax writing

    • @swaminathbera6407
      @swaminathbera6407 3 ปีที่แล้ว +1

      Or How to traverse through docs

  • @alexkrauchi9535
    @alexkrauchi9535 5 ปีที่แล้ว +1

    It is insane how much you're able to break down complex topics to the essentials. Awesome, thx!

  • @NavedRasul
    @NavedRasul 5 ปีที่แล้ว +2

    I find Fireship tutorials to be intuitively graspable. This one is, in particular, very well formed and effectively elaborated. Well done guys! 👍

  • @diabolo1
    @diabolo1 5 ปีที่แล้ว

    Thanks for keeping up with the videos! Your reviews help me keeping up to date!

  • @SondreSrbye
    @SondreSrbye 5 ปีที่แล้ว +33

    I didn't fully understand RxJS before this. Thx a lot

  • @dominikseljan3043
    @dominikseljan3043 5 ปีที่แล้ว +6

    Great video Jeff! I hope you make more of them for RxJS .

  • @deyanshotev3137
    @deyanshotev3137 3 ปีที่แล้ว +2

    I've never learned so many things for 15 mins in my development carrier.
    Insane!
    Thank you!

  • @WolfrostWasTaken
    @WolfrostWasTaken 5 ปีที่แล้ว +3

    Hours and hours spent on the RxJS docs and I realize that I could have just waited for this video! ahah :D Please keep up the good work

  • @zepipoco
    @zepipoco 5 ปีที่แล้ว

    Nice! You really nailed this one Jeff! You just took knowledge that took me months into a 15 min vídeo! Can't wait to see a more advanced followup!

  • @NAMBINRAJAN
    @NAMBINRAJAN 5 ปีที่แล้ว

    One of the ever best channel i think, will help my js career forward.
    Though i had to watch any of video twice.....
    My search starts from your videos....
    Stay blessed 🙏..expecting more such pratical videos..

  • @ImperiumLibertas
    @ImperiumLibertas 5 ปีที่แล้ว +11

    Jeff back at it again with the amazing tutorials! You have answered so many of my questions. I am always sure to share your videos with my co-workers. You have a gift for demonstrating complex concepts in bite sized clips..

    • @Fireship
      @Fireship  5 ปีที่แล้ว +1

      Thank you! This one was really difficult to keep short and only covered a small fraction of the available Rx operators.

    • @ImperiumLibertas
      @ImperiumLibertas 5 ปีที่แล้ว

      When you have people calling rxjs easy, you know you've done right.

  • @pax4698
    @pax4698 5 ปีที่แล้ว

    Huuugely helpful. Thank you very much! Please consider making more more videos on RxJS.

  • @ikezedev
    @ikezedev 5 ปีที่แล้ว +1

    This is so cool..... I can understand cos I once set out a day to try my hands at all Rxjs operators, this video just saves you months of stress. Thanks Jeff

  • @bradleytaniguchi1187
    @bradleytaniguchi1187 5 ปีที่แล้ว

    I think I learned more watching this video than reading docs all over the internet on RXJS! Great vid!

  • @BraxtonDiggs
    @BraxtonDiggs 5 ปีที่แล้ว

    amazing work! Been using rxjs and didn't fully grasp what I was doing until this video

  • @georgiyzhuravlev9350
    @georgiyzhuravlev9350 5 ปีที่แล้ว +5

    Great video, thanks! There are tons of RxJS operators out there and some of them (besides most commonly used shown in this video) are still confusing. Or maybe unnecessary (which is not very likely :) Very interesting topic, please go on!

  • @AxelRock
    @AxelRock 5 ปีที่แล้ว

    Thank you ! I used for a while, but didn't quite get the nuances between some of these operators. It was super useful.

  • @GabrielLima-og5qd
    @GabrielLima-og5qd 5 ปีที่แล้ว

    The best video about RxJs on TH-cam. People need to understand that this is not for beginners and if you read RxJs documentation and understand the minimal you'll see why this video is so good.
    To the author (don't know your name): keep doing amazing videos like this, well edited, in a great pace and straight to the point like you're doing. We need more channels like yours in TH-cam.

  • @dallinparker2387
    @dallinparker2387 4 ปีที่แล้ว

    Thank you for the amount of content you put out, the quality of that content, and sharing your knowledge.

  • @augustineri93
    @augustineri93 5 ปีที่แล้ว

    This is the first video I have seen on your channel and man you have cleared up a lot about RxJS. This is awesome... definitely subscribing and keep it up

  • @bennakaska7472
    @bennakaska7472 5 ปีที่แล้ว +1

    Excellent way to simply the complex with examples on when developers may want to use different parts of rxjs

    • @Fireship
      @Fireship  5 ปีที่แล้ว

      Thank you Ben!

  • @mittalsmiti
    @mittalsmiti 3 ปีที่แล้ว

    It is the best video on RxJs I have come across so far! Very well explained and to the point

  • @puriajahanbani6636
    @puriajahanbani6636 2 ปีที่แล้ว

    Thanks a lot for making this video. I don't know how you described everything so easily and simple.

  • @happynewyearw
    @happynewyearw 5 ปีที่แล้ว

    Awesome quality again! Thank you!
    Hope to see some future video on rxdart + firestore flutter examples with all the useful rx operators.
    I actually very need to mobile dev and programming as whole, and I've been searching for the best way to sync app's data that store on firestore to local storage, my current idea is to use a RxVMS architecture with a manager using rx to catch any update on firestore and 1. check/update the local copy of data. 2. Provide stream to the streambuilder in the view.
    still working on it! :P

  • @harpymaslow
    @harpymaslow 5 ปีที่แล้ว +1

    Best explanation of RxJS. You rock ! Thx Jeff

  • @JonWood
    @JonWood 5 ปีที่แล้ว

    This is the most useful video on RxJS I've ever seen! Thanks for making this!

  • @misterkevin_rs4401
    @misterkevin_rs4401 5 ปีที่แล้ว

    I Really love RxJS, been learning and getting better every year!

  • @duncan-dean
    @duncan-dean 5 ปีที่แล้ว

    Thanks for this! Was really waiting for one on RxJS!

  • @rezaasgary1442
    @rezaasgary1442 2 ปีที่แล้ว

    the best thing about your videoes is how fast you teach the subjects no boring amazing speed talk

  • @venkyakshaya
    @venkyakshaya 3 ปีที่แล้ว

    Wondering why I didn't find this channel sooner. Thank you Jeff!

  • @lokeshsaini7377
    @lokeshsaini7377 5 ปีที่แล้ว +1

    Thanks for the video. You always made the video on topic that I want. I am not so good in JavaScript, Angular but your videos helping me a lot to improve my knowledge. Again thanks for all videos.

  • @TwoTeaTee
    @TwoTeaTee 2 ปีที่แล้ว

    Apart from sheer knowledge, the video are also soothing to watch!

  • @ashdebash2008
    @ashdebash2008 2 ปีที่แล้ว

    What a great video, I couldn't get a proper grasp on the Observable pattern until i saw this. Many thanks.

  • @g-luu
    @g-luu 5 ปีที่แล้ว +1

    i've been working with Rx for sometime now and i have to admit that plumber example was GOLD, it all makes sense now. Thank you.

    • @Fireship
      @Fireship  5 ปีที่แล้ว +1

      WINNER! You won the T-shirt, send me a direct message with your mailing address and size :)

  • @oksanaserhiivna2634
    @oksanaserhiivna2634 5 ปีที่แล้ว

    Another nice thing is that along with providing really useful and serious information, you make one smile due to those amusing video 'injections'. :) Thanks for both benefits. :)

  • @AlessandroTaricani
    @AlessandroTaricani 5 ปีที่แล้ว

    Finally a clean and good explanation about RxJS, i'm using it on Angular and i love it! On thing could be useful for developers that come (like me) from Promises.. a video with the differences and when use one instead of the other.

  • @lukemorrison8719
    @lukemorrison8719 4 ปีที่แล้ว

    Very elegant. Loved the piper theory. Sounded a bit rushed but otherwise very informative and succinct. Well done!

  • @EduardKaresli
    @EduardKaresli 5 ปีที่แล้ว

    Watching this video at work... man it's so dense I'll have to rewatch at home at 0.75 the speed... but very nice, thanks a lot!

  • @robocop30301
    @robocop30301 5 ปีที่แล้ว

    This has helped me so much. Thank you, and please keep it up!

  • @stw00lf
    @stw00lf 5 ปีที่แล้ว

    Another awesome video! I would like to see more about rxjs 🎩

  • @whiskerAndPetal
    @whiskerAndPetal 4 ปีที่แล้ว

    These videos are like my daily doses to boost up my skills. 👍

  • @mattiaesposito5525
    @mattiaesposito5525 5 ปีที่แล้ว

    as always a nice short and simple video a very amazing tutorial thanks

  • @MrChickenpoulet
    @MrChickenpoulet 5 ปีที่แล้ว

    I like your new intros ! Keep up the good work :D

  • @amirhoseinfarhadi2268
    @amirhoseinfarhadi2268 3 ปีที่แล้ว +1

    It was so good im already waiting for the next one

  • @Blixzful
    @Blixzful 5 ปีที่แล้ว +3

    Very nice as usual.
    I've become a big fan of RxJs in Angular too, can you do some more protips on that topic?
    Http req's, Auth, Data state management etc. :) thnx Jeff

  • @divinedela9125
    @divinedela9125 5 ปีที่แล้ว +5

    Callback Hell Animation 0:45 ...I love it

  • @javascript_developer
    @javascript_developer 3 ปีที่แล้ว

    thanks for the awesome video. commenting before watching. because i really trust your "code this not that" related videos. keep doing it. thanks :)

  • @shashank5383
    @shashank5383 5 ปีที่แล้ว

    Thanks Jeff, I was waiting some tutorial on RxJs

  • @vamidicreations
    @vamidicreations 4 ปีที่แล้ว

    Jeff amazing stuff man this helped me out alot. It showed me ways to solve problems easier with RxJS.

  • @SoundFilmDesign
    @SoundFilmDesign 5 ปีที่แล้ว

    Great vid! Always great content from Fireship!

  • @reaper84
    @reaper84 6 หลายเดือนก่อน

    Really useful explanations!

  • @StephenRayner
    @StephenRayner 3 ปีที่แล้ว

    Excellent library thank you to sharing this

  • @ang3loux
    @ang3loux 3 ปีที่แล้ว

    OMFG! You guys are amazing. Thx for sharing this 🚀

  • @pluscday2
    @pluscday2 3 ปีที่แล้ว

    Awesome video for Rxjs. I watched for 3 times. great thanks Jeff!!!

  • @eddiejaoude
    @eddiejaoude 5 ปีที่แล้ว

    More RxJS please! Its so powerful but can be tricky. Multiple http requests and joining data if relational. Thank you

  • @dennisbarzanoff9025
    @dennisbarzanoff9025 5 ปีที่แล้ว

    I've waited for this for so long

  • @julienconnault1612
    @julienconnault1612 2 ปีที่แล้ว +1

    You're the only coding tutorial channel that I put on .75x rather than 1.5x

  • @FreshMattizl
    @FreshMattizl 5 ปีที่แล้ว

    Man thank you for those videos! I couldn't wrap my head around RxJS, but this helped a lot. Had to set speed to 0.75 as english is not my first language though lol

  • @narcodico
    @narcodico 5 ปีที่แล้ว +3

    You've pretty much covered the basics of rxjs. For newcomers to rx some more details regarding why only the first subscription emits when using share() and why not the second sub also, would have been welcomed I guess :) I would personally love to see this very same approach but for rxdart. Maybe have this series go toe by toe with a dart version. You could also create some rx videos that go in depth on related operators (eg: switchMap, mergeMap, concatMap and exhaustMap) with similarities and differences between them. This might save a lot of people from misusing switchMap since it can cause some really bad side effects if not properly used. I think an advanced video on hot observables would be cool to see, especially for dart where things are different from js, especially when it comes to hot vs cold stream.

    • @Fireship
      @Fireship  5 ปีที่แล้ว +4

      Great points, I would consider creating a full Rx course if people request it. There are a lot of subtle gotchas. I do plan on making a detailed video covering Dart streams + RxDart in the future :)

  • @riddheshganatra2223
    @riddheshganatra2223 5 ปีที่แล้ว

    Rxjs is superb and you help us understand better!!!

  • @idemchenko-js
    @idemchenko-js 4 ปีที่แล้ว +1

    Love the video! But I guess, the most interesting part happens in the languages that support multithreded execution, like in the case of Java with RxJava. Think about reading multiple files and processing them in parallel using such a neat API.

  • @sandiphob
    @sandiphob 5 ปีที่แล้ว

    This was an awesome video and super digestible!

  • @AbhiBhardwaj1289
    @AbhiBhardwaj1289 4 ปีที่แล้ว

    Superb Explanation

  • @tekkkinho
    @tekkkinho 5 ปีที่แล้ว

    Thx for this well done, u r helping a lot of people.

  • @JancoBH
    @JancoBH 5 ปีที่แล้ว

    Thank you so much for this video, I needed it 😍

  • @mawulijo
    @mawulijo 5 ปีที่แล้ว +3

    Before I watch. I wanna say I'm glad rxjs is covered in this series. I just get confused at the numerous examples out there. Moment of truth.

    • @Fireship
      @Fireship  5 ปีที่แล้ว +4

      Yes, I could probably make a sequel to this one. RxJS is complex library.

  • @ritesisright
    @ritesisright 2 ปีที่แล้ว +2

    I will need to watch this TEN times 😀.

  • @JakubBogusawskiPL
    @JakubBogusawskiPL 4 ปีที่แล้ว

    Great explanation, thanks!

  • @NourElGhamry
    @NourElGhamry 5 ปีที่แล้ว

    Amazing Jeff as usual 💪

  • @mfjones7879
    @mfjones7879 3 ปีที่แล้ว

    Thank you very much . This helped a lot.

  • @narendrasinghrathore1012
    @narendrasinghrathore1012 5 ปีที่แล้ว

    Design patterns, do make a series on gang of four design patterns.
    Great video.

  • @hos7012
    @hos7012 2 ปีที่แล้ว

    This channel is magic i get addicted to it, could i ask the author which do u prefer React native vs flutter?

  • @marekkazimierczak9210
    @marekkazimierczak9210 ปีที่แล้ว

    I do wanna see more of RxJS 🚀

  • @AlouiMohamedhabib
    @AlouiMohamedhabib 5 ปีที่แล้ว

    Great explanation thank you.

  • @hartnil93
    @hartnil93 5 ปีที่แล้ว

    Amazing video just like always!

  • @techvolta
    @techvolta 5 ปีที่แล้ว

    Nice video! RxJS is really powerful and forkJoin is one of my favorites.

  • @KamelJabber1
    @KamelJabber1 5 ปีที่แล้ว

    great vid as usual, thanks!

  • @oislek34
    @oislek34 ปีที่แล้ว

    good reasoning between episodes, but you need to split the screen so it updates instantly.
    and your print method output is funny af. thanks.

  • @tavash
    @tavash 5 ปีที่แล้ว

    Very good job !!

  • @osiriscarrillo4221
    @osiriscarrillo4221 5 ปีที่แล้ว

    Great video. Talking about observables, could you make a video about interceptors and catch error from angular ?

  • @ZachSuerdieck
    @ZachSuerdieck 5 ปีที่แล้ว

    Awesome video. Thanks

  • @iBulowHD
    @iBulowHD 3 ปีที่แล้ว

    Great video, really helpful, thanks man

  • @Rotem_shwartz
    @Rotem_shwartz 5 ปีที่แล้ว

    Your an absolute beast, love your videos, tnx

  • @RobertKing
    @RobertKing 5 ปีที่แล้ว

    thanks for the vid, will recommend my angular devs take a look at this for sure :)

  • @reddyashok9
    @reddyashok9 5 ปีที่แล้ว

    Thanks you Jeff very helpful

  • @iamshoaibkhalil
    @iamshoaibkhalil 2 ปีที่แล้ว

    Congratulations for 1M subscribers

  • @grzegorzsokalski7328
    @grzegorzsokalski7328 5 ปีที่แล้ว

    Jeff ur viedos helping me at work THANK U soooooooooooo much!

  • @divinedela9125
    @divinedela9125 5 ปีที่แล้ว

    Great video as always...

  • @x-lightsfs5681
    @x-lightsfs5681 5 ปีที่แล้ว +5

    Why didnt i get notified about this? I saw it on slack, its such a great video, its a shame some people may miss it mecause of yt

    • @Fireship
      @Fireship  5 ปีที่แล้ว

      I have not figured out how to appease the TH-cam algorithm gods ¯\_(ツ)_/¯

    • @patrickmullot73
      @patrickmullot73 5 ปีที่แล้ว +2

      check your code for :
      JeffsVideos.pipe(
      switchmap( v => VictoriaSecret)
      ).subscribe()
      That might be the issue ;-)

    • @bennakaska7472
      @bennakaska7472 5 ปีที่แล้ว +1

      You have to click the bell now to get an update. So Jeff you should start your videos now with "If you find this video helpful, like, subscribe and press the bell"

    • @x-lightsfs5681
      @x-lightsfs5681 5 ปีที่แล้ว

      @@bennakaska7472 i had it clicked

  • @delta4v
    @delta4v 5 ปีที่แล้ว

    Please add more scenarios of rxjs. You can make a series of it.

  • @gchaos
    @gchaos 5 ปีที่แล้ว

    I want to see more rxjs videos!

  • @Oswee
    @Oswee 5 ปีที่แล้ว

    Really would like to see more real world examples when working with composable components and UI state. LitElement as example and multiple possible custom context menus with only one open context menu per app shell. As well, fetching data and applying it to store and rerendering UI.

  • @gabrielgutierrez641
    @gabrielgutierrez641 5 ปีที่แล้ว

    Thanks for the video!

  • @dr.d3600
    @dr.d3600 5 ปีที่แล้ว

    Always awesome!thx

  • @k1ngjulien_
    @k1ngjulien_ 5 ปีที่แล้ว +18

    Oh my God! 10:57 I've been doing this and I absolutely hate it! I KNEW there had to be a better way to do this.
    Thanks for making this Video!

    • @Fireship
      @Fireship  5 ปีที่แล้ว +1

      Very common, switchMap will change your life.

    • @k1ngjulien_
      @k1ngjulien_ 5 ปีที่แล้ว

      @@Fireship Yes, I'll try it out as soon as I can 👍👍

    • @noext7001
      @noext7001 5 ปีที่แล้ว

      @@Fireship , i don't understand why switchMap is better than the nested subscription, its still a nested action , the code is not shorter or anything like that

    • @olivereisenbarth5476
      @olivereisenbarth5476 5 ปีที่แล้ว +3

      @@noext7001 Switchmap unsubscribes before subscribing to a new (outer) observable. Watch th-cam.com/video/rUZ9CjcaCEw/w-d-xo.html

  • @smartnoobgamer8292
    @smartnoobgamer8292 2 ปีที่แล้ว

    Amazing 15mins!!!