Jed Bartausky:

Welcome back to another episode of the React Native Radio Podcast, episode 318, maintaining open source libraries as Software Mansion with Kaper Capus.

Jamon Holmgren:

Ma, I have a question for you. When you are working on a project, do you put all of the windows for that project, like your terminal vs code, a browser, a simulator, all in the same screen, or are you doing sort of like the Mac Os swipe back and forth spaces thing on your screen? Or do you have like 85 monitors? How do you arrange your windows when you're working on a project?

Mazen Chami:

Wow, what a question. How much time do you have? Well, we could talk about this the rest of the episode if you want. That's fine. Okay. I'll give you the TLDR. That's very long here. I have two monitors and my laptop screen all open at the same time. My laptop has 1, 2, 3, 4 desktops. One monitor has three. The other monitor has 1, 2, 3, 4, 5, 6, 7 desktops. Each desktop is arranged by item, so I have one for podcast episode, I have one for client project. I have one for mail. I have one for Slack. Like I said, I could keep going here and then within each one it's organized in a certain way for ergonomics so that I'm not turning my neck too much. Most of you that have seen me, I'm tall and I always have neck and back issues, so I kind of hold it that way. But what I do is when I'm working on a client, one monitor on the left has all the windows. So for me to do all my Googling email, JIRA and all that, and the main one, one right in front of me has iOS, android simulator, emulator terminal, and the code all in one, and it's organized in a

Jamon Holmgren:

Way. Oh man, that's awesome. I love hearing about this stuff. Okay, I'm going to introduce him in a second, but Kasper, you're our guest, but I want to hear your setup as well, but how do you approach this?

Kacper Kapuściak:

I just have another monitor and my laptop and I'm just swiping crazy between the windows, have all of them as a full screen window and then swiping all the time, switching

Jamon Holmgren:

Everything, full screen,

Kacper Kapuściak:

Most of the stuff full screen, obviously not simulator, but yeah, like slack, chrome, this type of thing.

Jamon Holmgren:

Wow. Yeah, I'm kind of a hybrid there where I have some full screen like Slack and Discord and stuff, so I just have one 5K in front of me, and then a vertical 10 80 p on the left, and the vertical has stuff that I monitor all the time. We have some internal tools and things like that as well as Discord, and then in front of me is more project oriented stuff. So yeah, each space is a project, so it'll have its own, I might have three projects going. These are all usually side projects or open source or something like that. So they'll have their own VS code, or actually now I'm on Cursor, their own cursor, their own simulator, their own web browser, their own, everything that I can just, it's all self-contained in one space and they're not full screen. There's a little bit peeking out of each window, so if I want to switch to Cursor, I just click on the part that's showing up. That's how I switch between Windows. Everybody has their own workflow. I'm sure everybody in the audience right now is thinking about theirs. And if you want to tweet at what is our, it's React native, RDIO, sorry, I couldn't remember it. If you want to tweet at react native RDIO and tell us what your setup is, how do you approach window management in your projects? We might do an episode at some point where we talk about all the different ways that you can do that, because that'd be really fun to do.

Mazen Chami:

I need to work on mine. I mean, you didn't even ask how many tabs I have, but we'll keep that for another episode.

Jamon Holmgren:

I really feel like this should be an episode, but we're not here to talk about that. We are here to record a podcast about a different topic, so let me introduce everybody. I'm Jamon Holmgren, your host friendly CTO of Infinite Red. I am in the now starting to turn cooler and rainy Pacific Northwest with my wife and my kids. I play rack hockey and by the way that just started and my teams are amazing, which means I don't actually have a lot to do. I did just win a game in a shootout by shutting out the other team. So I'll take a little credit and I drive my tractor whenever it's not broken, which it is currently. I'm joined today by my co-host Mazen and our guest, Kapu Mazen lives in North Carolina with his wife and toddler. He's a former pro soccer player and coach and is a senior React native engineer. Also here at Infinite Red Kasper is a React native open source developer at Software Mansion. He lives in Rako, Poland or otherwise pronounced Krakow or Krakow or any other way depending on where you're from. I told someone that I was going to Poland and they asked what cities I'd been to and I said, I've never been to Krakow, and they were like, that's not how you pronounce it. And I was like, oh, apparently that's a German way to do it. Is that right? Kasper you say?

Kacper Kapuściak:

Yeah, pretty close. Yeah.

Jamon Holmgren:

