In today's episode, Lucas is joined by Jason Akbar, a full-stack software engineer who’s got a knack for front-end development. He recently penned some intriguing articles on Medium about RxJS operators. He will reveal what motivated him to write about RxJS operators, especially focusing on the top 17 operators that every Angular developer should know. They will break down each of these operators—like the map, filter, and debounce time—and discuss how they can streamline your Angular development. Jason will also touch on some of the lesser-known but incredibly useful operators like concat and merge, providing real-world examples of where these can come in handy.

Whether you’re navigating your way through Angular or looking to refine your skills, this episode is packed with nuggets of wisdom that you won't want to miss. Jason also has some tips on where you can find additional resources to master RxJS.

Lucas Paganini [00:00:05]:
Hey, everyone. Welcome to Adventures in Angular, the podcast where we keep you updated on all things Angular related. This show is produced by 2 companies, Top End Devs and Envoy. Top End Devs is where we create top end devs who get top end pay and recognition while working on interesting problems and making meaningful community contributions. And Envoy, which provides remote design and software development services on a task basis. So clients only pay after tasks are delivered and approved. My name is Lucas Paganini. I'm your host in the podcast.

Lucas Paganini [00:00:40]:
And joining me in today's episode is Jason Akbar, which is a full stack software engineer mainly focused on front end. And by the way, for the companies hearing this out there, Jason is currently looking for another role. So if you're hiring or your company is hiring for Angular only act, be sure to check out Jason Akbar. So, Jason, thanks for being at the show.

Jason Akbar [00:01:09]:
Thank you for having me. I'm glad to be here.

Lucas Paganini [00:01:14]:
Awesome. Awesome. You're very welcome. So, Jason, the reason why you are here is because you wrote a few articles on Medium, and one of those articles was about RxJS operators. And that was one that caught our attention, and we thought it would be interesting to bring that knowledge to the rest of the audience. So maybe you could talk a little bit more about the article that you wrote and what was the intention behind it. Like, what would you what were you trying to educate people about?

Jason Akbar [00:01:49]:
Okay. So before I wrote the article, I didn't know much about IHTS, and then I wanted to do more research on it to figure out the operators and, how they can just make my work easier and more, streamlined. Because I realized there are so many things I didn't need to do myself that, RxJS just makes easier for you. So after I was done with my research, I just decided to write an article on it so that people would find the information they need on RFCs easier that I had to find it. So that was the intention behind writing the article.

Lucas Paganini [00:02:27]:
Okay. Okay. Awesome. And by the way, I I understand what you mean by that because I also had a few challenges on my own when I was going through my learning journey of RxJS, I would say. It was definitely not super easy. And I remember that there was one website in particular. I think it was called learn RxJS, if I recall correctly. I can check.

Lucas Paganini [00:02:59]:
But I believe it was learn RxJS, which had some really nice diagrams for each of the operators, and that helped me a lot, when I was learning. Or I think it was the opposite. Like, the official RxJS documentation has the diagrams, but this website had more examples. It's one of either. And to me, the combination of the official RxJS docs and this website By the way, it's learn rxjs.io, I just checked. It, to me, at least, was really helpful when I was, learning RxJS in the beginning of my Angular journey. So I wonder, like, what do you think about that, and what worked for you? Like, how did you learn RxJS to get into a more advanced level?

Jason Akbar [00:03:51]:
Okay. For me, I learned RxJS from, various sources. I can't correctly remember the sources I learned it from, but, it was various sources. Also, I just asked AI for some of the resources it can give me, and I was searching some websites, and then I used some of the operators. So I think I went on the official website too, and then I found most of the operators that were, necessary to me. The ones I used the most are the map, the filter, and all those operators. These these are the ones I used the most. So I do I do think I would also check out the website you're also talking about to see how that can also help me in my journey learning RxJS.

Lucas Paganini [00:04:32]:
Now getting back to your article in particular, it says the top 17 RxJS operator. So what are the top 17?

Jason Akbar [00:04:44]:
Okay. So there's the map operator, the filter operator, the tap do operator, there's the comcast operator, there's the merge operator, there's the debounce time operator. There's the reduce operator. There's the retry operator. There's the concat map operator. There's the switch map operator. There's the partition operator. There's the combined latest operator.

