RxJS Observables Crash Course

No video

RxJS Observables Crash Course

Рет қаралды 273,287

Traversy Media

Күн бұрын

Пікірлер: 190

@christopherderrell8470 6 жыл бұрын

I've reached the point where if any topic is presented as seemingly impossible for a starter to understand, I just add brad traversy to the end of the search.

@KpAbhiram 4 жыл бұрын

@raidoung4100 3 жыл бұрын

absolutely cool comment :d

@checkmate6732 6 жыл бұрын

BEGIN ----> 13:02 installation 13:02 ----> 23:20 creating observables from events 23:20 ----> 30:41 creating observalbes form arrays 30:41 ----> 36:02 observables from scratch 36:02 ----> 46:26 abservables form promise 46:26 ----> 51:33 interval, timer & range 51:33 ----> 59:35 map & pluck 59:35 ----> 1:06:39 merge & concat 1:06:39 --> END mergeMap & concatMap

@akhil5020 6 жыл бұрын

thanks mate

@anabeatriz8835 3 жыл бұрын

missing environment setup: 05:11 - 13:02

@richierob62 6 жыл бұрын

Most of the times I watch your videos, it’s like a treasure hunt for me. I know 95% of what you’re about to share, but I love learning that 5% that’s new! And it’s always there! Your style is so stupidly simple that it’s brilliant. Don’t change a thing. Thank you!!

@denisfrolov242 7 жыл бұрын

Excellent! Simple, plain, straightforward. Great job bud!

@TraversyMedia 7 жыл бұрын

Thank you :)

@sutirthamarjit 7 жыл бұрын

The beauty of this video is - No Complex Term, No Complex talk,only very straight simple demo. Easy to learn. :) Great Video.

@pascallussac6917 4 жыл бұрын

i'm now watching and learning rxjs, as old as this video is, it's still dope!

@billbortkevich2300 4 жыл бұрын

You, sir, have a talent to present complicated context in q very simple and digestible way. Thank you

@ganqqwerty 7 жыл бұрын

Very logical and step-by-step. As soon as you started to talk about the next example I already knew what it will be, because I wanted to try the same thing. Great-great-great video, gonna go and buy myself a course. The only thing: I didn't set up the environment, instead I took the existing plunkr where rxjs is already connected.

@HungBuiOfficial 7 жыл бұрын

Rxjs Observable concept was really bugging me until watching this video. Simple & easy to follow.. Really well done. Thanks

@redsnakeintown 7 жыл бұрын

Very clean presentation and informative...A trick to comment is to the select the lines you want and hit Command+/ or Ctrl+/ (Windows)

@ajengwall9181 7 жыл бұрын

Thank you so much for this. I've been trying to wrap my head around this library for too long. Great tutorial!! :D

@spaxxkey5936 5 жыл бұрын

this has to be the most under rated RXJS youtube video, it should be like a BILLION views by now, i strongly suggest anyone battling with the "Observable stream enigma" to watch this.. Thanks BRAD

@HugoRamirezSoto Жыл бұрын

Thank you Brad, this is a great tutorial. Only one comment, I had to increase a lot the volume of my speakers, I couldn't hear you well enough. Maybe you should increase the volume of your microphone.

@lucisetumbrae 7 жыл бұрын

Super video. Finally I have a fundamental understanding of Observables that allows me the flexibility to seamlessly use them as part of code. Thanks much for the effort.

@niteeshbhargava3696 7 жыл бұрын

Crystal cleared explanation. Best video I have ever seen for RX-js.

@raistlinmajere2257 8 жыл бұрын

Good timing, Brad! I was just watching MEAN ToDo's on Udemy and wondering hat the pointer actually did..... Thank You for the knowledge.

@surajitdas6555 6 жыл бұрын

Very simple, plain and superb explaination provided which clears all doubt of mine. Suggestions: Most of time went in typing, would have great if would have used some intelligence and keyboard shortcuts. :) Really worth to spend 1 hour time to understand these concepts with very simple examples. Thanks a lot, really appreciate your effort.

@snakepat332 7 жыл бұрын

1:06:11 Using "merge" instead of "concat" is producing the exact same sequence on this example. Maybe using a service API calls would make the difference more explicit ? Otherwise, very useful video I really enjoyed watching and following along with. Good job!