Yeah, I don't know. I probably butchered it in all of them, but anyway, Kasper has been working for Software Mansion for four years and was originally doing more front end, I assume Web, and then kind of went more toward mobile development React native. He also hosts the React native community in ko, and so that's pretty fun. Kasper, welcome to the show.

Kacper Kapuściak:

Hi, thanks for having me. How's it going?

Jamon Holmgren:

Pretty good. Second time on the show. And you also were at Chain React earlier this year.

Kacper Kapuściak:

Yeah, that's true. As a speaker.

Jamon Holmgren:

Yeah, that was awesome. Okay, before we get into the topic, let's hear from our sponsor. Infinite Red is a Premier React native consultancy located fully remote in the us. We're a team of 30 senior plus level React native developers and support staff and have been doing this for nearly a decade. If you're looking for React native expertise for your next project, hit us up at Infinite Red slash React native, and don't forget to mention that you heard about us through the React Native Radio podcast. Alright, let's get into our topic for today, maintaining open source libraries at Software Mansion, and I think I'm actually really curious to pick your brain on this Kasper because obviously we do open source here at Infinite Red. We're a much smaller team. How big is Software Mansion now at this point?

Kacper Kapuściak:

Around 300 people working at Software Mansion at this moment, so we are growing really rapidly.

Jamon Holmgren:

Yeah,

Kacper Kapuściak:

That's a lot of new challenges.

Jamon Holmgren:

By the time this comes out, it might be 400, 500, 600. Yeah, no, I know you're growing very quickly, but you're really known for your open source. This is kind of like software mansion, open source, and it's not just like it's all the way through your organization because of course Christoph and I have kept a bit of a, we play chess every time we see each other and stuff, and I know that that's hacking on open source projects all the time and whatnot. It's from the top to the bottom all throughout Software Mansion. So first Cut, please tell us a little bit more about yourself and how you got to where you are.

Kacper Kapuściak:

So yeah, as you've introduced myself, I started as a React developer, but then when I go to Software Mansion, I started my React Native career in the React native open source team. I specifically say React native open source team at all times because we have different open source teams at Software Mansion. This is not a single open source team here. So I came to Software Mansion, I was a React Native Screens maintainer for a year. Then I went to React Navigation for a couple of months with Satya. You had Satya on the podcast I think a couple of episodes later.

Jamon Holmgren:

Yeah, yeah.

Kacper Kapuściak:

After that I pretty much rewrote most of the reanimated documentation from scratch with the stylings, et cetera. So basically I would say that I'm going Curam needed the most at the moment in the organization. So it does switch. I do switch roles on a weekly basis and this is normal for me.

Mazen Chami:

That's awesome. That's pretty cool. You did mention that you like to say you're on the React native open source team. So what is software mentions model when it comes to open source contributions and what other open source are we talking about here? I think we're just so pigeonholed in the idea of React native open source, what other open source is out there?

Kacper Kapuściak:

Yeah, so at Software mentioned React native Open Source is not the only open source team. We also have our own streaming framework for Elixir. It's called Membrane. It's for

Jamon Holmgren:

Elixir. No kidding.

Kacper Kapuściak:

Yeah, we have many developers specializing at Elixir for well at mentioned in Elixir.

Jamon Holmgren:

Just as an aside, did you know the Infinite Red used to do Elixir as well? Oh wow, way back in the day. Yeah, we stopped doing that probably in around, I want to say 2019, I think somewhere around there, 20 18, 20 19, but I've written a fair amount of Elixir. It's a lot of

Kacper Kapuściak:

Fun. So we have a lot of codes written in Xer also for our clients, not also for open source. So this framework, you can build your own Google Meet, zoom or Twitch. It's for streaming audio and video.

Jamon Holmgren:

That's cool. What's funny is I had heard of Membrane before. I had no idea it was by Software Mansion.

Kacper Kapuściak:

Yeah, there you go.

Jamon Holmgren:

That's awesome.

Kacper Kapuściak:

So we also do different open source teams, but for sure React native Open source team is one of the biggest or the biggest one at Software Mansion and it's an important part of our business quite literally. There are different reasons why we have this team. The team creates the libraries that we both use like Reanimated Gesture Handler, reive screens. They're very important for the whole ecosystem. They're one of the most important libraries in reactive ecosystem. So there's a whole team that makes sure that they're well maintained.

Mazen Chami:

