Coding

RxJS – What and Why?

  • 00:00:01 welcome to this video if you're working
  • 00:00:03 with angular chances are high you heard
  • 00:00:06 about rxjs and observables chances are
  • 00:00:08 even higher if you haven't worked with
  • 00:00:10 angular because it's a pretty hot topic
  • 00:00:12 in front-end development right now but
  • 00:00:14 what does it actually mean what is rx
  • 00:00:17 chairs and what are observables how does
  • 00:00:19 it really work in this in the next
  • 00:00:21 videos I'll try to help you on that now
  • 00:00:23 I'm on the official web page our active
  • 00:00:26 X dot io / rxjs and here we have this
  • 00:00:29 very nice explanation rxjs is a library
  • 00:00:33 for reactive programming using
  • 00:00:35 observables to make it easier to compose
  • 00:00:37 a synchronous or callback based code now
  • 00:00:41 do you fully understand what this means
  • 00:00:43 the first time I read this that wasn't
  • 00:00:46 super clear to me so let's just use it
  • 00:00:49 let's understand how it really works for
  • 00:00:51 that we need to install it so let's
  • 00:00:53 click on that and I won't use NPM
  • 00:00:56 because for now I'll stick to a
  • 00:00:58 web-based editor jsbin dot-com to be
  • 00:01:00 precise but later in later videos I will
  • 00:01:02 also show you how to add it to a local
  • 00:01:04 setup for now I'll scroll to the very
  • 00:01:06 bottom to pick a CDN and I'll pick the
  • 00:01:09 bottommost to get the latest version and
  • 00:01:11 here all I have to do is remove a
  • 00:01:14 diversion to get it automatically
  • 00:01:16 replaced with the latest 15.3 in this
  • 00:01:19 case and then I'll go ahead over to
  • 00:01:21 chase be calm you may use chance fertile
  • 00:01:23 if you prefer that for example and here
  • 00:01:26 I will add script in the HTML portion
  • 00:01:29 hits tab to autocomplete this and then
  • 00:01:32 add source and paste in the link I just
  • 00:01:35 copied next I want to add a button here
  • 00:01:38 to the body again by typing button and
  • 00:01:40 hitting tab where let's just say click
  • 00:01:42 me now I want to handle this all go to
  • 00:01:45 the JavaScript portion here and also
  • 00:01:48 edit or open the console so that we can
  • 00:01:50 see whatever I log to it shrink this a
  • 00:01:53 little bit here and I want to get access
  • 00:01:55 to the button so here I'll use document
  • 00:01:58 query selector vanilla JavaScript here
  • 00:02:00 choose selected button and as a side
  • 00:02:03 note I'll be quite honest a comparable
  • 00:02:05 example can be found on the official
  • 00:02:07 page if you click on learn it here I'm
  • 00:02:09 basically just rebuilding these first
  • 00:02:12 examples because they really are
  • 00:02:13 it for understanding it so we got access
  • 00:02:16 to the button and what we can do with
  • 00:02:18 vanilla JavaScript us we can add an
  • 00:02:20 event listener to react to any click so
  • 00:02:22 react on clicks and execute some code
  • 00:02:25 nnj is when i can use es6 code so i'll
  • 00:02:28 use an arrow function here and here i
  • 00:02:30 will actually get an event object and i
  • 00:02:33 could simply lock this so console.log
  • 00:02:36 event like that if i now it control
  • 00:02:39 enter and click click me well we see we
  • 00:02:43 definitely got some object being locked
  • 00:02:45 here quite a lot of code but that is
  • 00:02:47 just the event object in the end so in
  • 00:02:50 the end this is working as I would
  • 00:02:52 expect it to work you see
  • 00:02:53 it's of type Mouse event so that is
  • 00:02:56 working now daddy vanilla JavaScript way
  • 00:03:00 of handling it and there's nothing wrong
  • 00:03:02 with it now let me rebuild this using
  • 00:03:05 our X chairs since I added this import
  • 00:03:08 from the CDN I can basically comment out
  • 00:03:11 this code here and write a new code and
  • 00:03:15 here what I will do is I'll use the rx
  • 00:03:18 package available due to this import
  • 00:03:20 there the observable object and now I
  • 00:03:23 help a method from event which will
  • 00:03:26 create a new observable based on an
  • 00:03:29 event so here the way this works is I
  • 00:03:32 specify the event source so the button
  • 00:03:36 here so where I want to listen to that
  • 00:03:38 event and then the type of the event
  • 00:03:40 here click as a string now with that I
  • 00:03:43 already got one observable but nothing
  • 00:03:46 would happen right now cue react to an
  • 00:03:49 event I need to subscribe to an
  • 00:03:51 observable so we'll execute subscribe
  • 00:03:53 and subscribe actually takes free
  • 00:03:55 functions we can pass here I'm only
  • 00:03:58 interested in the first one year and
  • 00:03:59 that first function gets the event data
  • 00:04:02 again and I can then log it to the
  • 00:04:06 console as before if I hit ctrl enter
  • 00:04:08 and click this button you again see the
  • 00:04:11 event object we saw before so the same
  • 00:04:13 code as before or the same result but
  • 00:04:16 with different code and on the first
  • 00:04:19 look this looks more complicated doesn't
  • 00:04:21 it using the SUBSCRIBE thing and then
  • 00:04:23 this function we pass as an argument to
  • 00:04:26 subscribe
  • 00:04:27 I would we might want to use that
  • 00:04:29 because with observables what you can
  • 00:04:32 already kind of see here we have a
  • 00:04:35 funnel-like set up our event data
  • 00:04:39 travels from top to bottom so from the
  • 00:04:42 data source which is our click event on
  • 00:04:46 the button cue the code we execute in
  • 00:04:49 the SUBSCRIBE function here now here
  • 00:04:52 obviously that funnel is very short
  • 00:04:54 small we only have to subscribe function
  • 00:04:57 but the powerful thing about observables
  • 00:05:00 and why they are so useful and used that
  • 00:05:03 much in angular are the operators which
  • 00:05:07 allow you to transform the way this data
  • 00:05:10 is handled used or looks like immensely
  • 00:05:15 let's say we want to make sure that we
  • 00:05:18 only react to click events once a second
  • 00:05:22 so if I spam this click button we omit
  • 00:05:25 or we drop all event pieces all events
  • 00:05:29 which have more than once a second now
  • 00:05:32 with vanilla JavaScript if we go to the
  • 00:05:35 original documentation scroll down to
  • 00:05:36 flow we can see this would be the code
  • 00:05:39 achieving this we would get the current
  • 00:05:41 date we would then store the last date
  • 00:05:44 and this last click variable we have a
  • 00:05:46 rate which is the milliseconds
  • 00:05:47 difference so this a window of time one
  • 00:05:50 1/2 where any one should only occur once
  • 00:05:53 every would have to check this manually
  • 00:05:55 now with observables we can use a
  • 00:05:58 built-in operator
  • 00:05:59 it's called throttle time you can also
  • 00:06:04 find it here in the official
  • 00:06:05 documentation it takes a number as an
  • 00:06:09 argument and that actually are the
  • 00:06:11 milliseconds we want to have as a time
  • 00:06:14 window you could say so here there could
  • 00:06:17 be 1,000 and if I now it control enter
  • 00:06:19 and I replace the event here maybe with
  • 00:06:24 clicked so that we can actually see this
  • 00:06:26 so I don't use the event data now and I
  • 00:06:28 now hit control enter and then spam
  • 00:06:30 click me you see clicked doesn't get
  • 00:06:33 printed as often as I click the button
  • 00:06:34 it gets printed exactly once a second
  • 00:06:38 and all the other events get emitted
  • 00:06:41 that's your awesome thing about
  • 00:06:42 observables it's so easy to add this
  • 00:06:45 functionality with one of the many many
  • 00:06:48 many useful operators observables offer
  • 00:06:50 and that really is the biggest advantage
  • 00:06:53 of observables this funnel-like approach
  • 00:06:55 which makes it very easy to write
  • 00:06:57 structured statements handling
  • 00:06:59 asynchronous code and the operators we
  • 00:07:01 can use in that funnel to transform the
  • 00:07:03 data for example if I wanted to print
  • 00:07:05 the x-coordinate of the click event I
  • 00:07:08 could output event client X for example
  • 00:07:11 that's just how we can access it this
  • 00:07:13 default property provided to us on that
  • 00:07:15 default event object click event emits
  • 00:07:18 so now it clicked me we see 32 53 and so
  • 00:07:23 on now that's of course nice but let's
  • 00:07:26 say we have more complex code here and
  • 00:07:28 suddenly we decide that we want to use
  • 00:07:32 this client Y variable instead of X now
  • 00:07:36 if we only have one statement it hears
  • 00:07:38 here changing it isn't difficult but
  • 00:07:40 let's say we were using that coordinate
  • 00:07:42 all over the place and many lines of
  • 00:07:43 code then we would have to change it
  • 00:07:45 everywhere well we can simply add
  • 00:07:47 another operator to the party map since
  • 00:07:50 I added after throttle time and since
  • 00:07:53 the order here is important this will
  • 00:07:55 also only receive a new event once a
  • 00:07:58 second and here map now works in a way
  • 00:08:01 that it takes a function as an input
  • 00:08:03 this function y n returns a new
  • 00:08:05 observable it gets the event data or the
  • 00:08:10 observable data I should say as an input
  • 00:08:12 so we could just say data and here what
  • 00:08:15 it does is it has to return something
  • 00:08:17 which will then automatically be wrapped
  • 00:08:19 in a new observable since we can only
  • 00:08:21 subscribe on and observable so map has
  • 00:08:23 to return one so the SUBSCRIBE works
  • 00:08:25 which is called on the result of map in
  • 00:08:27 the end here since we chained it so here
  • 00:08:30 I can return data and then client Y for
  • 00:08:34 example and here and subscribe I know I
  • 00:08:37 get a coordinate which one isn't
  • 00:08:39 important to me here the previous
  • 00:08:41 operators will sort it out and I can
  • 00:08:43 just output coordinate now if I control
  • 00:08:46 enter and clear this this is actually
  • 00:08:49 the y coordinate which you can see since
  • 00:08:52 it gets smaller if I click more on the
  • 00:08:55 well top side of the button and we still
  • 00:08:59 have the throttling in place and we get
  • 00:09:01 the math data that's the power of
  • 00:09:03 operators that's the power of writing
  • 00:09:06 this in a structured way and looking at
  • 00:09:08 it like a funnel and that is how you can
  • 00:09:10 think about rxjs and observables we have
  • 00:09:13 two funnel-like approach for handling
  • 00:09:15 asynchronous code which is really
  • 00:09:18 powerful and which might give you more
  • 00:09:20 features and more power than the normal
  • 00:09:22 vanilla JavaScript or promise using ways
  • 00:09:25 of handling that asynchronous thing
  • 00:09:27 gives you