@surajitdas6555 6 жыл бұрын

Snakepat In merge both observables will run concurrently but in concat it will run sequencially. Thats the difference as per my knowledge and I think thats true. :)

@nzjemountfort 6 жыл бұрын

Thank you - You have clarified alot of context around this

@koolmo 6 жыл бұрын

What a great video.. Thank you for your step-by-step intro to RxJS.

@shuaibird.official 7 жыл бұрын

I'm so interested about this library. It looks so cool

@dallinparker2387 7 жыл бұрын

This helped so much to better understand RxJs! thank you.

@carlospoon6422 8 жыл бұрын

Great Brad! you can read my mind too - :o) I had RxJS & Bacon.js down on my list. Loved your last one on Ractive.js, so bought your 4 hour course too, plus a few more... THANKS again !!!

@carlospoon6422 8 жыл бұрын

Brad, Any chance you might do a crash course on Cycle.js ? - It would tie in well with you RxJS course

@vineetbirlasoft 7 жыл бұрын

Thanks for explaing Rx in a verysimple way keep posting..

@DemystifyFrontend 5 жыл бұрын

Awesome and simply explained. Good job mentor

@byassine52 6 жыл бұрын

Great video! I found it just when I needed be when the RxJS documentation was difficult to understand :)! Thanks a lot!

@olehivaniuk1441 7 жыл бұрын

Thank you very much! It was informative and pretty simple for understanding!

@Algebrodadio 7 жыл бұрын

Dude - I so needed this. Thanks.

@atticsolutions1476 5 жыл бұрын

Great stuff and very helpful to get an overview of RxJS. Thanx!

@hirazainab3119 5 жыл бұрын

Best explanation on YT on this topic !!

@davidjustice2323 5 жыл бұрын

Your voice makes my day! Love ya bro

@paulovinicius9940 3 жыл бұрын

For those in November 2020: const sourceInterval = interval(1000). *pipe* (take(5)); sourceInterval.subscribe( x => { console.log(x); }, error => { console.log(error); }, completed => { console.log('Completed!'); } );

@haideralishah728 7 жыл бұрын

Thanks, its simplicity made it very best.

@rahulsingh-px6vo 6 жыл бұрын

Very nicely explained. You are always excellent Brad. thanks TraversyMedia :)

@JapanScript 7 жыл бұрын

Greatest course about RxJS, thanks so much!.

@jorgesepulveda8380 7 жыл бұрын

when I type webpack -w on the terminal after installing all with npm install, it returns something like the order not found. Any idea?

@Indicestudiocl 7 жыл бұрын

In your proyect folder run: ./node_modules/.bin/webapck ./node_modules/.bin/webapck -w And dont install webpack globally

@memecommandomike4659 6 жыл бұрын

webpack needs to be installed globally for the cli command to work, you can get this installed with "npm install -g webpack"

@algoforge24 7 жыл бұрын

Awesome! Everything I needed. Thanks Brad!

@np7227 6 жыл бұрын

Extremely good vedio, as it helped me to understand observables in a best manner.....!!

@Bigdaddy91982 7 жыл бұрын

30.41 why did you call it a Map? Where are the key value pairs? Isn't it a 2 dimensional array? I'm kind of new to the Map data structure. Thanks in advance.

@paul-razvansarbu2067 7 жыл бұрын

This is very well explained. I was very intimidated by the subject, helps me a lot Thank you!

@isroiljohntolibov6057 5 жыл бұрын

Awesome tutorial helped a lot. I wonder if you can make a redux-observable and redux-symbiote course please

@franklinbacayo1519 7 жыл бұрын

nicely laid-out, good job! thanks

@EspaniaBerserk 6 жыл бұрын

Title: "xyz Crash Course" Length: "1:13:04" -Every programming tutorial in the world

@noherczeg 7 жыл бұрын

The video is nice, but I'm already past the 30 minute mark and still didn't get the information why would I use Observables in any of your examples. The first one could be done by simply using jquery, and the array example is just a forEach. I know that Observables are very useful in the right situations, but I think you should have made the point much earlier.

@thomashodges841 7 жыл бұрын

It's easier to teach starting from simple examples.

@electricant55 7 жыл бұрын