That's pretty cool that you all kind of focus on all that kind of stuff, and we talk about it a lot here on the podcast, how important the open source community is and the fact that software mention is investing so much into it. I think this is great. I want to not necessarily shift gears, but keep talking about your open source, but I want to talk about one package in particular. First, I think it's probably the most valuable, but also underappreciated package that you all have and that's React Native screens. People can agree and disagree with that, but I think this is one that you can't necessarily have an app unless it's a one page app, which I don't think exists anymore. You can't have it without having this underneath the hood no matter what you use, if you even use Expo router, which uses React navigation, which uses React Native screens. So React Native screens is underneath it all. It sounded like you also maintain React Native screens specifically. Can you talk a little bit about React native screens and also maybe talk to us about some new features that are coming out with V four particularly?

Kacper Kapuściak:

I did, yeah. Okay. So React Native Screens brings native navigation primitives to React native. So the first versions of React navigation used to be written singularly in JavaScript. So there are no UI kit underneath, no fragments with React native screens. We have a native stack which uses the truly native primitives of the platform. There are no CSS or JavaScript mimicking. You're using truly native stuff thanks to this. We have large header, for example, on iOS or a search bar or truly native animations between screens. So right now we are working on a new version of Rene Screens. It'll be the 4.0. It'll come with React Navigation seven as one of the main dependencies of React navigation as we come with like custom tens and bottom sheets on iOS and Android. Right now in React native, we are using bottom sheets implemented in JavaScript with Reanimated, which for most of the stuff they're okay, but they're not truly native. The platforms give us native models, native bottom sheets, so we can just use them and it took us a lot of work to bring these. They're still not ready, ready yet, but they will be in a couple of weeks. So it'll have a similar API to what we already know. So for example, there is a bottom sheet from Go Home, right? So it'll have a similar API to the one React native developers know and love, but will be native.

Mazen Chami:

That's awesome. Yeah, and I think you touched on a lot of things there where the one important part is you're bringing native primitives to React native via JavaScript, API and all that kind of stuff. And for our listeners, you heard it here, react native is native, it's just being rebranded, not rebranded, but being brought to you all the way up to JavaScript so that it's easier to access all this native stuff hybrid wise.

Jamon Holmgren:

Yeah, and I think this is kind of a common theme for Software Mansion libraries where it's this really well-designed, I don't know, almost like dance between the JavaScript and the native side of things all the way back to, I don't know what the first one really was, but I do remember encountering Reanimated for the first time

Jamon Holmgren:

And knowing that it was like we have the animated APIs with React native and there's used native driver, but that brings all kinds of there. There's a bunch of limitations that happen when you're doing the used native driver thing where Software Mansion seems to take the approach of we want to do all those things with Native, but we don't want to be limited by the JavaScript bridge. In the case of the old architecture, we want to take advantage of new things. So we see that with obviously React Native screens being a big part of that, and I think that's cool. I think that more within the React native community need to embrace the native side, at least for libraries like application code. Sure, you may want to mostly write JavaScript, totally get that. But for libraries and for functionality, being able to write native code effectively and design it in such a way that you can write the JavaScript without losing a bunch of functionality, I think is super important. So it seems like you guys get that.

Mazen Chami:

Yeah, you brought up Reanimated Jam and I'm going to shift conversation a little bit to there. I think I did a workshop internally at Infinite Red a while ago where I tried to do, what was it? I tried to put together an oval, a couple ovals on top of each other and animate in the React native logo sort of thing. I did it in React native animated, and this is no offense to the core team, but it worked. It was performing. I got it performant enough, but then I was like, all right, that took us 30 minutes, 45 minutes. Now let's do this in Reanimated. This was Reanimated V three when it first came out, and it took less than half the time and it was just as performant and it looked slick. So I think that's a big testament to what all you all are doing, still giving us access to all that kind of stuff. So my question maybe leaning towards Reanimated and maybe just open source in general from you all is what do you all, when you're putting these APIs together, when you're putting these packages together, what do you do? What's the first step? Right? Because a lot of people out there are like, well, I want to put together a package, but where do I start? And you guys, you do a great job with it, right? It's readable. The docs are great. I guess ergonomic is the word here. I'm trying to you the developer experience is great.

Kacper Kapuściak:

