Coding

Fix your RxJS 6 Imports & Operators – What’s New in RxJS 6?

  • 00:00:01 our XJS version six is out and whilst
  • 00:00:06 Israeli is worth an entire video since
  • 00:00:09 angular six uses it by default this will
  • 00:00:12 actually affect quite a lot of projects
  • 00:00:15 our XJ x6 introduces a lot of breaking
  • 00:00:18 changes though most of the time you only
  • 00:00:20 need to change two things to make it
  • 00:00:23 work again and if you really want to
  • 00:00:25 save time
  • 00:00:25 you only need to execute one command to
  • 00:00:28 make all your old code work how this
  • 00:00:30 works let's have a look in this video
  • 00:00:35 so before we dive into any of the
  • 00:00:37 breaking changes rxjs 6 introduces due
  • 00:00:41 to a change project structure and so on
  • 00:00:43 the quick fix you can run in any project
  • 00:00:46 which you're updating to rxjs version 6
  • 00:00:49 so for example in an angular project
  • 00:00:52 which you're updating to angular 6 which
  • 00:00:54 needs rxjs the quick fix you can run is
  • 00:00:57 npm install' – – save rxjs comp at this
  • 00:01:02 extra library makes your old code work
  • 00:01:05 so with that your old imports your old
  • 00:01:08 usage of operators this all should
  • 00:01:10 continue to work fine you don't need to
  • 00:01:12 change anything in your code and it
  • 00:01:15 doesn't even add a lot to your bundle
  • 00:01:17 size so you're not even bloating your
  • 00:01:19 code a lot this ensures backward
  • 00:01:22 compatibility and all old code shouldn't
  • 00:01:25 require any changes so this is a great
  • 00:01:28 first step you can do so that you can
  • 00:01:30 then smoothly update step by step and
  • 00:01:32 you don't suddenly break your entire
  • 00:01:34 project but why does it break at all so
  • 00:01:38 what did really change our XJS 6
  • 00:01:41 introduces two very important changes in
  • 00:01:43 the end the first one is a changed
  • 00:01:45 package structure internally they
  • 00:01:48 reorganized things to make the bundles
  • 00:01:51 smaller and also to make imports easier
  • 00:01:53 therefore we basically have to update
  • 00:01:56 all our import statements and how we use
  • 00:01:59 operators because they also embrace
  • 00:02:01 another new concept pipe pipe herbal
  • 00:02:04 operators this allows us to use the
  • 00:02:07 operators a little bit different than
  • 00:02:09 before also to improve usability and
  • 00:02:13 bundle size and this also led to some
  • 00:02:17 operators being renamed why well you'll
  • 00:02:20 see that in a second so these are the
  • 00:02:22 two important changes an internal change
  • 00:02:25 in the project structures are to say in
  • 00:02:27 the package structure and then the
  • 00:02:28 exports and therefore in the way we have
  • 00:02:30 to import it and these pipeable
  • 00:02:33 operators now let's have a look at how
  • 00:02:35 this actually affects our existing code
  • 00:02:38 and how we can easily update without
  • 00:02:40 that command I showed you because that
  • 00:02:42 of course is the quickest way let's
  • 00:02:43 start with the changed imports in
  • 00:02:45 general in the past you had imports
  • 00:02:48 like this import observable from rxjs
  • 00:02:51 observable or import subject from rxjs
  • 00:02:55 slash subject in the future you'll just
  • 00:02:58 have import observable subject and so on
  • 00:03:01 from rxjs no slash something for
  • 00:03:05 operators you typically used import rxjs
  • 00:03:08 slash add slash operator slash map or
  • 00:03:12 rxjs /rx if you wanted to import
  • 00:03:15 everything now in the future you import
  • 00:03:18 operators separately with import map for
  • 00:03:22 example from our extras slash operators
  • 00:03:25 so this is very similar to the first
  • 00:03:28 update where you import observable from
  • 00:03:30 rxjs you get a second import destination
  • 00:03:33 slash operators and you get your
  • 00:03:35 operators from there now if you have
  • 00:03:38 observable creation methods like from
  • 00:03:40 promised in the past you used import
  • 00:03:43 rxjs add observable from promise to
  • 00:03:46 patch this function into the observable
  • 00:03:48 um object so to say in the future you'll
  • 00:03:52 import from promise from rxjs
  • 00:03:54 so from the same path where you import
  • 00:03:56 the observable and then you execute it
  • 00:04:00 just as a function you don't edit your
  • 00:04:02 don't chain it to the observable object
  • 00:04:05 but we'll see all this in a second
  • 00:04:06 so the general important thing to take
  • 00:04:09 away is you got two new import
  • 00:04:11 destinations from our extras and from
  • 00:04:14 rxjs
  • 00:04:15 slash operators speaking of operators we
  • 00:04:19 get pipeable operators now which simply
  • 00:04:22 means that this will become this so not
  • 00:04:26 only do the import statements change
  • 00:04:28 here as I just explained on our
  • 00:04:31 observable some observable in the past
  • 00:04:34 we chained all these operators map
  • 00:04:37 trottle and then we finally subscribed
  • 00:04:39 in the future with rxjs six and higher
  • 00:04:42 we use that special pipe method on the
  • 00:04:45 observable and that method takes an
  • 00:04:48 infinite amount of arguments where each
  • 00:04:50 argument is simply an operator function
  • 00:04:52 so here we add map fraud land so on as
  • 00:04:55 arguments and these operators continue
  • 00:04:58 to work as they did we just add them
  • 00:04:59 like this we don't chain them to the
  • 00:05:01 observer
  • 00:05:02 in the end we still subscribe now due to
  • 00:05:05 these type of operators some operators
  • 00:05:08 needed to be renamed because they
  • 00:05:10 clashed with reserved words and
  • 00:05:12 JavaScript because we're not calling
  • 00:05:14 them as methods anymore they're now
  • 00:05:16 normal functions so they must not be
  • 00:05:18 named like JavaScript keywords therefore
  • 00:05:21 du becomes tap because do is a reserved
  • 00:05:25 keyword and JavaScript catch becomes
  • 00:05:28 catch error for the same reason well all
  • 00:05:31 these operators were renamed for this
  • 00:05:33 reason in the end switch becomes switch
  • 00:05:36 all finally becomes finalized and not an
  • 00:05:42 operator but a method which allows us to
  • 00:05:44 create observables throw which we could
  • 00:05:47 also change to the observable object in
  • 00:05:49 the past becomes a standalone method
  • 00:05:51 like all observable creation methods and
  • 00:05:53 it's now throw error because fro alt is
  • 00:05:56 a keyword with that let's see how this
  • 00:05:59 works in code how can we actually update
  • 00:06:01 an existing project to rxjs X here's an
  • 00:06:04 angular project but of course this
  • 00:06:06 effects any project using rxjs 6 but in
  • 00:06:09 this angular project in my app component
  • 00:06:11 I have some valid rxjs operator and
  • 00:06:15 observable usage that would have worked
  • 00:06:17 in the past we're doing HTTP request
  • 00:06:20 with the angular HTTP client we get back
  • 00:06:23 an observable therefore and we first of
  • 00:06:25 all map to extract our data and well
  • 00:06:28 change its structure then I use catch
  • 00:06:31 and finally I subscribe instead of map
  • 00:06:34 you could have also used merge map I
  • 00:06:36 just added this year so that I can show
  • 00:06:39 how this is renamed so this is the old
  • 00:06:41 way of using observables and operators
  • 00:06:43 and here are the old imports now as you
  • 00:06:46 can see my package star Jason fall I'm
  • 00:06:48 using angular 6 and I'm using rxjs
  • 00:06:51 version 6 release candidate here but
  • 00:06:53 still version 6 therefore if I run ng
  • 00:06:57 surf and I try to bring up my
  • 00:06:59 development server I get DC live warning
  • 00:07:02 but we can't ignore this more
  • 00:07:03 importantly is that when it tries to
  • 00:07:06 build my project it will fail and it
  • 00:07:09 does fail with cannot find module error
  • 00:07:11 rxjs compatible now this
  • 00:07:16 is thrown because I'm using the old
  • 00:07:18 import styles here and by default the
  • 00:07:22 rxjs package tries to find that compact
  • 00:07:25 package so that you don't have to do
  • 00:07:27 anything but install that package to
  • 00:07:29 make that old syntax work so what we can
  • 00:07:32 do is can stop that server and run npm
  • 00:07:35 install – – save rxjs – compact and this
  • 00:07:39 will install this compatibility package
  • 00:07:42 once we had entered this we'll well
  • 00:07:45 download and install it and once this is
  • 00:07:48 done we can run ng surf and now it will
  • 00:07:51 compile an our entire project and bring
  • 00:07:53 up that development server and it will
  • 00:07:55 start without errors
  • 00:07:57 now once did start we can load our app
  • 00:08:00 and indeed it works ass before these are
  • 00:08:02 the blog posts loaded wire D angular
  • 00:08:05 HTTP client and handled through
  • 00:08:07 observables so this is the quickest way
  • 00:08:09 of getting our old code to work now we
  • 00:08:12 get an error here for fro because this
  • 00:08:14 was actually renamed but as a chained
  • 00:08:16 operator this still works so we can
  • 00:08:19 ignore this error but let's now update
  • 00:08:21 to rxjs 6 without using that compact
  • 00:08:24 package though I will note that using it
  • 00:08:27 is absolutely fine doesn't add a lot of
  • 00:08:29 size to your bundle and makes your code
  • 00:08:32 work so definitely a great in-between
  • 00:08:34 step and a great step in case you got
  • 00:08:37 some code you just can't get to work
  • 00:08:38 otherwise but let's now get rid of it so
  • 00:08:41 I'll quit my server here and I'll run
  • 00:08:43 NPM uninstall safe rxjs comput simply
  • 00:08:47 just to remove it both from my package
  • 00:08:50 to JSON file and from the node modules
  • 00:08:53 folder and therefore if I run ng serve
  • 00:08:55 we'll be back to getting an error of
  • 00:08:57 course
  • 00:08:58 now let's update our code NQ work again
  • 00:09:01 do not have this error anymore and for
  • 00:09:04 this we first of all need to change our
  • 00:09:06 import observable for example is
  • 00:09:08 imported from just rxjs without slash
  • 00:09:11 observable now this is also not needed
  • 00:09:14 anymore
  • 00:09:14 this way of importing operators now this
  • 00:09:18 previously imported all operators so
  • 00:09:20 this was an option to dis syntax anyways
  • 00:09:23 but this although is not needed anymore
  • 00:09:25 and will directly import the operators
  • 00:09:28 but we have to
  • 00:09:29 the different syntax for this so now we
  • 00:09:31 simply import the operators from rxjs
  • 00:09:35 operators and from there we import map
  • 00:09:39 in our case because that's really only
  • 00:09:41 the operator we're using we also get
  • 00:09:44 throwin off but these are simply ways of
  • 00:09:46 creating a new observable so we import
  • 00:09:48 them from rxjs
  • 00:09:50 off and fro error is the new name
  • 00:09:53 actually so this is also a renamed one
  • 00:09:56 because fro just like Kachins on is a
  • 00:09:58 reserved keyword now we can get rid of
  • 00:10:01 these imports too and now this is our
  • 00:10:03 updated import syntax now we need to
  • 00:10:06 change the way we use that map operator
  • 00:10:08 we use pipe instead and there we just
  • 00:10:11 pass this map function without the dot
  • 00:10:14 because we're now not calling this as a
  • 00:10:16 method it's now a function we passed
  • 00:10:18 this map function as an argument and if
  • 00:10:20 we had more than one operator we would
  • 00:10:22 simply chain it thereafter so if we were
  • 00:10:24 also using the tap operator we would put
  • 00:10:27 our tap code here as a second argument
  • 00:10:29 and the pipe method we of course would
  • 00:10:32 have to import tap too now catch
  • 00:10:35 actually is an average which we need to
  • 00:10:38 import so that was missing so let's
  • 00:10:40 import catch and this was renamed to
  • 00:10:42 catch error as I said so import catch
  • 00:10:44 error from rxjs operators and with that
  • 00:10:48 we also do change this here after map we
  • 00:10:51 have catch error and we got our error
  • 00:10:54 here now observable throw is not correct
  • 00:10:57 anymore
  • 00:10:57 it's just throw error like this and with
  • 00:11:01 that we can now safely subscribe here
  • 00:11:04 merge map if you used it would be smoosh
  • 00:11:06 map add it to the pipe chain here with
  • 00:11:10 all that now we can save that and rerun
  • 00:11:14 our development server and now it should
  • 00:11:17 work because now we updated the import
  • 00:11:19 paths and we're using the new pipeable
  • 00:11:21 operators and this does indeed look good
  • 00:11:24 if we reload it works as before and a
  • 00:11:28 very open the console we also don't see
  • 00:11:30 any errors there so now we updated this
  • 00:11:33 project to rxjs 6 with the quick way the
  • 00:11:36 rxjs compact package or by changing the
  • 00:11:39 imports and by using pipe flow operators
  • 00:11:42 as you
  • 00:11:43 so this wasn't too difficult either was
  • 00:11:45 just some extra work but in the end the
  • 00:11:48 upgrade path is really smooth not too
  • 00:11:50 problematic and I hope this is helpful
  • 00:11:53 and helps you upgrade your next angular
  • 00:11:56 or whatever project to rxjs six