You shouldn't. Using Rx for something like logging clicks would be like using F1 race car to drive to a shopping mall. Vanilla JS would be enough (jquery? really?). However, to understand Rx enough to solve harder problems you need to get comfortable with the basics. A proper explanation of why and when you should use Rx would take up half this course's time.

@noherczeg 7 жыл бұрын

"[...], but I think you should have made the point much earlier." You missed this?

@mattmarkus4868 7 жыл бұрын

Rafal: "It would take up half of this course's time". Really? You can't discuss the use cases for this technology without taking up 60 minutes? Hmm. Seems doubtful. In any case, that should be the first question to answer when starting an instructional video about a new programming paradigm. Too many people want to use something just because it's new, but that doesn't matter to many of us. A good engineer is always thinking about trade offs and costs associated with doing something vs something else. He wants to know, first and foremost, why he should take the time to learn this when the examples shown can already be achieved using simple JS or Jquery. That is the most important question by far so the instructor should open the course with a compelling reason. Great comment by original person.

@electricant55 7 жыл бұрын

Matt Markus Use cases in the tutorial? What? Why would you even start watching a tutorial when you don't know what the technology is for? That's the most retarded thing I've heard

@bigggjimmm 6 жыл бұрын

thanks to u i'm getting some from all this Observed mess !!

@shashankpandey1019 5 жыл бұрын

$ webpack -w is not working , error below $ : The term '$' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again. At line:1 char:1 + $ webpack -w + ~ + CategoryInfo : ObjectNotFound: ($:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException

@hdauven8434 5 жыл бұрын

Hey, Brad uses an old webpack version in his repository. You can choose to edit his webpack config file to work with newer versions or you can use the locally installed webpack dependency that is set in the package.json. To run the local webpack module you need NodeJs version 5+. Run the command 'npx webpack -w' and it should run.

@PrasannaBhatK 7 жыл бұрын

Good Presentation. Clean and Easy

@jcyh 7 жыл бұрын

Super simple and clear and awesome tutorial!!!!!!

@FredoCorleone 5 жыл бұрын

John... Tom... Shawn! Shawn! Shawn! Shawn! haha That glitch from Heavy Rain

@ASoftwareEngineer 7 жыл бұрын

very nice tutorial and easy to understand, thanks a million

@digao-sn 7 жыл бұрын

Powerful examples! Thank you.

@najibla 6 жыл бұрын

Thanks! Great video for beginners. The only issue is that it was so slow that i had to play it in x2.

@kharicky 7 жыл бұрын

Was really helpful getting a quick overview, Thanks !! :-)

@kuldeep1950 6 жыл бұрын

out of curiosity at 20:17, why the output is not... v vg vgb is there by default throttle for event observables?

@danvilela 5 жыл бұрын

Very good! But why that other ways of doing it are not correct?

@albertogarcia1101 6 жыл бұрын

Thanks Brad! Its was very useful.

@hotmandead1 5 жыл бұрын

For me this e.target. isn't working what has changed ??

@redsnakeintown 7 жыл бұрын

wouldn't what you keep on doing - should work also ? - the shorthand of x => console.log(x) = .subscribe(console.log)

@MatkatMusic 7 жыл бұрын

at 16:03, how are the different anonymous functions differentiated? There's no data type for the parameter. does the subscribe() method require 3 unique functions in a specific order as the arguments?

@Skaryon 7 жыл бұрын

Late reply, but yup. It's just a specific order.

@8uddishh 7 жыл бұрын

$.ajax already returns a promise with done and fail, why we convert to promise. how do they both differ??? is it only coz observable can only take a promise object as parameter???

@joannagoda2245 7 жыл бұрын

Great job. One question: you mentioned double subsription may cause problems in some cases. What are those cases?

@ManuLG 7 жыл бұрын

Thanks, it was really good. Keep doing great videos.

@cristianscript5649 5 жыл бұрын

what's the difference between switchMap and add another map function below humm ??

@tuviakhusid4320 6 жыл бұрын

Very useful video. Thanks, guys!

@shikhadeepak82 7 жыл бұрын

Thanks.... Very nice video. I learned a lot.

@fflorin1994 7 жыл бұрын

I have a problem with live-reload, actually the content on page remains the same. I use VS code and Chrome

@gamatossian 6 жыл бұрын

Great work, keep it up! Much appreciated.

@tuananhdo1870 5 жыл бұрын