Jason Akbar [00:05:05]:
There's the skip operator. There's the so, I mean, I I can go on and on. There's the take on to operator, and then, there's the catch error operator.

Lucas Paganini [00:05:14]:
And out of those, are there any that you would consider more unknown ish? Because I guess that at this point, at least map, filter, reduce are ones that are very straightforward for every Angular developer. I don't think that there are many Angular developers that are unfamiliar with those. But Yes. Are there any that you would consider to be more interesting to talk more about?

Jason Akbar [00:05:49]:
I think, like the concat operator is an operator that, not a lot of people use, but it can be helpful to just, merge 2, 2 things together. So you can concat multiple observables sequentially emitting values

Lucas Paganini [00:06:09]:
together.

Jason Akbar [00:06:09]:
I think that's an operator a lot of people don't use. And, the debounce time. It's just an operator a lot of people don't use, but a lot of people use debounce timers for so many things. If someone is typing something in an input and is supposed to run a particular function, and they don't want it to run every time the user puts in an input, they wanna wait maybe some milliseconds before the function runs or the API runs again. They usually, try to create the whole debounce thing themselves, but then there's an operator like the debounce time that makes that quite simple to do.

Lucas Paganini [00:06:46]:
Okay. Yeah. That that does make sense. And can you give me some examples of where to build in practice for, like, real Angular applications?

Jason Akbar [00:07:00]:
If a user is typing in something in an input and then whenever the user types in something, they're supposed to, search for results and display it on the page in real time as the user types. Sometimes you wouldn't want the API to run every single time the user types in something. They could type in something and delete it later. So usually, debounce timers are used to, wait a little while till the key up till, they they used to wait a little while till the user stops typing for some time and then run the API. So that's that's, a situation where the debounce time could be very helpful so that you could just, wait a while after the user stops typing and then run the API instead of running the API every single time the user types in an a new letter.

Lucas Paganini [00:07:50]:
Okay. Yep. That makes that is a very useful one, DevOps, which, by the way, I don't think we currently have a signal based alternative for it yet. Like, I'm I'm seeing more and more signal based alternatives for things that we need to do with RxJS popping up. Recently, Angular 19 was released, and we got Resource API, which allows us to deal with asynchronous, requests with signals. But Yes. We really don't yet have anything for default. Although there are, like, simple pure functions to handle this, like, you could very easily just use Modash, and it would allow you to do a new mouse, and you could wrap it into a signal.

Lucas Paganini [00:08:40]:
But we don't yet have anything, like, baked in into a signal, API, which is interesting. What else what else do we still need RxJS to do?

Jason Akbar [00:08:52]:
Yes. So, we can also retry. There's there's, there's also this operator called retry. So if you are running an API that is supposed to run maybe when the user loads a page, this particular operator allows mixed use of this API, and then it will retry it 3 times. And after it's done retrying it, then, you can display a message. You can subscribe to that, to it through a pipe and then display a message after it retries, like, 3 times. So with the retry operator, if, you can see it should retry, like, 3 times. So if the API fails the first time, you can retry the second time and then retry the 3rd time.

Jason Akbar [00:09:38]:
And then on the 3rd try, you could display a message to the user for the users to know that, the API failed or it didn't work.

Lucas Paganini [00:09:48]:
Right. And for those for those scenarios, the operator that you would recommend is just pure retry.

Jason Akbar [00:09:56]:
Yeah. You can use retry. That's that's one of the places where, yeah, you can use to to to get that result.

Lucas Paganini [00:10:08]:
Okay. I think that retry is an interesting one, but at the same time, it's not very used. Like, it it seems like a very nice use case, but I don't think people, in production a lot of times do that, like, explicitly as we try cases for the logic, which they should. It makes sense to do so, but most people just don't. I think it also explains the nature of RxJS, which is the code observable approach. Because if you look at the way that we use the retry operator, it's just so interesting that you can just have an observable and pipe and then pass retry. And it it almost seems like how does it retry? And because imagine that if it were a promise, you wouldn't be able to have a promise and then just do a, just put that promise into a retry function because the promise is just the execution of the thing. Whereas, in this case, the observable is almost like a formula for how you're going to subscribe to something.

