- So now, let's talk about ReactiveX.
This is the ReactiveX website.
I don't know who created this website, but I love it.
I'll show you why in a minute.
But first, let's scroll down here
so I can point out a few cool features.
This is what we call a marble diagram.
You'll see this a lot in reference to RXJS
which I love because for me pictures are a great way
to wrap my brain around something new.
This diagram illustrates how the debounce Method works.
The debounce Method will wait
a specific amount of time between events.
For example, say you have a search bar
and you want to show the user instant search results
as soon as they type something,
without waiting for them to hit submit.
Well that's great, however,
rather than pinging your server
for every single letter they type,
the debounce can wait for
a delay of just a few milliseconds,
until we think they're done typing,
then ping the server.
A half second delay gives you
almost the same user experience
but costs significantly less in traffic
to and from the server.
But I digress, back to the diagram.
If you look at the arrow on the top,
each dot would represent a new input string
for each and every input event.
The bottom arrow would represent
what you'll get after debounce.
So this diagram is a visualization
of what our data would look like
if we use the debounce operator.
This is just one example and we'll definitely see more.
The point is that each marble diagram will represent
the data before operator on top
and after operator on the bottom.
I wanted to point out the marble diagrams
because I find them super helpful.
Let's look around real quick,
because there are a few more cool things
I want to show you, and then we'll start writing some code.
Okay, see this button choose your platform?
Go ahead and click that,
then we'll see all the languages ReactiveX
is available for.
Check out all those choices.
This course covers RXJS, so let's go ahead and click there.
Ooops!
I always do that.
This is the RXJS GitHub repo
and they actually have a great Read Me file here,
so I encourage you to read that all on your own,
but this is not really what I wanted to show you.
See this link right there?
Reactive.IORXJS?
That's the same website we were just on.
Let's go back there.
Okay, here's where the magic happens.
Once you get to this page, I recommend bookmarking it,
because it's a great resource.
See that left side bar?
You can click over there and just drill down
to learn about anything you want,
with marble diagrams and code samples and everything.
It's awesome.
However, I don't recommend you do that yet.
Why?
I'll show you.
Let's pick just one of these, and I'll pick the Observable,
because it's my favorite.
So here's your API,
looks pretty standard, right?
We can see a list of all the methods available
for Observable and we can click-through
to learn more about each one.
There's that cool marble diagram,
some sample code? That's great! What's wrong with that?
Well nothing, but let's just go back
and look at how many methods are available
for the Observable.
Look at how many there are.
So, I don't know about you but for me,
if I'm just learning something new
and I see all of this,
that's a bit intimidating.
But don't worry because I'll make it very simple for you.
Here's the thing,
this guy Ben Lesh wrote RXJS
and he's just a big over-achiever.
He's also a big goof ball so if you ever meet him,
have a good pun ready.
Seriously, he's a great guy, super nice,
obviously super smart,
but he must really be an over-achiever
because we have every method you could possibly
ever dream of using,
but we love Ben for that.
Anyway, here's my point,
you don't need to learn all of these right now.
I want to show you this because later,
when you're rocking and rolling with Observables,
you'll probably want to come back
and look up something specific
that does precisely what you need.
And you'll probably find it.
For this course, I'm going to teach you
some of the most common methods.
That will be enough for you to go ahead
and start using RXJS right now,
then, it will be easier for you
to pick up more obscure methods
as you need them.
So let's get out of here.
There's one more thing I want to show you
and it's super fun.
Okay. I don't know about you,
but anyone who was a kid in the 80's
will probably remember those books we have called
Choose Your Own Adventure.
Did you have one of those?
They're awesome.
They were mystery books for children
and they had choices where you made decisions
about what the character would do,
then turn to this page for one decision
or that page for the other.
My brothers and I loved these books
and often read them more than once
because their were multiple endings for each story.
And if you ever had a book like that,
you're going to love this.
Okay. See these three dots at the bottom of the page?
This is where the adventure begins.
Anytime you want to find an RXJS operator,
you can start right here.
Read the three choices and pick one.
Let's try it!
We'll pretend we've been using Promises
and we want to convert one to an Observable.
So, we'll click on
I have no Observables yet,
and then we'll get some more choices.
Check that out.
I want to create a new Observable.
We'll click there, and get more choices.
Let's click on, from an ES6 Promise.
And that gives us, the from Promise operator.
We'll click on that, then it will take us,
right to that section of the docs
and show us some code samples.
Cool, huh?
Informative and fun!
Maybe it's cause I grew up in the 80's
but I got to tell ya, I get a big kick out of this feature.