Hey Brad, Can you make tutorial on redux-observable

@isroiljohntolibov6057 5 жыл бұрын

yes that would be awesome if Brad makes tutorial on redux-observalbe.

@AustinLovell 7 жыл бұрын

I needed this. Thank you!

@Gatsbi 6 жыл бұрын

That' was very nice and clear. Subscribed

@cristianscript5649 5 жыл бұрын

how can you do output.html('h1'+bla bla bla) in Angular?

@mikemameko8830 7 жыл бұрын

When I try to run example on 32:24 I have an error: Uncaught TypeError: this._subscribe is not a function

@scottsmyth3251 4 жыл бұрын

Great intro video, thanks.

@mrdoner3451 7 жыл бұрын

How is a stream different from state, like in react?

@OmarAMRANI 8 жыл бұрын

Awesome presentation!!

@dmytrogarastovych9296 7 жыл бұрын

Is this course going to be available at Udemy?

@RizwanAhmed-pe2qq 7 жыл бұрын

www.udemy.com/learn-reactivex-from-ground-up/

@vladislavnikolov322 7 жыл бұрын

Very nice, thanks

@ganqqwerty 7 жыл бұрын

why when you listen to keyup, you have some of your inputs logged multiple times?

@BillyDukelow 7 жыл бұрын

Because he used append which will append the value to what already exists. If you want to completely replace what already exists then you would replace output.append(e.target.value) with output.html(e.target.value)

@wdhuntertv3850 7 жыл бұрын

top notch. great work

@amoghasoda 6 жыл бұрын

Very valuable explanation! Thnx a lot!! :)

@LethiuxX 6 жыл бұрын

Very helpful! Thank you, sir!

@ghanimalmarzouqi3277 7 жыл бұрын

Thanks Brad .. This was very helpful ..

@owlattack1971 7 жыл бұрын

@Traversy Media Where is your accent from? My guess is Boston.

@costagmc1 2 жыл бұрын

great, even after 5 years

@shashankpandey1019 5 жыл бұрын

getting error : (index):12 GET "127.0.0.1:8000/dist/app.bundle.js" net::ERR_ABORTED 404 (Not Found) any one help .

@smartinsantos 7 жыл бұрын

Perfect! keep up the good work!

@jhkmatthews 7 жыл бұрын

Thank you! Very helpful.

@demisx 7 жыл бұрын

What's the point of passing "complete" arg when you don't use it? Why not just `() => { console.log('Completed') }`?

@paulovinicius9940 3 жыл бұрын

@@nightowl9497 You roasted the fudge out of him, it was a necessary roast to be honest.

@valikonen 7 жыл бұрын

From where is coming value from interval? 0,1,2,3,4...?

@jrr702 7 жыл бұрын

he adds .take(5) to the end of interval(). take() has an argument of count which represents the amount of values eg .take(count). .take(5) means that it will produce 5 values 0 - 4. The interval(100) means he will output a value every 100ms, in this instance there are 5 values 0 - 4. In turn with Rx.Observable.interval(100).take(5) he is going to output 0, 1, 2, 3, 4 with each spaced 100ms apart.

@pianoflow9041 8 жыл бұрын

Awesome video!

@maxpowers6880 6 жыл бұрын

If you are only interested in RxJS concepts skip to 13:00

@japegeteam1745 6 жыл бұрын

You should make a course about how to make really good courses.

@christopher96 7 жыл бұрын

Great course!

@newcaiosantos 7 жыл бұрын

GREAT!!!!!!!!!!!!!!!!!!!!! Thanks a LOT!

@PaweWaszczynski 6 жыл бұрын

swichMap example does not the show power of the operator. Could be done with mergeMap

@korbendallas1210 6 жыл бұрын

that's awesome...thanks, bro!

@nanquim 6 жыл бұрын

great videos. can you enable subtitles, please?

@girish3643 7 жыл бұрын

Brilliant explanation Thank you:-)

@shashankpandey1019 5 жыл бұрын

$ webpack -w is not working , error PS F:\React-Projects xjs_boiler-master> webpack -w webpack : The term 'webpack' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again. At line:1 char:1 + webpack -w + ~~~~~~~ + CategoryInfo : ObjectNotFound: (webpack:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException

@JuliaSleeps 5 жыл бұрын

try command ./node_modules/.bin/webpack