Lucas Paganini [00:11:28]:
So the retry operator actually has all the information necessary, not just to get the value of the current observable, but to use the observable as a formula and kinda, like, run it again if it fails. I don't know if I'm complicating too much my explanation, because it might be really tough for people that especially audio format trying to hear me and understand what I mean. But perhaps

Jason Akbar [00:11:54]:
I knew right.

Lucas Paganini [00:11:55]:
Other examples for that.

Jason Akbar [00:11:58]:
Yes. So, yeah, you could you could use it for, an Ajax and then just have the the API you wanna run, and then we try a few times. I get what you're saying too, and a lot of people don't use it. A lot of people don't know about it, but it's definitely something to look into. It's one of the unused operators that people just brush over, and then it it complicates the way they retry and instead of just doing something like this.

Lucas Paganini [00:12:29]:
Yeah. I think in this list, you also have the partition operator, which I find to be particularly interesting. I wouldn't say always useful, but it's interesting because I've seen cases where people do 2 filters. Like, that that's not specific to our x u s, by the way. Just talking about arrays in general or any kind of iterators. I've seen people just filter for one case and then filter for the opposite case just to have the 2 arrays. Like, one filter for the condition being true and another filter for the condition being false. And this is just duplicated computation unnecessarily.

Lucas Paganini [00:13:15]:
Like, you're going through the entire array of elements twice, whereas you could just do it once. But most people don't even know, that there are pure functions to do that. So you don't have this natively baked into array methods, but for example, Lodash exposes an array utility called partition, and it's the same thing with RxJS. So partition is is almost like filter, but instead of giving you a single array, it gives you 2 arrays. 1 with all the elements that match the condition and another with all the elements that don't match it, which is can be pretty deep, though. Although

Jason Akbar [00:13:57]:
It's it's very it's it's pretty useful because there are so many cases where we have to filter out, results from APIs, and you create so many filters. And sometimes it can be a lot of filters because you're trying to get so many different information and section them into different, values. But then for this one, you're able to do 2 things at once and then get all the results you want.

Lucas Paganini [00:14:26]:
Yeah. Exactly. Exactly. I see the example that you have on the article is it's pretty straight straightforward as well. Like, you have a list of numbers and you wanna separate them between even numbers and odd numbers.

Jason Akbar [00:14:39]:
And the odd numbers. Yeah.

Lucas Paganini [00:14:42]:
Yeah. Yeah. No. That makes, that makes a lot of sense. I once did it just to give an interesting example for the audience of how you can apply it. I once used that in a form submission because what I wanted to do is I wanted to check if any of the object properties were different from what they were before at the time of submission. So imagine that, like, you're editing something, but when you're submitting the the changes, then you wanna see if there were any changes or not. Because if there weren't any changes, then you don't have to, then you can just let the person leave without telling them that there are unsafe changes.

Lucas Paganini [00:15:33]:
Right? Yes. And what I did was I used a partition, function to separate which properties had changed from which ones hadn't. And then in the model of unsafe changes, I would show up like, hey. You have those x properties, and I would list the properties that had changed and said, if you leave this page now, then those changes won't be saved. Do you wanna save them before leaving it, or do you wanna go ahead and discard the changes? But even if they saved, I would still have to access all properties, even the ones that were in, that had in English, because the endpoint was, quite null attached. So I had to give the entire object to update. So in this case, like, I did work so I wouldn't have to have 2, operations. 1 to get just the unchanged properties and another to get the changed ones.

Lucas Paganini [00:16:34]:
I would just get all of them, but, also, I would have a way to have some separation when

Jason Akbar [00:16:40]:
necessary, but,

Lucas Paganini [00:16:41]:
also, when necessary, I would be able to just use all of them.

Jason Akbar [00:16:45]:
Exactly. That's great. That's a great use of the partition. That's even a very creative way of using it than the simpler way people would even think about it. That's actually a very creative way of using it.

Lucas Paganini [00:16:58]:
Yeah. Thanks. Alright. What else? Let me take a look here. We have catch error, which it's kinda straightforward. I think Comcast map is interesting because, I think Comcast and merge in general are interesting because someone in control that could do about the different in Comcast and merge. So perhaps you could talk a bit about that.

Jason Akbar [00:17:29]:
Okay. So, for the concat, it just helps you flatten, observable sequentially. And it's quite helpful because, when a user clicks on something, you could you could perform a concat map, and then you could wait a particular time and then, just just, combine different values based on what they've, they've put in.