That's an amazing question. So there are different parts of building libraries, building open source software. So we first think about solving a problem. This is the most important part. If you're not solving a problem with your product, no one's going to use it, right? So first we solve one of the problems. So the problem with when the reanimated was born was animated wasn't good enough. We could do better with real native screens. There were no native primitives in react navigation, so we could do better. So if we could do better, we can create a library. Next step, we try to think about an API that a user would like to use. So we do not start with an implementation. We start with an API. If you're just exploring if it's possible, then yeah, sure, you're trying to build separate run times, create work, lets then you first create that technology to make it possible to build reanimating in the first place.

Kacper Kapuściak:

But day-today, when creating new libraries and new features for those libraries, we try to focus on the API first. If you have a perfect API, for example, with layout animations, it's not incredibly easy API to use. You just add a single line entering and then fade in. If you have a perfect API, then we think, okay, is it possible to implement this so we have a perfect API? Then we think, okay, let's try to implement this as close to the ideal use case as we have. So then we have a good library. But a library is not only, it's just a part of the product. There are different parts of product of building libraries, but other products as well. So for example, someone has to use your library, right? Someone has to know about your library. So this is marketing, right? You have to put out the words for people. You have to spread the word on Twitter, discord, Reddit, wherever, right? But also you need to make it easy for people to use. And as author mentioned, we believe the documentation is also part of the product. It's not the documentation of the product, it's part of the product.

Kacper Kapuściak:

And we've been focusing really hard on the reanimated documentation, the just documentation as well, but as we'll be rewritten later on. It's a lot of work, trust me. So this is the whole packaging. It's not just building libraries. You're building a product.

Jamon Holmgren:

That's right. I like to call that API first development. I like to call it read me driven development. So you write the read me first. You're like, this is how the API works. This is how it feels, this is how it looks. You're giving code examples and stuff, and then you work backwards from there and you say, is this even something we can do? It

Kacper Kapuściak:

Seems about right.

Jamon Holmgren:

Yeah. Some of our best open source that we've ever done comes out of stuff like that. And it's also a lot of fun. It's really fun. It's some of the most fun coding because you just have this blink canvas to paint on. Then yeah, eventually you have to get into the technical details and sometimes you're like, yeah, we can't quite make that work. That would be nice, but we can't. But more often than not, you can figure it out. I want to get to a newer thing. React native web GPU. Tell us what this is because I think a lot of our audience probably has never even heard of it.

Kacper Kapuściak:

React native web GPO is actually not a software mentioned library. So I want to get this straight. This is a library created by William. He's our close friend, but we do not own the rights to the library.

Jamon Holmgren:

Oh, okay. I actually didn't know that.

Kacper Kapuściak:

Yeah, we do have a developer that helps William Kandon to iron some bugs, helps on the issues. So we do kind help with the development of Frank Native Web GPU, but we do not own this. But yeah, what is React native web GPO? So React native web GP gives you access to web gpu, APIs and React native, right? Web GP is the API used by browsers to have a common API on top of native GPU APIs. So you do not write stuff in metal. Vulcan, DirectX, OpenGL, you have a common API in JavaScript, which is way more useful for our cross platform development, right? It's so easy that way. And this also gives us one amazing stuff. You can use three JS and React three fiber as you would on the web in an incredibly performant way because currently in React native we build 3D stuff using OpenGL specifically expo gl, which uses OpenGL underneath, but OpenGL is kind of deprecated on Apple platforms, I believe. So it's throttled down, so the performance is worse than it could be. So web GPO is another step forward and React native web GPU uses don, which is one of the implementations of web GPU standard. It's a c plus plus library. And this is perfect for React native because we have c plus plus bindings in React native, which are easily done by JSI. Technical details, sorry.

Mazen Chami:

Yeah, absolutely. That's good. Yeah, I think we talked about how you're contributing to React native in general, but it also sounds like some part of software mentions open source model is also helping out William can deal and stuff like that. And I want to ask you another question. You all are helping Expo, and can you talk a little bit about how you contribute to Expo and what that relationship looks like for the community?

Kacper Kapuściak:

So actually Expo is our client. We are a software agency and for a lot of years we've been working with Expo and the employees at Software mention even say that, Hey, I work at Expo at Software mention, which doesn't make sense, but this is how it is. They have an important part on the Expo SDK team and in the EAS team, they play key roles at the expo company.

Mazen Chami:

With that being said, how do you see Expo's role in the community and the future of React native with Expo? Because recently meta announced that if you're building a React native app, you should use a framework and the framework is expo.

Kacper Kapuściak:

Yeah, so as you've said, this was said at least twice. First one on React conf, the second time at React Universe conf that we should use frameworks and the frameworks of Choice by Meta is Expo. And there's a mantra going on for a couple of years now saying just use Expo for your React native development. And I think this will be the default point forward Expo is incredibly important for us. They have a lot of packages that makes it easier to build recogni native apps, and they are trying to get the cutting edge in front of us as soon as possible, which is really cool.

Jamon Holmgren:

Yeah, I think we have a similar approach at Infinite Red where Expo just smooths over so many parts of the development process, and now with continuous generation and custom config plugins, you really don't have to give up any of your potential power of how you approach and build React native apps. It's pretty awesome. Expos not sponsoring this podcast, but we talk about 'em so often that they might as well. But yeah, absolutely on the same side of things. And what's pretty interesting after all these years is that it feels like React Native is still growing in popularity. And I know you've been at Software Man for I think four years now. From your experience, do you feel like you want to keep going in React native? Do you see other areas that are really interesting that you'd like to expand your own career into, or how do you look at that?

Kacper Kapuściak:

So I see firsthand how React Native improves year over year. It's literally getting better and better. It's getting more popular. I think it's a framework of choice for me for building any first platform apps out there. So I'll keep rolling in with React native.

Jamon Holmgren:

So you announced recently that you are starting a new YouTube channel, which is called Minute React Native. It's awesome, by the way. I went and watched a video. I was like, oh, this is cool. This is exactly what we need in the React Native community.

Kacper Kapuściak:

Thank

Jamon Holmgren:

You. How'd you come up with that? Absolutely. How'd you come up with that idea and what are your plans for it?

Kacper Kapuściak:

There's a lot of beginner content on YouTube, which is very long, very slow. The developers are building videos that take a lot of time to watch. They type very slowly, well, they type slowly, humans type slowly, which is okay. They look at dogs. It takes a while for video to start. I thought, okay, that content is not for me. I've been doing Regulat native for quite some time. I literally want to learn something new very fast. I don't have that much time on hands. So there's this channel called Fire Ship, which does content for JavaScript developers. I would say, Hey, there's a niche in React Native for this type of content for mid to senior developers that want to learn about new stuff in a condensed format. So that was my idea for Direct Native to learn the stuff really fast, really quickly without the bs.

Jamon Holmgren:

Yeah,

Kacper Kapuściak:

Yeah. So for example, on Twitter, you've heard about, I dunno, vision camera for months now, but you haven't checked the docs, but if there were a video, a minute video on that topic, you would maybe watch that, right? So that's my idea. Totally.

Jamon Holmgren:

I love all different types of content being created around the React native area, and I hope you keep doing it because that's pretty awesome. I do know that it's hard to keep this sort of thing up. I have my own YouTube channel, a couple actually, and it's been hard to keep the momentum up, but I keep planning to, it's a lot of work, even for an eight minute video, it takes. That's

Kacper Kapuściak:

True, that's true.

Jamon Holmgren:

A couple hours. Yeah. Alright, well we're out of time. Kapi, it's been great to chat with you again and learn more about the software mansion, open source culture and everything. Where can people find you on Twitter and whatnot?

Kacper Kapuściak:

They can find me on Twitter at kaper kapu. That's my name. And this is one of the reasons I made a YouTube channel called Military Native because it's way easier to find, so you can also find me on YouTube.

Jamon Holmgren:

Yeah, that makes sense. Yeah, especially for us Americans where spelling European names is difficult, although I assume it's probably also difficult for others. But yeah, I really appreciate you coming on and answering our questions and good to see you again. I've seen you now several times this year and hopefully often in the future as well.

Kacper Kapuściak:

Thanks for having me.

Jamon Holmgren:

Awesome. Well, that's it for today. We don't have Robin, so we don't have a mom joke for you all, so you'll have to wait for next time, but we'll see you all next time. Bye. See you

Jed Bartausky:

As always. Thanks to our editor, Todd Werth, our assistant editor, Jed Bartausky, our marketing and episode release coordinator, Justin Huskey and our guest coordinator, Mazen Chami. Our producers and hosts are Jamon Holmgren, Robin Heinze and Mazen Chami. Thanks to our sponsor, Infinite Red. Check us out at infinite.red/radio. A special thanks to all of you listening today. Make sure to subscribe to React Native Radio on all the major podcasting platforms.