JSJ 413: JavaScript Jabber at RxJs Live
In this episode of JavaScript Jabber Charles Max Wood does interviews at RxJS Live. His first interview is with Hannah Howard at RxJS Live about her talk. Hannah is really enthusiastic about RxJS especially when it comes to frontend development. Her talk is about how to architect full-scale apps with RxJS. Hannah gives a brief summary of her talk. Charles having met Hanna previously at Code Beam asks her how functional programming and reactive programming work together in her mind. Hannah describes how she sees programming.
Hosted by:
Charles Max Wood
Show Notes
In this episode of JavaScript Jabber Charles Max Wood does interviews at RxJS Live. His first interview is with Hannah Howard at RxJS Live about her talk. Hannah is really enthusiastic about RxJS especially when it comes to frontend development. Her talk is about how to architect full-scale apps with RxJS. Hannah gives a brief summary of her talk. Charles having met Hanna previously at Code Beam asks her how functional programming and reactive programming work together in her mind. Hannah describes how she sees programming.
Charles’s next interview is with Ben Lesh, a core team member of RxJS. Ben has been working on RxJS for the last four years. In his talk, he shares the future of RxJs, the timeline for versions 7 and 8. With Charles, he discusses his work on RxJS and the adoption of RxJS.
Next, Charles interviews Sam Julien and Kim Maida. They gave a talk together covering the common problems developers have when learning RxJS. In the talk, they share tips for those learning RxJS. Charles wonders what inspired them to give this talk. Both share experiences where they encouraged someone to use RxJS but the learning curve was to steep. They discuss the future of RxJS adoptions and resources.
Finally, Charles interviews Kim alone about her second talk about RxJS and state management. She explains to Charles that many state management libraries are built on RxJS and that it is possible to roll out your own state management solution with RxJS. They discuss why there are so many different state management libraries. Kim shares advice for those looking to roll out their own solutions.
Panelists
- Charles Max Wood
Guests
- Hannah Howard
- Ben Lesch
- Sam Julien
- Kim Maida
Sponsors
- ABOUT YOU | aboutyou.com/apply
- Sentry use the code "devchat" for 2 months free on Sentry's small plan
Links
- https://www.rxjs.live/
- RxJS Live Youtube Channel
- https://twitter.com/techgirlwonder
- https://twitter.com/benlesh
- http://www.samjulien.com/
- https://twitter.com/samjulien
- https://twitter.com/KimMaida
- https://www.facebook.com/javascriptjabber
- https://twitter.com/JSJabber
Special Guests: Ben Lesh, Hannah Howard, Kim Maida, and Sam Julien.
Transcript
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: Hey folks, we're still at RxJS Live and I'm talking to Hannah Howard. Hannah, do you just wanna introduce yourself real quick, let people know who you are and then we talk a little bit about your talk and about RxJS?
HANNAH: Yeah, so, well, I'm just a developer person, but I work on sort of all parts of the stack for our consulting company. In particular, I'm really enthusiastic about RxJS particularly in the use of front-end application development and have been so enthusiastic that I've written about sort of writing a bunch of tools to integrate RX with React and to also model some architectural patterns in RX. So yeah.
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 the 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: Great, so what do you, you said you work for a consultancy, so what do you folks do there and how does that all work?
HANNAH: So I work for a a company called Carbon 5. We're a product development agency. We work with basically everyone from small MVP type startups to I've worked on helping the gap with their inventory systems. We basically just were both design, product and development. Development is kind of our biggest discipline, but we help people make products, whatever it is that they need. We work in kind of like everything. So yeah.
CHARLES MAX_WOOD: Gotcha. So you gave a talk this morning, and I missed it because I was out here getting checked in and everything. Do you want to just give a brief, I guess, elevator pitch for your talk, what you talked about and things like that?
HANNAH: Yeah, so my talk was focused on how to actually architect like full scale front end applications. At Carbon 5, we really, really like RxJS and we like actually all the Rx libraries and we've actually used it on quite a bit of production code to provide essentially a way to model state on the front end essentially is a replacement for the role that Redux would play in a React application. We've also done a lot of Rx stuff with Swift as well. So it's like, you know what, the patterns actually emerge across language. So that's kind of cool.
CHARLES MAX_WOOD: Nice. That makes sense. And yeah, our iOS show, iFreaks, they've talked a lot about Rx Swift and things like that. So yeah, it's definitely interesting how it's spreading. And it's also interesting to see how it's spread in arenas like functional programming. So you get reactive programming and functional programming and how that all plays. And that's really, really interesting. In fact, you and I met briefly at Codebeam in San Francisco. I was there as kind of a media partner, went to the speaker dinner. I think we chatted there for a few minutes and then at the conference. But yeah, so I guess I guess I'm wondering in your experience, how do these ideas come together? You know, the functional programming, because it sounds like you do a lot of Erlang. And, you know, and then you've also got, you know, the reactive programming with RxJS, and there are some reactive programming ideas in Erlang and Elixir, so yeah.
HANNAH: Yeah, so I mean, functional programming's like most, like simple form is that you write your program with ideally mostly pure functions that, you know, don't mutate data in the function. They take valid inputs and they produce outputs. So that immutable property is the kernel. But from that, what emerges is that there's a whole bunch of patterns that you end up using to use these functions, to use pure functions, but still get all the properties you're going to need in a side-effectful environment, which is the same as the data pretty much all environments. And in fact, it's really interesting because a lot of the concepts, part of my talk was this sort of like skating over of a bunch of Haskell concepts, not without mentioning the word Haskell because I'm not, what functional programming, particularly the stuff that gets close to algebra is very, or like the abstract algebra stuff gets, I've found that people are very intimidated by it. But there's a concept that ties a lot of these things together, which is like, you have your pure functions and you have something you wrap them in. Right. And like, there's these different types of rappers. And once you start thinking about the rappers, I call them contexts in my talk, they're kind of like everywhere. Like, and like you have like an array was really just a wrapper around a value that's a collection, right. And a promise is a wrapper around a value that's asynchronous and like, and you know, an observable is a wrapper around a value that'll change over time. And like, once you start seeing that it's like kind of hard to unsee it.
And yeah, and that's something that I talk a lot about as a base for thinking about building applications in in RxJS. And then the sort of add on to that is then how all those different little observables tie together. And it's not so much like a specific prescription as something that that we've noticed has emerged over the time over time in building these applications, which is that like your observables start to look like a graph. We call it the signal graph because you essentially have like each node is an observable that's emitting these signals, right? And then other nodes are getting signals from the base observables and then they're computing new kinds of state. And you just have to kind of like, you know, the challenge is always getting like all the little RX operators, right? So that you get the properties you're going to want, particularly if you're dealing with state. But But yeah, it's kind of a cool model and it's a visual way of thinking about it that we actually work with quite a bit.
CHARLES MAX_WOOD: Very cool. Well, I'm going to encourage people to go look at your talk from RxJS Live. I'm assuming too that your talks from like CodeBeam and some of the other places that you've spoken at are also out there. So people can go check that. So if people want to reach out to you and ask questions or see what you're working on or things like that, is there kind of a place where they can go to find that information?
HANNAH: Yeah, so I mean, you can for sure find me on the Twitters. My handle is at TechGarwonder. And then the work that I'm doing with RXJX is all lives in the GitHub organization, RX React, which I was able to get, even though I don't have the NVM package, RX React, all my stuff is under our namespace, RX React. So I'm still working on it. There's a library called Signal to model the signal graph. And I'm working and I was really, really, really trying to get out a new version of that, that would be super duper awesome. But you know, not quite for this time. So yeah.
CHARLES MAX_WOOD: Good deal. Well, thanks Hannah.
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 here at RxJS Live and talking to Ben Lesh. Now, Ben, do you want to just introduce yourself real quick?
BEN: My name is Ben Lesh, obviously. I currently work at Citadel Securities. Right, not but a few months ago, I was working at Google on the Angular team. And prior to that, I was at Netflix. I am the lead on RxJS right now. So I'm on the RxJS core team. I've been working on that for the last four or five years. Yeah.
CHARLES MAX_WOOD: Nice. I think when I talked to Jay Phelps, he's also working at Citadel Security. So yeah, good deal. So yeah, so you gave a talk yesterday, I believe, and talked a little bit about the future of RxJS. Do you want to just kind of give us a rundown about what what your talk was and kind of give us a preview of what's coming?
BEN: Sure. So the talk, like I kind of started off with talking about some of the history of RxJS. RxJS started off as a JavaScript project that we converted to TypeScript like 1.8. And over the years, there's been a lot of pain around getting types properly through RxJS, especially after we introduced PipeLabel operators, because TypeScript doesn't do a particularly great job with functional libraries. But now it's getting better and better and better. But in order to improve our typings, we need to make some breaking changes to type signatures. And that means that this next version, rx.js 7, will mostly be focused on updating those types and making those breaking changes we need to make, so people can get better type inference out of Rx. And also, the other bit that we're doing in 7 is we're trying to deprecate different signatures that take schedulers where people don't really need to pass them in and these sorts of things, and provide code transformations to help people move off of those deprecated things ahead of getting to version eight. So people will be ready for version eight because version eight is going to be a rewrite of the library to try to make things smaller, reduce some of the API service area and make the the bundled footprint of RX in people's apps, like a lot smaller. Some of the experimental versions that we have show like a reduction of almost like 60% in the size. So, but without sacrificing performance, of course, that's another important goal. So it's seven and eight in a nutshell, what we've got coming up. Timeline for version seven, we'll have an alpha out in the next week or so, but probably get to beta over the course of the next month maybe two months. Alpha is actually already really stable. Google's using it. So Google actually helps us vet our what's in master, which is currently 7 alpha. But the reason it's still alpha is because there's more breaking changes to types that we want to introduce before we move it on to beta. But the nice thing is we have Google kind of vetting those things for us. So it's something people can start using. As soon as it comes out, I wouldn't use it in production because we are going to introduce breaking changes. So if you have CI or something like that, you might see some breaking changes just magically appear in your build if you are using the alpha version. But we'll be through that pretty quickly. There's no definite timeline on version eight because it's dependent on whether or not we can get all the code transformations done during version seven minor releases. So whenever we have all those done, then we move on to version eight. I started working on this stuff for version eight more than a year ago. I'm pretty anxious to get to get to that, but we need to take a really measured approach with RX because so many people use it now. We can't just, we can't break people too fast. Well, we're not going to break people. We're going to stick December, but like we can't get too far ahead of people and let people fall behind. So we need to, you know, take a more measured approach and make sure people can catch up.
CHARLES MAX_WOOD: Yeah, that makes sense. I mean, it's interesting too. You're talking about this measured approach and yeah, you see different technologies make a major leap forward, you know, because the the code's written and a lot of the features are kind of figured out. And so they move forward. And then, yeah, it creates all this work for people to get caught up. And so, yeah, it makes sense to help people kind of step along. Now, Google testing out the alpha version, is that something that came out of you being on the Angular team, or?
BEN: Not necessarily. So Google was using RxJS before I ever worked at Google. And they have a process internally there for third-party libraries, where they pull in the third-party library from a source and they had been pulling it out of RxJS Master. And so what happens is they pull in the TypeScript code and then internally at Google, they build everything from scratch through Blaze, which is their build tool in this giant monorepository. So everyone uses the same version of Rx. And what they'll do is they'll essentially start a PR internally that says, okay, run this process that takes all the TypeScript files from RxJS Master, puts them in here and then tries to build every project inside of Google that uses this, has this as a dependency. And so thousands and thousands and thousands of apps and tests and whatever are run against the code. And if you break a few things, it's probably tolerable and they can fix it internally. But if we break a whole bunch of stuff, then they're going to report back to us just via cooperation and say, hey, this one change you made broke all of these things. And we reinvestigate like whether or not we need that change, or how we can do it better, or something like that. So, but it was, it wasn't really born for me being on the Angular team. Well, I was on the Angular team most of the time. I was working on just Angular-related stuff, nothing RxJS related, but it's a similar process to what Angular uses. And it's definitely related to Angular in that it's a dependency of Angular. But it also has just a lot to do with how Google kind of deals with third-party software and some cooperation between myself and them.
CHARLES MAX_WOOD: Yeah, that makes sense. I'm curious then, you're the lead on RxJS. It sounds like you were working for Netflix and then Google, and now you're at Citadel Securities. So do they pay you to work on RxJS then at all? Or is this mostly what you do when you get home from work? Or how does that all work out then? Because you also mentioned that on the Angular team, you were mostly working on Angular stuff and not necessarily RxJS stuff.
BEN: So the short answer is no, nobody pays me to work on RxJS. I've obviously there's some gain to be had in it because you get a decent reputation and it helps you in your career or whatever. But there were times where I did stuff that was RxJS-related at Google. At Netflix, I was paid to work on it, but not the whole time I was at Netflix. A lot of the time I was working on other stuff and that was just a side project that they allowed me to do. So it's never ever been my main job function for sure. And now that I'm at Citadel, so I actually work from home most, most of the time. And, uh, when, like one week a month, I go up to Chicago or whatever, but that, what that does mean is I don't have a commute. Uh, so that cuts compared to what I was doing in California, like three hours out of my day. So, so I've got, I've got a lot more time with my kids and I've got a lot more time to attempt to work on, uh, RxJS and try to stay on top of things. Um, I also worked a lot of long hours at Google, which I think prevented me from contributing a bit to RxJS. So like, you're gonna see more contributions out of me in the, definitely in the short term and probably in the long term as well. But yeah, no one's paying me for it. I wish. But no.
CHARLES MAX_WOOD: So when should we expect to see RxJS 7 beta release candidate and then final and then version 8?
BEN: So it should happen fairly rapidly. The real, the challenge is going to be, you know, trying to iron out all of the typing changes that are necessary to get us to beta, because those will be with the breaking changes show up. And then, but there's no breaking changes to runtime. Like anybody who's using just the JavaScript version is not even going to notice. They're not even going to blink. It's mostly just that there's a few very minor edge casey changes to runtime behavior, but most of it is most of it's just changing to the, changes to the typings themselves. So once that's in, the beta should be relatively short. And I don't even know if we'll go to release candidate and then go, or just go straight from beta to release because it's not like a complete rewrite or something. It's a little bit more of a subtle change, if that makes sense.
CHARLES MAX_WOOD: So I know that RxJS is used pretty heavily by Angular. Do you see it used as widely or heavily in projects from other arenas in the JavaScript space?
BEN: I see it used all over the place. Of course, being that I work on RxJS, most of the things that people present to me have something related to RxJS in it. I can say that in workshops that I run through RxWorkshop, I'll have probably, sometimes more than half of the people will be React developers. So I definitely see it. I definitely see a lot of it. I wouldn't say like when you say widespread, it's relative. Like when you look at Angular, like 99% of the apps will have ArcJS in it because of how like Angular's kind of adoption of it as a first-class thing. With React, it's probably a smaller percentage, but like React's also got a bigger slice of the pie right now. So it's intermixed. Like I see it a lot. You used a lot in node-based tools. Build tooling, other things like that. It's a common dependency amongst other things that are common dependencies, which is kind of interesting. They're just node-based modules and stuff. So it does have a lot of broad use cases. There are some very, very popular apps and projects out there, like Slack and YouTube and PlayStation and some of these other things that use it as an open source library. And you can see this because you can go and see the open-source licenses that they use. But and none of those are Angular. They're like Polymer and React and things like that. So it is widely used for a variety of things outside of Angular. But I would say nowhere has the 90% of people do this scenario like Angular does.
CHARLES MAX_WOOD: So the last question I have is if people want to reach out to you about contributing, or they have ideas, or they have questions about RxJS, or they want to learn more about reactive programming or any of these things. Is there a good place for people to figure out or reach out to you?
BEN: Yeah, so I'm at Ben Lesh on Twitter. Like DMing me on Twitter is the easiest way to make sure that I see what it is. You can go on and file issues and things like that in GitHub and at me, but like honestly, my GitHub notifications are destroyed all the time from like old things that people comment on to just like me getting notifications on everything. So I'm not likely to see an issue just because someone put it in there or added me on it. So it's DMs on Twitter are the best way. And even if the DM is just like, hey, look at this issue on GitHub. That's a good way to get me to do those things. The one thing I will ask people though is if you have a question about how to do something on stack or on our in RxJS, like post the question on Stack Overflow and get it answered because then other people that want that answer can find it via Google search or something. Because if you just ask me and I answer it privately, that's just not, it's not helping anybody else. So, and it's also not a great forum for doing that and like Twitter DMS or whatever. And I can be slow to respond sometimes because I'm busy, but I always do respond to people who DM me on Twitter for sure.
CHARLES MAX_WOOD: Great, well thanks Ben.
Hey folks, this is Charles Maxwood and I just launched my book, The Max Coders 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 Coders guide to finding your dream developer job. Have a good one, Max out.
CHARLES MAX_WOOD: All right, folks, we're still at RxJS Live and I'm talking to Sam Julien and Kim Maida. And yeah, they just gave a talk. It was RxWatt. And yeah, it was really good. Talked about some of the stuff that kind of trips people up. But before we dive into that do both of you just want to introduce yourselves real quick? Let people know who you are.
SAM: I'm Sam Julien, and I'm an Angular GDE, and I'm in DevRel at Auth0.
KIM: I am Kim Mida, and I actually have the same credentials as Sam. I'm a DevRel at Auth0, and I'm a Google Developer Expert.
CHARLES MAX_WOOD: Very cool. So what inspired this talk?
KIM: So I know a lot of people have trouble learning RxJS, and I think that's why I'm here. I had a friend actually who came up to me very, very recently and he had a scenario and I was like, RxJS will solve all of your problems. And he came back to me and he was like, RxJS did not solve all of my problems. It was really, really hard. So taking sort of experiences that people were having issues with learning, I think, and sort of addressing those and talking about tips to help people get over those issues, I think is just an important topic.
SAM: Yeah, and I've had the same experience of over the years learning RxJS. And I think because RxJS got swept up into Angular, it was sort of assumed that people would be able to pick it up really quickly. But the fact is that it's a really difficult set of concepts to wrap your head around on a difficult set of vocabulary to learn. And so we just wanted to sort of lightheartedly admit to the fact that it's really hard to learn, but also do it in a way that we give people some how to get into it and how to learn it better.
CHARLES MAX_WOOD: Yeah, that makes sense. So, you know, I don't wanna rehash the whole talk, but where do you find that people get, I guess, tripped up the most?
KIM: I think understanding what an observable is in the first place has, gives people a lot of issues. And I think some of it is problematic because a lot of times the first example when they're doing something like trying to learn the, you know most more recent Angular and also learning RxJS at the same time, the first example they usually come across is like an HTTP call. And traditionally, we don't think of an HTTP call as something that is a stream, something that continuously gives you data over time, you're like one and done most times. And introducing people that way to observables can make it a challenging journey for them to sort of figure out where to go from there when they do actually face real reactivity. And also the terminology, like learning the terminology, learning about the operators. I think there's so many operators, people kind of get very overwhelmed by just the sheer amount of choice and they're afraid of doing something wrong.
CHARLES MAX_WOOD: Yeah. I think that last basically phrase, they're afraid of doing something wrong. I think that trips up a lot of people. And so it's not even just, you know, yeah, like you said, there are a lot of operators, there are a lot of things going on, there's new terminology, I don't completely understand what this does, but yeah, and I'm afraid to get it wrong, you know, I'm afraid to make a mistake, you know, whether it's because I look bad or it's because, you know, I mess up the code for my teammates or whatever, right? There are a lot of reasons for that. So yeah, and you explained it all really well as far as like, oh, I get that idea, okay, I understand this piece. Were there things that you had to pull out of the talk or things that you thought about putting in that you didn't?
KIM: Well, there's just like a ton of content. There's a ton of things that people have trouble with. I think we tried to just distill it down to the larger categories. So there's a lot of examples of specific operators that people just have a lot of trouble with, but we wanted to sort of address it as like, choosing an operator in general can be difficult, but if you understand where like the context is, then it just becomes easier to do.
SAM: I think the only specific thing we had originally wanted to talk about all the combination operators like switch map, concat map, exhaust map, all of them. And we just realized that that was just gonna take up too much time and so that's why we distilled it down to just one or two things. But that was probably the only area. But then you ended up talking about that in another talk which was amazing so we didn't even.
KIM: We didn't even need to talk about it at all. Right, we had people pulling double duty, huh?
CHARLES MAX_WOOD: So I guess the other thing that I want to just talk briefly about is, you know, we come to this conference and no pun intended, but I've made the analogy before that talking about RxJS is like talking about the pipes in your system, right? And so it's like, oh look, now we have galvanized steel. Great, you know, and so it's a solution, but people have promises and other things that solve, in some cases, the same problem. And so people start getting caught up with, OK, so why? Why RXJS, right? You've got a PVC pipe that'll carry water or a galvanized steel pipe that'll carry water. So, you know, do you see people adopting RXJS more in the future or are people going to stay where they're comfortable, where they have something that kind of works and doesn't hurt too much to use? Do you see a movement toward RxJS at all?
KIM: I do, honestly. I've been recommending it to people. But like I touched on in my talk, when I recommended it to someone, I said, all of your problems will be solved by using this. And he just had a huge barrier trying to grasp the concepts. And then he was overwhelmed by the resources and he didn't know where to start. And I think just as we refine those resources, it'll be easier and easier to recommend to people that they use RxJS to solve problems. People who are familiar with RxJS can see these complex issues that people are trying to solve with reactive UIs and nested data calls and all of this type of thing. And as we get more resources, as more people go out and recommend it, I think there will be greater adoption like across frameworks and, and in JavaScript in general.
SAM: Yeah. Angular sort of forced the issue. And so it sort of caused all the Angular developers to need to learn it. But you're seeing more and more people in like the react system and things like that start to use it. So I'm hoping that like with any other programming paradigm, I was going to say new, but RX has been around for decades almost so, but with any programming paradigm, you sort of see a swing in one direction and hopefully it'll just kind of come back and for reactive UIs people will start to use it more and more.
CHARLES MAX_WOOD: Yeah, that makes sense. I guess the last question that I have before I ask you how people can get a hold of you or find what you're working on is at Auth0, in your work day to day, what uses are you putting RxJS to?
KIM: So recently at Auth0, we produce quick starts for people to integrate the Auth0 platform with different technologies. So one of the technologies that is very, very popular is Angular. We recently released a spa SDK for authenticating JavaScript apps with new best practices from the IETF. And the thing is that library is actually written with async await. So when you try to use the library with Angular, which is reactive, it's based on RxJS, then you run into a lot of issues because the sort of universal implementation for general JavaScript is to use async-await. So what I did was I rewrote our authentication tutorial for Angular in the Quickstart to use RXJS, and there was sort of a lot of, like, from in it, there was a lot of concat map, and, but it worked really elegantly, and it works across the Angular platform very, very smoothly with reactive programming. And so that was definitely a really fun exercise to do. And now the implementation that we can recommend to people is idiomatic and canonical for Angular, which gives people a better developer user experience.
CHARLES MAX_WOOD: All right, so I guess the question now is if people want to reach out for help or ideas or see what you're working on or anything like that, where are you online?
SAM: I'm just at Sam Julien on Twitter. I have samjulene.com and then on the Auth0 blog, I have a bunch of articles on there that people can read, including a bunch on Angular and RxJS and things like that. And that's pretty much it for me.
KIM: So I can mostly be reached on Twitter. I'm Kim Maida on Twitter. It's super original, but easy to find. And my personal website's on my Twitter bio, so really Twitter's the best way.
CHARLES MAX_WOOD: All right. Good deal. All right, folks, we are here at RxJS Live. We just talked to Sam and Kim, but Kim gave another talk. And so we're gonna talk about that for a minute. And it's one of those hot topics in the JavaScript framework arenas, which is state management, right? The joke used to be there's a new JavaScript framework every two minutes, and now there's a new state management library every two minutes, right? So how does RxJS play into this idea of state management, and how does it make it easier?
KIM: I think one of the important things to know about RxJS in relation to state management is several of the state management libraries are built on RxJS. So the concepts in RxJS, things like behavior subjects and some of the operators just lend themselves really well to building something like a state management library. The thing is, once you go and start to learn reactive programming, you can actually do pretty simple things with RxJS alone without these other libraries, and be able to build your own tailored state management to the project that you're working on, to the team that you're working with. And in addition though, it also really, really helps you when you do find yourself in a situation where you do want to use one of those third party state management libraries like ngRxStore or ngXS, and sort of similar things like that. So knowing how to manage state reactively with sort of the underlying technology really helps you understand the state management libraries that are built on rxjs you get to know how they work you can just have a greater understanding of what it is that you're using
CHARLES MAX_WOOD: Very cool so can you give us some examples of some of the state libraries that are built on rxjs
KIM: So redux observable and there's ng rx store is also built on RxJS. I believe NGXS is built on RxJS. There may actually be more than that, honestly.
CHARLE: Right. And so do you use RxJS to integrate with some of these libraries as well? So, you know, when you put data in or pull data out or to communicate with it?
KIM: Yeah. So for example, if you're using something like NGRX in an Angular application, then the state management library itself is built on RxJS and you would use RxJS to interface with it for sort of like managing subscriptions and things like that.
CHARLES MAX_WOOD: So essentially then if I'm connected to a web socket, I'm probably gonna use something like RxJS to get the data and then put it into the state management library. And then as things change within the sort of the main state management store, then it has another observable that comes back out and everything else reacts to that.
KIM: Yeah, I mean, there's different patterns being used by all of these different state management libraries. And that's one of the kind of neat things about the fact that they are appearing. There are so many of them because it's a really like a one size doesn't fit all situation. So, you know, you were talking about it used to be every few minutes, there'd be another JavaScript framework. And now it's every few minutes, there's another state management library. But the underlying reason is because people are trying to solve different problems in different ways and having everybody in the world use like Redux or Flux Pattern doesn't make sense for all teams. And the nice thing about just knowing how to manage state reactively on your own is that if none of the state libraries work for you, then you can make something at fairly low costs that will work for you.
CHARLES MAX_WOOD: Yeah, that makes sense. That makes a lot of sense because yeah, most of state management is just reacting to changes, either coming in or, you know, coming out and having the DOM or anything else updates as a reaction. Does that make sense? Do you have any... So if somebody is looking for a solution because they can't find something that really works great for them, do you have any advice for people who might wind up rolling their own or partially rolling their own off of something that already exists?
KIM: Yeah, so I proposed, I showed a couple of examples of ways that you can do it. Like if you do wanna roll your own and so like, if you look at sort of my slides of the recording for the talk, then you can see a couple of different examples, like one's using the scan operator to get the accumulated value that's being stored in the state and then the new value and produce a new object based on that so that you have immutability and things like that. And then the other example sort of goes into how you might address something like optimistic updates with RxJS. But I think one of my key points too is that these are just examples, a lot of more people, I'm sure people smarter than me have come up with really neat strategies to do this. And there are a lot of articles on this online actually about using something like service with a subject, the different ways that you can use different types of subjects to create an observable store and things like that.
CHARLES MAX_WOOD: Nice. Well, I'm going to encourage people to go watch your talk. I'm sure there's a bunch more stuff there that you went over. So Yeah, if people want to reach out though, if they have a question or something, what's the best way to do that?
KIM: So my Twitter is probably the best way. I'm Kim Mida on Twitter and links to any of my other sites will be in my Twitter bio, but that's where I'm most active and most reachable.
CHARLES MAX_WOOD: Good deal. Well, thanks Kim.
KIM: Thank you.
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.
JSJ 413: JavaScript Jabber at RxJs Live
0:00
Playback Speed: