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.
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!!
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
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.
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.
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.
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!
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. :)
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.
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?
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 !!!
$ 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
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.
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.
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.
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.
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
$.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???
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.
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)
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.
YOur very last version gives me errors if I type a username that doesn't exits. For example, my gitHub name it thodges314. If I type thodges3 it breaks at that point and doesn't let me type the rest of my name.
I have tried both defining the error functionality in subscribe and catching the error and throwing an observable of various forms. All suffer the problem that they halt the functionality. Any tips on managing that?
$ 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
Your reference to the switchMap "replacing" flatMap at 01:09:44 is completely wrong, they work differently and you would use them both depending on your need. In short: the "cancel" effect you get with switchMap does not exist with flatMap, this not-so-subtle difference is super important to know. You say "... used to be called", so misleading.
This was a good video, but I'm still not getting the point of RxJs. Like....what is the advantage of doing this over just doing a bunch of promise changes with .then and .catch?
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
thanks mate
missing environment setup: 05:11 - 13:02
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.
+1
absolutely cool comment :d
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!!
The beauty of this video is - No Complex Term, No Complex talk,only very straight simple demo.
Easy to learn. :)
Great Video.
Excellent! Simple, plain, straightforward. Great job bud!
Thank you :)
You, sir, have a talent to present complicated context in q very simple and digestible way.
Thank you
Rxjs Observable concept was really bugging me until watching this video. Simple & easy to follow.. Really well done. Thanks
Very clean presentation and informative...A trick to comment is to the select the lines you want and hit Command+/ or Ctrl+/ (Windows)
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
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.
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.
i'm now watching and learning rxjs, as old as this video is, it's still dope!
Thank you so much for this. I've been trying to wrap my head around this library for too long. Great tutorial!! :D
Crystal cleared explanation. Best video I have ever seen for RX-js.
What a great video.. Thank you for your step-by-step intro to RxJS.
Good timing, Brad! I was just watching MEAN ToDo's on Udemy and wondering hat the pointer actually did..... Thank You for the knowledge.
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.
Thank you - You have clarified alot of context around this
Great stuff and very helpful to get an overview of RxJS. Thanx!
Great video! I found it just when I needed be when the RxJS documentation was difficult to understand :)!
Thanks a lot!
Thanks for explaing Rx in a verysimple way keep posting..
This is very well explained.
I was very intimidated by the subject, helps me a lot
Thank you!
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!
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. :)
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.
Very nicely explained. You are always excellent Brad.
thanks TraversyMedia :)
Extremely good vedio, as it helped me to understand observables in a best manner.....!!
This helped so much to better understand RxJs! thank you.
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?
Late reply, but yup. It's just a specific order.
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 !!!
Brad, Any chance you might do a crash course on Cycle.js ? - It would tie in well with you RxJS course
I'm so interested about this library. It looks so cool
Awesome and simply explained. Good job mentor
Greatest course about RxJS, thanks so much!.
Thank you very much! It was informative and pretty simple for understanding!
out of curiosity at 20:17, why the output is not...
v
vg
vgb
is there by default throttle for event observables?
Thanks, its simplicity made it very best.
Title:
"xyz Crash Course"
Length:
"1:13:04"
-Every programming tutorial in the world
$ 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
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.
Your voice makes my day! Love ya bro
If you are only interested in RxJS concepts skip to 13:00
thanks to u i'm getting some from all this Observed mess !!
Best explanation on YT on this topic !!
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.
It's easier to teach starting from simple examples.
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.
"[...], but I think you should have made the point much earlier."
You missed this?
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.
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
nicely laid-out, good job! thanks
when I type webpack -w on the terminal after installing all with npm install, it returns something like the order not found. Any idea?
In your proyect folder run:
./node_modules/.bin/webapck
./node_modules/.bin/webapck -w
And dont install webpack globally
webpack needs to be installed globally for the cli command to work, you can get this installed with "npm install -g webpack"
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!');
}
);
Dude - I so needed this. Thanks.
Awesome! Everything I needed. Thanks Brad!
When I try to run example on 32:24 I have an error: Uncaught TypeError: this._subscribe is not a function
Very good! But why that other ways of doing it are not correct?
Was really helpful getting a quick overview, Thanks !! :-)
What's the point of passing "complete" arg when you don't use it? Why not just `() => { console.log('Completed') }`?
@@nightowl9497 You roasted the fudge out of him, it was a necessary roast to be honest.
very nice tutorial and easy to understand, thanks a million
Good Presentation. Clean and Easy
Great job. One question: you mentioned double subsription may cause problems in some cases. What are those cases?
$.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???
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.
Awesome tutorial helped a lot. I wonder if you can make a redux-observable and redux-symbiote course please
what's the difference between switchMap and add another map function below humm ??
why when you listen to keyup, you have some of your inputs logged multiple times?
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)
Thanks Brad! Its was very useful.
Very useful video. Thanks, guys!
Powerful examples!
Thank you.
For me this e.target. isn't working what has changed ??
wouldn't what you keep on doing - should work also ? - the shorthand of x => console.log(x) = .subscribe(console.log)
Super simple and clear and awesome tutorial!!!!!!
From where is coming value from interval? 0,1,2,3,4...?
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.
Thanks, it was really good. Keep doing great videos.
That' was very nice and clear. Subscribed
@Traversy Media
Where is your accent from? My guess is Boston.
I have a problem with live-reload, actually the content on page remains the same. I use VS code and Chrome
Hey Brad, Can you make tutorial on redux-observable
yes that would be awesome if Brad makes tutorial on redux-observalbe.
John... Tom... Shawn! Shawn! Shawn! Shawn! haha That glitch from Heavy Rain
Thanks! Great video for beginners.
The only issue is that it was so slow that i had to play it in x2.
Is this course going to be available at Udemy?
www.udemy.com/learn-reactivex-from-ground-up/
YOur very last version gives me errors if I type a username that doesn't exits. For example, my gitHub name it thodges314. If I type thodges3 it breaks at that point and doesn't let me type the rest of my name.
I have tried both defining the error functionality in subscribe and catching the error and throwing an observable of various forms. All suffer the problem that they halt the functionality. Any tips on managing that?
$ 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
try command ./node_modules/.bin/webpack
Thanks.... Very nice video. I learned a lot.
how can you do output.html('h1'+bla bla bla) in Angular?
getting error :
(index):12 GET "127.0.0.1:8000/dist/app.bundle.js" net::ERR_ABORTED 404 (Not Found)
any one help .
Great intro video, thanks.
How is a stream different from state, like in react?
Thanks Brad .. This was very helpful ..
Awesome presentation!!
I needed this. Thank you!
Very helpful! Thank you, sir!
Your reference to the switchMap "replacing" flatMap at 01:09:44 is completely wrong, they work differently and you would use them both depending on your need. In short: the "cancel" effect you get with switchMap does not exist with flatMap, this not-so-subtle difference is super important to know. You say "... used to be called", so misleading.
top notch. great work
You should make a course about how to make really good courses.
great videos. can you enable subtitles, please?
swichMap example does not the show power of the operator. Could be done with mergeMap
Perfect! keep up the good work!
Thank you! Very helpful.
For evereryone come from JavaFx, It's similar with JavaFx Observable with less typing problems.
Start from 13:04
Great.... good video 👌..... thank you
Brilliant explanation Thank you:-)
that's awesome...thanks, bro!
Awesome video!
This was a good video, but I'm still not getting the point of RxJs. Like....what is the advantage of doing this over just doing a bunch of promise changes with .then and .catch?
great tutorial. thanks man
James Johnson hey