Lucas Paganini [00:18:00]:
So, yeah, that that is correct. Just to to simplify a bit for for the audience, Yes. Both concat and merge allow you to aggregate multiple observables into a single one. The difference

Jason Akbar [00:18:22]:
Yes.

Lucas Paganini [00:18:22]:
Is that merge aggregates them in parallel. So imagine that you're having that you have multiple observables happening at the same time, and when you merge them, you get an observable that has all the events of the observables that you aggregated at the moment that they happen. So let's say that you have a timer that happens every one second and another that happens every, half a second. Then you would get a new observable that meets every half a second and also meets twice every second. But on the other hand, mer sorry, concat is different because CONCAT aggregates the observables in serial order. So it's not going to output the values in parallel. It's going to output all the values from the first observable until that observable completes. And then it starts to and then it emits the values from the second observable until it completes it.

Lucas Paganini [00:19:34]:
Yes. Start. So the difference is just whether you're aggregating things in, a serial order or in parallel order.

Jason Akbar [00:19:45]:
Yes. So it waits for the in observable to finish before moving on to the next value.

Lucas Paganini [00:19:52]:
Exactly. Exactly. Yeah. Yeah, man. That is I think most of it, like, the only other one that we haven't touched is through tap, which I also think that most people will be familiar with that. But for those that aren't, it's basically like math, but you discard the the result. So it's just for side effects like logging or, basically doing something with the value, but not necessarily telling about what the function returns.

Jason Akbar [00:20:25]:
Yes. So it doesn't alter the actual value.

Lucas Paganini [00:20:31]:
Mhmm. Yep. Yep. Okay. Okay. Jason, on this subject or RxJS, is there anything else that you think would be relevant to discuss with the audience, or should we start wrapping up?

Jason Akbar [00:20:49]:
I would just say that you you there there are definitely more operators that, are not in the top 17 that we could always, get into and know. Most of the ones I use are over here. And, whenever there's something that you feel is complicated, you could just search for RxJS or Loudash or any of these tools to help you out simplify certain things that would usually be complicated to do. And I think that's that's it.

Lucas Paganini [00:21:20]:
Okay. Alright. Alright. Jason, let's do some quick promos. So on my end, I'm just gonna promote the 2 companies that produce this show. So if you are listening to this and you're interested in learning other technologies, not just Angular, then Top End Apps has many other shows as well. There's a show about React called React Roundup, and shows about continuous integration, continuous deployment, just JavaScript in general. There there are a lot of podcasts, so do check out Top and Dapps if you're interested in that.

Lucas Paganini [00:21:52]:
And if you are a business owner or if you are at a company that is currently working for, remote developers, I would definitely recommend checking out envoy.com. So this is unvoiv.com because they have a very new, proposition, which basically allows you to hire them and only pay for the tasks that they deliver, which is a lot more client friendly than paying by the hour or hiring on a full time employee and then paying a monthly value. So it's it's very different, but definitely check out if you're interested in that. That's unvoid.com. So how about you, Jason? What would you like to promote?

Jason Akbar [00:22:40]:
Okay. I'll just like to promote myself as a software engineer, full stack, front and back end mobile dev. If you have any projects, if you want any mentoring, if, you also want to mentor, have anything you would like me to contribute to, work on, if you'd like to work with me, I'm available. Available. You can check out my LinkedIn. It's Jason Akbar, and I'll be happy to connect with anybody that listens and is interested in having a conversation.

Lucas Paganini [00:23:11]:
Awesome. Okay. Okay. Jason, thank you so much for being on the show. It was a pleasure to have you do.

Jason Akbar [00:23:19]:
It was a pleasure to be on this trip.

Lucas Paganini [00:23:22]:
Yeah. Thank you. Thank you. Good luck on looking for your next opportunity. I hope it doesn't take so long. The market is a bit crazy at the moment, but there's always a way for me to come in.

Jason Akbar [00:23:35]:
Thank you so much. Thank you so much. Good luck to you too. It was so, so much fun being on

Lucas Paganini [00:23:40]:
this podcast. Awesome. Thanks, Lee. Have a great day.

Jason Akbar [00:23:45]:
You too.