Hey folks, I'm a super busy guy and you probably are too. You probably have a lot going on with kids going back to school, maybe some new projects at work. You've got open source stuff you're doing or a blog or a podcast or who knows what else, right? But you've got stuff going on and if you've got a lot of stuff going on, it's really hard to do the things that you need to do in order to stay healthy. And one of those things, at least for me, is eating healthy. So when I'm in the middle of a project or I just got off a call with a client or something like that, a lot of times I'm running downstairs, seeing what I can find that's easy to make in a minute or two, and then running back upstairs. And so sometimes that turns out to be popcorn or crackers or something little. Or if not that, then something that at least isn't all that healthy for me to eat. Uh, the other issue I have is that I've been eating keto for my diabetes and it really makes a major difference for me as far as my ability to feel good if I'm eating well versus eating stuff that I shouldn't eat. And so I was looking around to try and find something that would work out for me and I found these Factor meals. Now Factor is great because A, they're healthy. They actually had a keto line that I could get for my stuff and that made a major difference for me because all I had to do was pick it up, put it in the microwave for a couple of minutes and it was done. They're fresh and never frozen. They do send it to you in a cold pack. It's awesome. They also have a gourmet plus option that's cooked by chefs and it's got all the good stuff like broccolini, truffle butter, asparagus, so good. And, uh, you know, you can get lunch, you can get dinner. Uh, they have options that are high calorie, low calorie, um, protein plus meals with 30 grams or more of protein. Anyway, they've got all kinds of options. So you can round that out, you can get snacks like apple cinnamon pancakes or butter and cheddar egg bites, potato, bacon and egg, breakfast skillet. You know, obviously if I'm eating keto, I don't do all of that stuff. They have smoothies, they have shakes, they have juices. Anyway, they've got all kinds of stuff and it is all healthy and like I said, it's never frozen. So anyway, I ate them, I loved them, tasted great. And like I said, you can get them cooked. It says two minutes on the package. I found that it took it about three minutes for mine to cook, but three minutes is fast and easy and then I can get back to writing code. So if you want to go check out Factor, go check it out at factormeals. Head to factormeals.com slash JSJabber50 and use the code JSJabber50 to get 50% off. That's code JSJabber50 at factormeals.com slash JSJabber50 to get 50% off.
Hey folks, I'm a super busy guy and you probably are too. You probably have a lot going on with kids going back to school, maybe some new projects at work. You've got open source stuff you're doing or a blog or a podcast or who knows what else, right? But you've got stuff going on and if you've got a lot of stuff going on, it's really hard to do the things that you need to do in order to stay healthy. And one of those things, at least for me, is eating healthy. So when I'm in the middle of a project, or I just got off a call with a client or something like that. A lot of times I'm running downstairs, seeing what I can find that's easy to make in a minute or two, and then running back upstairs. And so sometimes that turns out to be popcorn or crackers or something little, or if not that, then something that at least isn't all that healthy for me to eat. Uh, the other issue I have is that I've been eating keto for my diabetes and it really makes a major difference for me as far as my ability to feel good if I'm eating well versus eating stuff that I shouldn't eat. And so, um, I was looking around to try and find something that would work out for me and I found these factor meals. Now factor is great because a, they're healthy. They actually had a keto, uh, line that I could get for my stuff. And that made a major difference for me because all I had to do is pick it up, put it in the microwave for a couple of minutes and it was done. Um, they're fresh and never frozen. They do send it to you in a cold pack, it's awesome. They also have a gourmet plus option that's cooked by chefs and it's got all the good stuff like broccolini, truffle butter, asparagus, so good. And you can get lunch, you can get dinner. They have options that are high calorie, low calorie, protein plus meals with 30 grams or more protein. Anyway, they've got all kinds of options. So you can round that out, you can get snacks like apple cinnamon pancakes or butter and cheddar egg bites, potato bacon and egg, breakfast skillet, you know obviously if I'm eating keto I don't do all of that stuff. They have smoothies, they have shakes, they have juices, anyway they've got all kinds of stuff and it is all healthy and like I said it's never frozen. So anyway I ate them, I loved them, tasted great and like I said you can get them cooked. It says two minutes on the package. I found that it took it about three minutes for mine to cook, but three minutes is fast and easy and then I can get back to writing code. So if you want to go check out Factor, go check it out at factormeals, head to factormeals.com slash JSJabber50 and use the code JSJabber50 to get 50% off. That's code JSJabber50 at factormeals.com slash JSJabber50 to get 50% off.
CHARLES MAX_WOOD: All right, folks, we're still at RxJS Live. I'm talking to Mike Ryan and Sam Julien. They gave a talk yesterday, right?
MIKE: That's right.
CHARLES MAX_WOOD: And I don't even remember what you talked about. So why don't you go ahead and give us an introduction and then remind us what you talked about yesterday.
MIKE: Sure, so my name is Mike Ryan. I'm a software architect at a company called Synapse. I'm also a GDE for Angular Web Technologies and I'm a co-founder of NGRX.
SAM: He loves that title. I'm Sam Julien. I do developer relations at Auth0, and I'm also a GDE for Angular and web technologies. And the talk we did was about a little-known operator called Groupby that is extremely useful. And so we went into, we did an overview of some of the combination operators and how they all work and some of the problems that you run into with those operators. And then, did a quick review on higher order observables and then showed how Group By can help solve a lot of the problems that the typical combination operators like Switchmap and Mergemap inadvertently create.
About You is one of the fastest growing e-commerce companies in Europe. Their headquarters is located in Hamburg, Germany. Currently, their fashion online shop is live in 10 European markets with more than 8 million app installs, 15 million active users on its platform and handles more than 3 million API calls per day. In 2018, About You reached a company valuation of more than $1 billion US dollars, moving up to the exclusive circle of European unicorns. This could only be achieved by the excellent work of About You's tech teams. One-third of their employees are developers and come from over 40 different nations, which truly enriches the teamwork of the company. What they all have in common is that they are highly driven by the passion to develop the best product on the market. Their award-winning organizational model, Move, allows developers to switch teams, which ensures lifelong learning. About You has built its software in-house using Laravel, Node.js, TypeScript on the server side, and Vue.js and React on the client side, as well as some of the latest technologies like Flutter. Besides a variety of free drinks and fresh fruits, About You offers free language courses and helps new employees in the relocation process if they move from abroad. Moreover, developers get free tickets to the About You organized conference, the Code.talks, one of the biggest tech conferences in Europe. The conference takes place in Hamburg and has more than 1,500 developers in attendance. Furthermore, About You offers a well-structured onboarding process with a buddy system that provides access to e-learning tools such as laracasts.com and egghead.io. When starting at About You, you get to pick your hardware. You can use a MacBook or Windows Notebook and the kind of IDE you want to work with. Since the company is continuing to grow fast, About You is always on the hunt for new motivated team members. Currently, there are vacancies for full-stack developers, a front end developer, Dart and Flutter developers, a quality assurance engineer, a project manager, and other exciting leadership positions. If this sounds good to you, apply now at aboutyou.com slash apply. They are looking forward to hearing from you.
CHARLES MAX_WOOD: So, uh, these are some that I'm not as familiar with some of the operators, uh, with our XJS. So where do you see people using these and yeah, where do you see people getting tripped up with them?
MIKE: Yeah. So the problems that we tried to address in our talk are really going to come up for developers that are using what we kind of have coined the dispatcher and effect pattern in our talk. And this pattern is one where you're taking all of the user events from your UI and you're dispatching them to a common subject or observable of all the events in your application. So some examples of implementations of this pattern would be libraries like Redux Observable or NgRxEffects. And the problem we're trying to address here is that when you're using these combination operators like MergeMap or SwitchMap or ConcapMap, you have the opportunity to inadvertently introduce things like backpressure, or race conditions in your application. And so Sam and I's talk was really trying to break down, okay, how do each of these operators demonstrate these subtle bugs, and how can we alleviate the chance those bugs are rising by using the group by operator?
SAM: And the most sort of common example of using these things would be any sort of really highly interactive user interface. So the example we gave was the Twitter heart button. It looks really simple on the surface, but it actually has some complications because if you have some network delays and you need to mash on the button a bunch of times, it's easy, if you don't do it correctly, the front end can get out of sync with the back end. And so that's the kind of thing that we were trying to address with Group By.
CHARLES MAX_WOOD: That sounds complicated. Is there an easy way to just follow along with this? I guess you make it visual in the talk, but.
MIKE: Yeah, we really try to focus on the visuals for this talk because we knew that the visual diagrams to be the part that really help users like get their head around, um, dealing with these complex streams of data. But we also fell back to an analogy that I think makes, um, a lit makes it a little easier to understand. So if you think of yourself going to a line to pick up your conference badge at a conference, you go in line and maybe there's a hundred, 200 other attendees in front of you. You kind of all just go one by one. Right. And you go up to the desk, you pick up your badge, you go to the conference. And so we started to apply, well, like what would this line work like if you started introducing some of these operators? So merge map is like the disaster one. Merge map is where all 100 attendees just run up to the desk at the same time and like overcrowd it and they're all trying to snatch their badge and it's a madhouse and it's not clear who's going to win. Uh, you want to do a switch map?
SAM: Yeah. So well, concat map would be everybody's in a neat line and they all go one by one, which is good, but it's kind of slow. And then switch map is Mike's favorite because it's the one where he runs to the front of the line and pushes people out of the way and he goes first and other people get ignored. And so we were trying to come up with ways of explaining this. And so then group by is the solution because with group by you can break every buddy up into last name categories. So you group them all by their last name, and that way you have like five lines, and it's a more efficient process, and people can get through faster. So we've used that analogy, we've used like packages being sorted by color, circles being sorted by color, but basically anytime you have like a bunch of things happening in sequence, if there's a way you can break them out into smaller groups that can get acted on independently, then you end up with better performance.
CHARLES MAX_WOOD: Yeah, that makes sense. And I talked to Jay earlier about the back pressure problem. And so yeah, if you're pushing less stuff than anything that's responding to the observable, then yeah. Yep, absolutely. Were there other aspects of your talk that you wanted to talk about, or does that more or less cover what you talked through?
MIKE: So the talk was about Group By, but we weren't trying to push people to go use Group By in their application. Really, it was kind of like a... The secret goal was to get people to start thinking about sort of these performance implications of these mapping operators. And to use Group By requires a lot of work to make sure you do it right and that you don't do things like introduce memory leaks. So don't go use Group By everywhere. But hopefully that through the talk, you maybe managed to learn a thing or two about RxJS that you didn't know beforehand.
SAM: Yeah. We sort of... We were trying to kind of smuggle in some material on how to understand which combination operator to use when, because those are really common operators you have to use when calling HTTP endpoints. And a lot of times people think they have to memorize which one to use. And so we were trying to break down why you would choose or not choose to use one of those operators by using Groupby as a use case for that
CHARLES MAX_WOOD: this particular conference just because RXJS seems to be on the adoption curve, but it's not everywhere, I guess, or at least people don't realize that it's everywhere. It might be in some of the libraries they use. How do you use RXJS in your day-to-day work?
MIKE: So I'm a big proponent of reactivity as an architecture for building UI applications, my implementation of which in GRX is a really common way to build reactive Angular applications. And so at my day job, I build applications for industrial IoT, and they use Angular and NGRX for their front ends.
SAM: So at Auth0, we have some authentication SDKs, and one of them is a spa SDK, where you can use Auth0 in whatever JavaScript application you want. And so one thing that's really important to us is that we are able to enable developers to use them, use those SDKs idiomatically in their applications. So we put a lot of time into the Angular quick start, for example, making sure that instead of relying on async await in that we have sample code on how to implement the SDK using rxjs best practices and using reactivity that is a more idiomatic way of doing it. And so then when we support developers that are using the SDKs and using the product, we wanna make sure that we know what we're talking about with rxjs and we're supporting their efforts to like follow best practices for whatever they're using, whether it's Angular or Redux Observable or something like that.
CHARLES MAX_WOOD: Yeah, that makes sense. So I'm gonna encourage people to go watch your talk, especially if they want to understand a little bit more about these things. I think your, I guess, verbal visuals, where you explained how that stuff works, were really helpful, but I think it's also helpful for people just to be able to see what you put up on the screen and how that all works. If people have questions though, or they wanna reach out, or maybe they wanna look into what either of you are working on,
Where do they find your stuff online?
MIKE: You can follow me on Twitter, GitHub, or Medium at Mike Ryan Dev. And of course, you can also follow the NGRX project at github.com slash NGRX.
SAM: And I'm just Sam Julien on Twitter, at Sam Julien. And one other thing would be that we worked really hard on the sample code for this project. It's actually like a fully functional sample application. It's plain, TypeScript, no frameworks or state management libraries. And so there's a link in the slides that you can go get that a branch showing each of the combination operators, so switch map, concat map, and merge map. And then there's a branch for group by, and then we also have a bonus branch for extracting group by into a custom operator. So you can go and clone that code and look at exactly what's happening in that sample application. So hopefully it's a good resource for people to learn this stuff.
CHARLES MAX_WOOD: Sounds good. Well, thanks guys. Thank you.
This episode is sponsored by sentry.io. Recently, I came across a great tool for tracking and monitoring problems in my apps. Then I asked them if they wanted to sponsor the show and allow me to share my experience with you. Sentry provides a terrific interface for keeping track of what's going on with my app. It also tracks releases so I can tell if what I deployed makes things better or worse. They give full stack traces and as much information as possible about the situation when the error occurred to help you track down the errors. Plus one thing I love, you can customize the context provided by Sentry. So if you're looking for specific information about the request, you can provide it. It automatically scrubs passwords and secure information, and you can customize the scrubbing as well. Finally, it has a user feedback system built in that you can use to get information from your users. Oh, and I also love that they support open source to the point where they actually open source Sentry if you want to self-host it. Use the code devchat at sentry.io to get two months free on Sentry's small plan. That's code devchat at sentry.io.
CHARLES MAX_WOOD: Hey folks, we're at RxJS Live, and I'm here with Tracy Lee. Tracy, do you want to say hi?
TRACY: Hi. How's it going, everyone?
CHARLES MAX_WOOD: All right, can we just get a brief introduction? Because I know a lot of people know who you are, but not everybody does.
TRACY: Yeah, my name is Tracy. You can follow me on Twitter at LadyLiep. I'm a Google Developer Expert for Angular. I'm a Microsoft MVP. I'm also on the ArcGIS Core team. I love barbecue. And I do all types of JavaScript development. So whether it be React, Vue, React Native, Angular, et cetera, et cetera, I love it all. I'm also the co-founder of a company called this.labs. We're a JavaScript consultancy of about 50 people right now. We're framework agnostic and we just love helping companies be successful. So we really focus on mentoring other developers within the industry to become better.
CHARLES MAX_WOOD: Awesome. And yeah, you've got your own shows over there too at this.labs as well, right?
TRACY: Yeah, we have the modern web podcast. We have this thing called whatthehell.dev. where, you know, like Alex Eagle, who's one of the main people for Bazel over at Google, just explained, you know, what the hell is Bazel? And Modo One Podcast is obviously a very popular one. And then every, every Thursday, we have another online event, React Online, Angular Online, View Online, etc. Two talks, 20 minutes each, but it's kind of a mix between a podcast and an event. And we've also been featuring a lot of really amazing underrepresented minorities. So I love that because online events, you can access so many more people. So it's been really cool to watch.
CHARLES MAX_WOOD: Very cool. And you gave a talk here yesterday, right? Do you want to give us kind of the elevator pitch for your talk?
TRACY: Sure, my talk was kind of like a dictionary of the top 20 operators you should use. So I went through the actual explanation that people can actually understand. I went through real-world use cases. I went through gotchas as well. Because I think a lot of time when people approach RxJS, they want to learn all the things. There's over 60 operators, what do you do? What operators should I learn? But really, you really only need to kind of know 20. And even then, in your code, you might be only using five or 10 and be completely fine with that. And I think a lot of people, again, kind of get mixed up on which operator to use, why. So that type of stuff is really important.
CHARLES MAX_WOOD: Yeah, it makes sense, especially from the standpoint of there may only be five or 10 that you need to know, and then maybe one special case, right? And what's interesting is that a lot of those special cases you can kind of pull a couple of other ones together to make it up. It reminds me a little bit of when I lived in Italy, and I would try and talk to people if I didn't know the vocabulary where I could talk my way around it, right? And so having a limited vocabulary, I still knew it well enough to be understood, similar to code, right? You know enough of these basic operators and then from there you can piece together the rest of it. And then if you find out that there's an operator that does all of it, then you go use that.
TRACY: Yeah, absolutely, I totally agree. I feel like RXJS and operators are kind of like little Lego building blocks. You know, you're kind of just training a bunch of stuff together to try to make it work out.
CHARLES MAX_WOOD: So what are kind of the top handful that people need to know?
TRACY: Same things like understanding the differences between map, switch map, merge map, concat map, et cetera, et cetera. Also, like the different error handling operators. Also, the different compilation operators. So we kind of break it down into that. The talk actually originated because me and Ben like to just randomly record ourselves spending time on the internet. More like I like to do it too, Ben. And he's a willing participant usually. But we created, we have this YouTube channel called Yolo Brello. And we'll just turn on the camera and I'll have him just explain random things to me. I think a lot of the things I'm trying to solve in the talk that I just gave and the different operators I talked about are as the fact that open source maintainers are so overwhelmed. Like you want, I've been wanting to write this RxJS Operators blog post for the entire year now and I still haven't done it. But it was my way of being able to just pull stuff out of Ben's brain. And then hopefully the community can take upon itself to actually add it to the documentation because me and him both haven't had time to do so.
CHARLES MAX_WOOD: Yeah, that makes a lot of sense. Yeah, so is that more or less what you were hoping people would come away from your talk with is just kind of these basic nuggets and it's like, look, you don't have to know the deep, dark, archaic definition of the obscure operators and just kind of know the basics and know where things go and how it works?
TRACY: I think so. I mean, I think you know, again, a lot of people approach RxJS and they just look at it and say, oh my gosh, what do I do, right? But if you just break it down and you're like, oh, I could use this for this, and this is gonna, you know, it's gonna be okay. Then I think it's a little bit more attainable, right? Like a lot of people, when they start to learn RxJS, they think about just Rxing all the things where, you know, you can just use it for very small use cases that you have, kind of get used to it, and then like explore different parts of the library. Like one of my favorite points in time was when we were, me and Ben were building something. I don't remember what we were building. And I don't remember which operator it was, but he was like, oh, I've never used this operator before, ever. You know, and it's kind of funny, right, to hear that from somebody who wrote the library? But I mean, again, like you, this is like the cool thing about ArcGIS, even though it's a library that a lot of people use, the way people use it is just so. So small, you know, I mean, most people are only using like 10, 20 ish percent of the actual library.
CHARLES MAX_WOOD: Yeah, I know that makes a lot of sense. And I think that's probably true of most languages. Most frameworks is just that, yeah, people are going to use the core parts that solve the core issues for them and then maybe dabble in the rest of that stuff. So I'm a little curious, how do you use RxJS in your day to day work?
TRACY: So unfortunately, now that our team is 50 people. I don't get to do as much code as I like. I only get to play, right? So lately I've been playing around with a lot of GraphQL related stuff. I would say in day-to-day work at this.labs though, we help a lot of people who just need higher-level architecture conversations, right? So Ben is a co-founder and, you know, Jay Phelps as well, just a lot of consultancy in their free time on, am I doing this right? Okay, I'm doing this migration. Like a lot of people when they're doing, they're migrating to React, for example. They'll stick everything in Redux observable. And then that's the first step of their migration. So they're just wanting to make sure that they're doing the right things. I think in Angular as well, we do a lot of Angular consulting. And what we see with a lot of Angular consulting with RxJS is just people just get tangled up a little bit. So it's kind of like figuring out where the hot mess is. Are there memory leaks? What are you doing here? Are you making sure you're chaining things together properly, et cetera, et cetera, and then making sure to prepare people for the future as well.
CHARLES MAX_WOOD: Awesome. Well, I'm going to encourage people to go check out your talk. If they want to follow you online or see what you're doing these days, you mentioned the YouTube channel, you mentioned some of the other podcasts and things from this.labs. But are there other good places for people to see what you're doing or maybe reach out if they have a question?
TRACY: I think Twitter is definitely the best way. You can always follow me on Twitter at LadyLite. I do a lot of stuff in, you know, I mean, trying to help women in tech and underrepresented minorities. So I think when people listen to your podcast and they're like, oh, look at all these cool people that are on it. Wow, you know, can I be like them one day? Can I talk to them? But you know, everybody online is so nice, right? Even all the speakers of this conference, you send them a DM and you ask them a question, you know, they're gonna respond to you. I might not respond to you if you're like, hello. But if you ask me a question and say, hey, I really appreciate X, Y, and Z. Can you help me with X? And you have a direct ask, then I can be more helpful to you. So what I'm hoping is that with the stuff that I do as a woman in tech and an underrepresented minority, that I can inspire other women to just start. My first talk, my first tech talk, I had only been doing JavaScript at home for less than three months. Somebody asked me to talk. I was totally freaked out. You know, but then my entire rest of the year was like giving talks at conferences. So, you know, if I could do it with three months experience, anybody can really do. Right. And I love to help people get there.
CHARLES MAX_WOOD: Yeah. And I love that idea. I mean, I feel like technology and programming are things that anybody should be able to approach. Right. And so, yeah, whatever it is that removes that barrier. So yeah, if you're a woman or you're, you know, some other underrepresented group and seeing somebody who looks like you or talks like you or acts like you or loves the same movies as you or whatever, right? And that'll get you there to where you feel like you can. That's really important. And if it's something else, then yeah, figure out that something else. And hopefully we can figure out how to be there for those people too. But yeah, I just love the idea of, it should be available to everybody. And a lot of times the things that really hold people up is just the fact that they, it never occurred to them that they could until they see somebody that you know, makes them think, oh, wait, I'm like them and I can do it.
TRACY: That was like the thing for me, right? Like when I discovered Twitter, I was at a conference, somebody tweeted about me and, you know, the first person that ever spoke to me on Twitter was Guy Kawasaki. Yeah, and I'm like, oh, hey, this random dude, Guy Kawasaki is tweeting at me. And then I found out who Guy Kawasaki was because I was like, whoa, who's this random person tweeting at me? Crazy, right? But that moment of being, you know, Guy Kovacek randomly talking to me, my first day on Twitter made me realize, like, the world is so much bigger than I could have ever imagined in my entire life. You know, and that made me realize I could do anything. Everybody do that, because it's really not hard, right? You just have to do it.
CHARLES MAX_WOOD: Yeah, I've seen that too, just in the sense that I've been fairly involved in the political process in Utah. I'm a precinct chair, and so I go and meet the candidates and you kind of think, oh, senators so-and-so or representatives so-and-so, and turns out they're just people, right? And that's the awesome thing. The same thing with these conferences or the podcasts, right? Last week I did an interview with Douglas Crockford, right? And it's just like, Douglas, Crockford, but I, you know, I chatted with him for an hour and he's just a guy, right? I mean, he's a cool guy and he's done some cool stuff, but he's just a guy.
TRACY: Yeah, no, that's that's like the the power and the magic of you know, I think this world and this tech world that we live In these days, I mean look at all these Instagram stars, right? Like what are you doing? You're just a random person, but you have a million followers. This is amazing I think for tech in the tech world like you can do that too, right? like you can really I mean I've seen so many people just take on like, oh, I got on social media. Oh, I've seen all these people. I'm talking to all these people. Oh, all of a sudden I have 60,000 followers. Oh, all of a sudden I have a career because of it. And that type of stuff is really, really cool to watch.
CHARLES MAX_WOOD: Yeah, and the other thing is that, and this is the great thing about the internet too, is like the Instagram stars, I hear people make fun of, you know, basically Instagram models, you know, so they go on there wearing next to nothing, or they will go on wearing something that accentuates their figure or whatever. But if that's your thing. There are people out there doing it, right? And if your thing is programming, there are people on Instagram that are putting programming stuff up. And if you're into, you know, certain, you know, Star Wars, there's people putting Star Wars stuff up, right? And so that's the great thing. And so you can find your people and then you can find your way into the things that matter around it. All right, well, let's go ahead and wrap up. Thank you so much for talking to me.
TRACY: Yeah, thank you.
Hey folks, this is Charles Max Wood and I just launched my book. the Max Coder's guide to finding your dream developer job. It's up on Amazon. We self-published it. I would love your support. If you wanna go check it out, you can find it there. The Max Coder's guide to finding your dream developer job. Have a good one, Max out.
CHARLES MAX_WOOD: Hey folks, we're still at RxJS Live and I'm talking to Dean Radcliffe. Now, Dean, you spoke earlier today, right?
DEAN: Yes, I did.
CHARLES MAX_WOOD: Yeah, and I was in and out of your talk, so I caught pieces of it. But yeah, do you wanna just give us a quick rundown on what you talked about and kind of the I guess the major focus there?
DEAN: Yeah. So React is kind of the front end tool that I've been using most. And RxJS integrating with React and making React Forms more reactive to make them more engaging for users.
CHARLES MAX_WOOD: Oh, I gotcha. So React Forms is something that's already out there, right? So how do you connect that to something like an observable and make that work for people?
DEAN: That's a great question and I enjoyed, I have one take on the matter, a hook that I wrote that lets you tie into an observable. And I saw a whole bunch of other approaches too for binding an observable to React. And so my head is buzzing with like, oh, there's all sorts of new possibilities.
CHARLES MAX_WOOD: Yeah. Yeah, it's interesting. I used to be a co-host on the React Roundup podcast. And yeah when they made the announcement, I swear, we did like three episodes on React Hooks in a row, right? Cause it's all people wanted to talk about. And so it was interesting to see that tied into RXJS. So what kinds of applications are you building with this technique?
DEAN: The one that I demoed was for my company G2. G2 is a place that people who want to buy business software will go to to read reviews that people leave. And so the review form where the person reviewing a piece of software gives us their very valuable insights on what the software was like for them. There's a lot of fields to engage with, a lot of questions we ask them. And so that was the kind of form that, that was like the primary use case. And then I also had some stuff that I shared about using observables during the development and testing stage via the tool Storybook. I suppose you know Storybook from the React view in Angular world to simulate interactions that users would have with the form or to simulate slow server conditions. RxJS observables can be used to simulate those so that you see what your app looks like under each kind of circumstance it could be used in.
CHARLES MAX_WOOD: That's really cool. So what inspired you to write this talk? Was it just, oh, I'm doing this for work and people ought to know about it or was there more to it than that?
DEAN: Yes, so basically it was like, hey, this is a real-world application. Some of the times I've given talks have been a little more far-flung or far-fetched, but I thought people might enjoy seeing things applied to a real context. Each and every one of those four RXJS operators et cetera, has valid use cases that have come up, you know, in the life cycle of this project. And so I thought it was neat to put them in that context.
CHARLES MAX_WOOD: Gotcha. Are you using RxJS for anything else at work?
DEAN: That's it right now. This has been the project I've been on for about four months now. It's going live next week. It's going to be very exciting and busy. So that's all I'm using it for at work at home and music, I think work very well with observables. And so kind of my passion projects are tying music and animation together with RXJS.
CHARLES MAX_WOOD: Nice. All right, well, I'm gonna encourage some folks to go check out your talk and yeah, cause I know they're recording the talks here at RXJS Live.
DEAN: React forms reactive with RXJS.
CHARLES MAX_WOOD: Nice. If people want to, let's say they watch the talk and they wanna ask you some questions or things like that, is there a good way to get ahold of you?
DEAN: Yes, my Twitter handle is deniusol, easier seen spelled out and linked to. But some of the insights that I've had on how to help people adopt RxJS incrementally, I've kind of bundled together into a repository that is rx-helper. So there's this library, rx-helper on NPM and GitHub that has a Wiki. And so people can open issues or ask me to write about stuff there. That's basically where I'm consolidating how to help people do RX. RX-helper is the name.
CHARLES MAX_WOOD: Awesome. Well, thanks, Dean.
DEAN: Okay. Nice to meet you, Chuck.
CHARLES MAX_WOOD: You too.
CHARLES MAX_WOOD: Hey folks, we're still at RXJS Live. I am here with the CEO of Thinkster.io. Everybody knows what Thinkster is, right? So, yeah. So anyway, no joke, gave a talk at RxJS Live, you spoke yesterday, right? And you've been fairly involved in the conference and yes, you do Thinkster as well, which is, I really love the approach and we'll talk about that in a minute. But yeah, do you wanna just give kind of an introduction and an elevator pitch on your talk?
RAJ: Sure, so the reason I did my talk, my talk was on error handling in RxJS. And the reason I did that was because I felt like I struggled so much understanding error handling in RxJS and good patterns for handling in RxJS and especially the part of error handling. We want to trap errors, but still take an action. So we're getting back out of the error condition into flow. So for me, that was a really important thing. And I felt like all of the examples of error handling didn't really, weren't really useful. Especially, I learned error handling from the Tour of Heroes example in the Angular tutorial. And they didn't focus and talk about this at all as a way to how to do various things in error handling. So I took a deep dive myself into error handling and created this talk on what is error handling like? Helping people to understand what error handling is, the different strategies that we use for error handling, and what sort of things we do. That was the talk.
CHARLES MAX_WOOD: You know, it's interesting, because I think this is a topic that people have struggled with with all kinds of asynchronous work, right? I mean, all the way back to callbacks, and it's like, okay, where the heck is my callback, right? And okay, now where is it getting called from? Because it's not getting called in the traditional synchronous way. And so I'm totally lost. So, where do people get lost in the RxJS world with error handling?
RAJ: Well, certainly there's, because it's asynchronous, part of the problem is you can't do a lot of the simple things that you normally think you could do. You can't just wrap an entire observable inside of try-catch. That just does not work. You can use still try-catches within some of your code at certain points if you understand what is synchronous and what is not. So there's a little bit, I think there's a little bit of problem there. And then of course the other one. The main one is just misunderstanding the different exception operators that are involved. And there's a couple of even creation operators that are used in their handling, understanding those and their place. But again, I think the number one place where people get lost is back to that original point, which is I've got an error, but I actually want to know about that error and do something and understand that specific errors. As an example, let's say that you make an HTTP call, you get a 403 back this, you know, because you're trying to log in and the server says, no, you can't, you have your password wrong, so you get a 403. Well, that shows up in most cases as an exception in RxJS, but you don't wanna just throw up the, hey, I got an error, general trap. You want to instead throw up the little validator on your input box that says, sorry, your username or password is wrong. It's that thing, I think, is the number one place where people get trapped.
CHARLES MAX_WOOD: So how do you deal with that? I mean, you mentioned try catch, and I guess you could put that in the the operator, whatever you're piping to, to manage the response, but I don't know if that's the right answer.
RAJ: So the answer here comes with understanding exactly what catch error is and does and what it expects. So catch error is for anytime there's an error somewhere inside of your observable, then you have catch error that actually gets executed. And what catch error needs is to return a new observable. And ultimately an observable is a way to just produce a value. So that means that I can inside of my catcher say, hey, look at this as an example for HTTP. Let's look at the status code of HTTP. Is it 403? Then if 403, then do something else, just rethrow the error, for example, right? But if it's 403, I'm gonna put a new observable that has say, it's an object that has a property of invalid login set to true. And then now I go back, I'm getting out of the error state or the regular state, so my subscriber just gets this value out and the subscriber could just check, does invalid login, is that set to true? In which case I show the thing, if not, then they did log in, right? So it's about getting catcher and saying, hey, in catcher, if this happens, then put this value back into the observable stream or produce this value that the subscriber can then see and take an action based on that. It's about communication with the subscriber and not just logging out that we had a thing and then going, and then now you have to worry about your subscriber dealing with an error when this is not an error, 403 is not an error. This is not an exception, right? This is actual flow control.
CHARLES MAX_WOOD: So catcher is just another operator?
RAJ: Yeah, just another operator.
CHARLES MAX_WOOD: Good deal. So that makes sense. Does that work for all the cases or are there other ways of dealing with errors that you talked about in your talk?
RAJ: Yeah, so there's three strategies that are important to understand in error handling with RxJS. The first strategy is the retry strategy and that's for things like flaky servers, right? If I'm talking to a flaky server and yeah, error is out, but I think there's a really good chance that if I try again, it's just going to work. So there's the retry strategy. Then there's the catch-and-rethrow strategy. And that one is just about adding more context. So I get an error, but I want to like unbox a little bit of that error, put new messages in. Maybe I actually understand what operation was going on. So if an error happens rather than the underlying error, which might be, you know, something about, hey, this operation or this function didn't exist or something like that. Instead you could say, I had an error while I was trying to do this bigger thing. And that's the error that ends up coming out of the stream. Right? So that's catching, catch and rethrow is adding some type of context. Maybe you're logging things like that. The third strategy is catch and replace. And that was what I was talking about, which is, Hey, I got an error, but I don't want to stay in the error condition. Again, this is under, or this is important to understand that an observable can either be in the emitting condition or they call it, I think they call it next in the error condition or in the complete condition. And so once you go into exception the error condition, usually you don't get out of it unless within catch error you return a regular observable that's not. So you just go back to the regular condition and say, all right, even though I was getting an error, this is very much like try-catch, right? I was getting an error, but in my catch, I just do something and we get back to normal code. So we're not bubbling up errors over and over again. So those are kind of the three strategies.
CHARLES MAX_WOOD: Yeah, and it also gives you an opportunity to do cleanup, you know, in your DOM, in your state tree, whatever. You see this in a lot of other programming languages and in JavaScript in the catch block. It's or the catch function or whatever. Yeah, it just says, hey, you know, even if you don't know what to do, at least do these things. And so, yeah, it puts you in a good place. Very cool. So I'm a little bit curious, how do you use RxJS in your day-to-day work?
RAJ: Well, mostly I'm an educator. So most of my RxJS day-to-day work is teaching RxJS to other people, right? I don't necessarily use it heavily, but I do have a fair amount of Angular development now and then. And so of course I'm using RxJS in there. I haven't tried using RxJS outside of Angular myself yet. So I would say just kind of like light stuff. There's some people that are doing some really cool stuff with RxJS and state and very, very awesome things, stuff I haven't played around with myself yet.
CHARLES MAX_WOOD: Nice. And so you mentioned, you know, I'm an educator. So, you know, you're spending a lot of your time on those other things, right? So you're either, you know, helping people build courses or finding people to build courses or making sure the platform works to help people learn make sure they can validate what they learned, things like that, right? And I really liked the approach incidentally with Thinkster because a lot of the courses is watch these videos. Good luck, right? And with Thinkster, it's much more, okay, watch these videos, do these exercises, get some hands-on experience. And you're using things like StackBlitz, so I don't even have to go anywhere to try it, right? And so that's a really great thing there. I'm curious though, are you seeing a lot more demand for RxJS as opposed to some of the other options out there, where people are coming into Thinkster and saying, Okay, I need to understand RxJS, where's your course?
RAJ: Yeah, so we've been doing some live type of events, webinars and workshops, and we've done some for Angular. We've done some for, we're in the middle of doing some for RxJS, where Aaron's gonna be doing a workshop for us on RxJS, so we've done a couple of webinars about it. And the crazy thing is, is that we're actually seeing more demand for RxJS than just for Angular. So it seems to me like, you know. RxJS is being used outside of Angular, but everybody who is using Angular is interested in RxJS. And then plenty of people that aren't using Angular are interested in RxJS. So yeah, I think that's pretty interesting.
CHARLES MAX_WOOD: That's really cool. And it's interesting too, just from the idea of, you can use it everywhere. And yeah, people are seeing the real potential there. The other thing is, is that it's one of those tools where, once you, especially with Angular, where it's baked in and it's kind of woven through everything, right?
RAJ: Yeah.
CHARLES MAX_WOOD: One way to level up on Angular is to level up on RxJS. And so I could see a lot of people coming to it that way. So do you want to just give kind of a five minute, not even five minute, but just a two minute elevator pitch for what Thinkster is and how you approach things there?
RAJ: Yeah, you bet. So with Thinkster, what we deal with is, if you know that situation where you want to learn a technology and so you take a course or read some blogs and then afterwards you're like, well, I read that and I understood everything that I read yet. I just don't feel comfortable doing it. So then you do it again and again and again. Like a year ago, I really wanted to learn Vue. I ended up going through like three different courses on Vue that all covered essentially the same material. I just was doing the same stuff three times because each time at the end I felt like, oh, I didn't know. Recently I was doing some GraphQL work. It was only a half an hour long course. Even by the end of the half an hour, I was looking at some of the stuff that I was doing and I was like, oh crap, the stuff I did at the beginning, I've forgotten what that was. Just a half an hour later, right? So we solved that problem. People want to learn and actually be able to do something and you don't, you can't learn something just by hearing it. And the really challenging part is that people think they can. They hear something and say in their self, in their mind, oh, I get that, I understand what you just said. But five minutes later, that's gone, right? You got to do hands-on practice. You have to be given a problem. You have to be taught principles, given a problem. And then from that, actually create your own solution. And that helps you create what's called your own mental maps or mental models of things. And that's what actually leads to true learning. So that's what we do. Our educational director, she's got a master's degree in education. She was a schoolteacher for eight years. She helps our authors craft courses that actually teach skills through hands-on practice.
CHARLES MAX_WOOD: Awesome. And then you also run a podcast on the devchat.tv network called Dev Ed. Do you want to talk about that for a second?
RAJ: Yeah, so this is a really fun podcast where we just talk about various aspects that are about developer education, things from learning various topics or technologies, we have a fair number of episodes about that, we talk about how to get into development from various places, whether you're K through 12 or college or transferring degrees or switching from one kind of development for another, just anything that's related to education in the development space.
Bandwidth for this segment is provided by Cashfly, the world's fastest CDN. Deliver your content fast with Cashfly. Visit C-A-C-H-E-F-L-Y dot com to learn more.