Hey, Welcome to React Round Up, the podcast where we keep you updated on all things React related. This show is sponsored by Raygun and produced by two companies, Top and'd oves and Onvoid. Top and Dows is very great Top and Dove to get top and pay and recognition. We're working on interesting problems and making meaningful community contributions, and Void is the risk free way to
expand your software and design teams. With Void, you can pay by tests, so you only really pay after the engineers and designers at onvoid have delivered and you have approved the tests that they have done. In today's episode, we will talk about the UY libraries that we use. My name is Lucas Paganini, one of the hosts in this podcast, and joining me in today's episode are also the host Chris Ruin, Hi everyone, and Peter Ossa.
Hi everyone. So this episode is actually a continuation of a previous episode that we have on the libraries that we generally use on our projects. But on that episode that I highly recommend you check out, we didn't had enough time to go into UY libraries just because we spend so much time talking about all the other utility libraries that we use, and also what we use for testing
and stuff like that. So in today's episode we will try to speak more on the UI side of things and what do we generally code ourselves from scratch and what do we generally just get something ready made to use on our projects or sometimes it can be a mix of both, depending on how much time we have for a particular project. So, Chris, would you like to get things rolling? Sure? Yeah, I'll just mention too that I really
like and I find myself coming back to many projects. So the first one is react toastify, So that's a toast is any of those you know, those pop ups that come in and it's it's very configurable, so you can have them come from the bottom, you can have them come from the top, from the side. It works nicely on mobile too, And then you can I really like how it's designed because you can extend a lot of the
functionality, I mean, the function the options itself are very extensive. You can you can set the time, you can set if it's like permanent, like you need a user interaction to close. But even then the author provides a way like here's how you add custom styles and things like that. So it's I really like it as a library, and it could be something potential. I mean, if you wanted a really nice style, it could be
something you right yourself. But but I think for for something like that where you you know, you would need probably very special CSS for all those like those slide ins and stuff. For me, it's just nice to use a library like that. The second one, it's I gonna mention it. I'm looking at at my project. I s the for for drag and Drop, React Beautiful dn D, so it's React Dash Beautiful dash d n D and I believe it's the same. It's the it's written by a Lassian, so
it's the very same drag and drop. If if any listeners or you guys know about Jira, that's basically the library behind uh the drag and drop functionality. And again, like I it's amazing to me how simple they made. What you could imagine is super complex like dragging things and then if you let go, it snaps back. Really all comes down to is you need to
define. You know, you can imagine like it's called like a source div like where all your source items live and then your target dive where you want to drag to. And basically I mean, there are some caveats to to how you have to write it, but overall it's it's super easy to make really eat nice dragon drop stuff. So cool cool, all right, how about you better? Okay? Yeah for me, I for you O libraries like you said, we are specifies, I go to for toost and a
lots. Yeah. Then next I also work with probably then depending on the project, I use maybe start components, so you start components for like my design lib. Mostly if I want to build like a design system from squad Shift, I want to start components. And then there's still the occasional one of shots in which uses I think adds UI and yeah, just so many variants on so many, so much. I think I still also use them.
Did drug bars the d n D right, yeah, or kind of the drug vip y, so yeah, I kind of mostly I use them the toast they use their star components for design system. Then if I want to kind of use like a Coustom design system that's been BI I used. I used things like ant design for like my UI, and then I still use I think I've used most of the popular ones. I use Chaka.
I like I've used Chakra I've used a mount time. I've also used them anti design, but Anti is like the default because yeah, so I kind of got accustomed to it because of where I work, So it's kind of like the default for me. If I don't want to kind of build components from stag constant components, I just do and then check out. It's just for like my paint projects, like have some little projects that welcome soil.
You start to think, I think that's for me. Let me get into data a little bit, because you mentioned that you use end design when you don't want to start from scratch, right, But you also mentioned another library which is based on radix u Y, And I'm not super familiar with end design, but I know that radix u y is heavily how can I put it visual free like it allows you to at least from the understanding that I had about radix y, and I might be wrong, I believe it's very
easy for you to change how a particular component looks like and still keep the functionalities of it. So basically the there are and I think this is an important distinction first to clarify to the audience, because there are UY libraries that are more focused on on, like really giving you the entire the entire component, like the functionality and the visuals. And there are other libraries, other UI libraries that they're more focused on solving the functionality pieces for you and allowing
you to apply the visuals that you want. And when I mean functionalities, it also includes accessibility, so all the things that you would have to know in order to make your components accessible for people in different devices or even through voice control, that would be handled by you and you would just go and
apply the visuals. And there are other libraries that already do the visuals for you, and generally they allow you to customize such visuals in a way, but they are either more flexible or more rigid on it, like some libraries only allow you to change the colors and stuff like that, and others really allow you to fully customize the entire experience the entire visuals of the of the
component was still keeping the functionalities that the library provides. So I'd like to circle back with you too and kind of get your feeling on how much do you lean towards choosing libraries that are like just give you the entire component, or if you generally choose libraries that are just the functionality and then you come
in with the with the visuals later. So yeah, just starting with you period, just because you just finished answer answering, So how is at design on that and just going like even beyond it design your personal opinion on this paradigm? Okay, Yeah, so for like for design, but I love how on design kind of it's kind of very functional, right, so mostly like if I want to use on design, it's a highly functional filmwork.
It has so many most of the your components like the butt like logical aspects, or if you want the custom calendar, if you want setain things, if you want certain custom drop downs, like it's pribute to right, So yeah, they I will actually use designs for projects that I really don't want to focus more on the functionality, like for different things like for example, I don't want to start maybe building like a custom calendar from scratch or something
I would probably just use on design or it has I think there's some components like tabs and setting on tabs on the tables, right, custom tables, right, so if I don't need to kind of maybe build them for scuts, I think the basic feature of those people with some NT design or tabs, and there are kind of enough. So at that moment you just be considering about only just maybe taking the CSS for your own design special you wanted
to look the way maybe the Figma designers kind of created for you. Right. But then if I for godics, you are like for shot see, and it's when I really want to go dip into like building the functionality. Maybe they're like, I just want to build it from like from scratch, and there are maybe there are setting caveats right in the function in the demands
like the specifications. Maybe they want a calendar that does this in a setting format and then our public think about how to implement this in and design is kind of crul But then it to require me to kind of do so much and somewhat adjustment rather than just doing that, maybe I should just maybe just
to use it. Right. So it's just it depends on the scope of the work, right, So I probably will use like components like anti design material you are a checard wife or things like for projects that I know that kind of they don't have caveers, so they don't have complexity to a certain level. Right. Maybe business do not demand that they want this to be in they kind of a different way than the regular way the components are, right, So I just know it is probably just CSS two king and changing
colors or changing patterns or changing this and that. Right. But then if it's kind of like a custom component that's highly functional specific to me, be like whatever our requirements where it was given to me, right, and probably maybe our design doesn't cover that. I probably would use chats and so,
yeah, I understand what you said about and functional. Yeah, there are a lot of film of that kind of functional are the kind of focus is on giving me a lot of like freedom to build it, to build, like to just build up right if you see even when you shot see the
end shatsy and say we get to addiction. I also work with telling as well, and I think gradi and we shuts and it generates the R components for you, so you can nactually go to the generated pertion your and tricky to the way you want, like if you want to add more functionality, if you want to extend it, maybe there's a customer functionality that your business specification is kind of bringing up. You could just adjust it from there.
So yeah, I think it's just based on maybe the complexity of the work. I think that's when I use any of them. Both start components are shotsy and yeah, well this is kind of simple and kind of needs maybe the basic functionality or probably just I'm designed then estimate why you are as well and the chap while a h gotcha, how about you, Chris. Yes, I have a confession. I haven't used an actual component library in a
long long time, and I think that's due to me starting. I mean I was using GRAC very early and there were some component libraries and I ran into kind of what Peter was mentioning. It's like, I think it was probably my fault, Like I had a picture like, oh, I'm going to be able to have like very cool animations and all this fancy stuff. But I think the one I was using is like, no, We're just going to give you, like, you know, a button and like drop
down whatever. So I've kind of I kind of have like a hybrid approach typically because what I find is is a lot of the time you can accomplish you know, eighty to ninety percent of what you need with just like the HTML tags, right, I mean that does require that usually, Yes, you would still need I mean, it's no substitute for a styling framework,
so you would still need like Tailwind or Bootstrap. But then usually so I guess what I'm saying is I have I have a hybrid approach, so I would have always of course like a CSS library, But then you know, when I need something complex, and like Peter was mentioning calendars or something like that, I typically kind of hunt around and look at what open source options
are available and kind of kind of drop it in. But I will say, uh, Peter, I was looking at this, this radix UI, and now I know where all these cool like these like newer startups and nicer looking startups get their styles from. So I will I'm definitely going to look into this because I was actually thinking of the next product I build. I want to I want to look like the cool kids. So uh so I'll
definitely take a look at this. It looks really really nice. Yeah, that was one good to novodicts, right, so I think that's what makes them shots CMM. I think this will use these shots cm. Just what this is radcts. That's beautiful styling of this sort and the dashboard that look yeah, to actually just get that one, so it's kind of sapistic and you can change that as well. That's the beauty of of like just using shots to really change and customize these configurations as you wish, and it's what
you feeling too. I don't know, increase, you're probably knowly dealing guible you could do so maybe took it off the boostop as well too, depends on how you're going to configure it. Yeah, it's actually very cool. Yeah, cool too. Yeah, I'm actually with Chris on that, Like I generally don't use libraries. I generally just code stuff from scratch. Uh, And it's generally because it's either too easy to do like bottoms and stuff
like that. And honestly, if you just organize things nicely from the get go, then you're not to see yourself reusing You're not going to see yourself a copying pasting much like of course, if you just try to style your component your bottoms using CSS classes, then you're going to end up having a
nightmare afterward. But if you actually isolate stuff into proper components and it's just so easy to reuse them afterwards, that I just don't see the benefit of going with the library for it because I find myself space wasting more time to figure out how to change that particular component to fit what I want for my design. Then I would have spent coding the component from scratch. But that heavily depends on how fast we need to deliver the project and also how complex
are the components that we're talking about. Because Peter mentioned a calendar, and I have coded a calendar from scratch, but the product itself was a calendar, so it made sense, you know, So it made total sense to not go with a with a ready made component, like we needed the power
to customize it to our needs. But if you were just like, hey, we're building this project and we want to have a calendar here, but it's like, this is not one of the most access most accessed parts of the system, and it's really just the calendar visualization for the function lettery. So the calendar itself is not the focus. It's just, uh, the data is the focus and the calendar is just one of the types of visualization.
Then yeah, sure, I'm probably just gonna look for a ready made component because coding a calendar from scratch is not easy, especially if you consider all the different time zones that you've got to support and drag and drop and everything, and you just realized that that in itself is an entire project. But if you don't have stuff like that, it's just like the most complex
component is going to be a drop down with sub menus. Then I don't know, like I never felt that this was really like, Okay, this is way too complex, let's bring a library for it. But that being said, I always really like the idea of getting libraries that would provide the accessibility and functionality, and then I could just work on top of that and provide the visuals. So I really like the idea of looking for stuff like
that. It's just that thus far we haven't really needed that. And it might just be because we kind of got to a point where we kind of have our internal library for that sort of stuff based on the things that we built before. But I think it's highly interesting to look at what those other libraries are doing. But I don't know, I'm just haven't yet found something
that was kind of like tailwind in terms of market adoption. You know, I wouldn't recommend people to look into library acts and then you find yourself two years from now in a situation where this has been deprecated and like now the new thing is library Z. So this can happen to any library, you know, but I haven't yet noticed any of those libraries that are more flexible. Of course, like mature Design is super stable to use, but it's
not very flexible right to provide their own uy. So maybe radix is already stable enough that we can advise people to use it, But I'm not sure because I haven't used it enough, and I'm not sure if there are any other libraries other than reddicks that provide the same thing but are more popular and thus less susceptible to being replaced by a new kid in the block. Yeah. I think that's a good point, because I remember, you know,
when I was starting out. You think you tend to think you need some sort of complex library just for something like things like layout and really the design itself. And I think it's my recommendation would be to learn, you know, some As much as I know people dislike CSS for all its weird rules, it is worth it to learn some basics. I mean, you would be amazed, at least I was amazed just how much you can do with something as simple as flex right, like a flex box and all that.
I mean. So and once you know kind of the what all of those special classes and Tailwind and Brutstrapp are doing behind the scenes, I think that's already a huge leg up. And then and then you can start getting into these these frameworks that that in turn are also using those all those concepts in the background. Right, So yeah, yeah, I agree with you as
you right. So, like I think when Chris, I think there was something look said, don Look said about them maybe using these libraries for example, for things like calendar. Right, So the thing is that a lot of us kind of forget that there is like default de facto calendar, which is the history of it by calendar that I really don't know why. Maybe we don't maybe we don't like using that diff behind maybe is due to design
specs. But then I think c I says on history kind of gives us a lot of like they've made a lot of things available for so I like, I really can't process doing layouts with your library when you can those do these at most maybe you're using a library use something like that gives you like utilities for those things simple level like low level utilities right, So, but not like maybe using things like oh maybe for example, Materla you're kind of
writing like who colomne like I don't know, as a component and then using that to build from like layout, like I don't know if you use like vacube, because at the end of the day, you could just use a simple flex and that would just agreed and that would really address that. So yeah, if I want to encoade a lot of you to use your like, I just focus on using your libries for the complex aspect, like things
for example, like calendars or utilities. You feel that we take time to build, right that as I'm using there for like fundamentals, and the fundamentals you could just use CS and you're good to do. I don't really see, you know, maybe going to jut using ju level layout from epis for that. Just usually things that are a beats complex, like we reach the library for examply you don't like maybe creating your own tops if you use your own top components. Yeah, all these things, right, things that it
beats. Yeah, but most for leyouts, most for sub setting things right kind of. Yeah, So I think that's also my own idea, and that's yeah, I mean I think it all It all depends too because like sometimes unfortunately as developers, we don't have a choice, right like some guy, And and there is things to be said even for these frameworks, like you do get a nice unified feel for the app, right, So I mean you can go either way. Like I don't want to. I don't
want to put any framework or any way of doing things down. It's just there's all these you know, there's things to consider how how to use each
of each one of them. Yeah, yeah, but you do consider that some of just some of those film works kind of have like lending curves, right, yea, yeah, there are firm the learning CAUs need to also kind of like for me personally, right, But I use mater as kind of like the one with the highest learning curves, right because I use that and for you to do certain things, you have to really understand a lot
of things. I think. Then usually I love around design for a simplicity, right then, Chucker, you are check You're like simple in my opinion, if I to use like rebuilt you have. So it depends on the complexity, right, Like some are the learning covers, some are more than all. If when I want to advise someone to just kind of set up a project that there's no really more emphasis on certain things like maybe just want to set it up and do stop to just show like maybe we have an
investor, you just want to show something up. There's probably be not in like an established design systems or so if you just use like this simpler, you are this, you are in the library. I think this spread of beta just as it's for setting functionalities good agree, So there's a lending CoV
in them. And I think this aspect of published popularity route all those look at the wants to have more conflicts and you know, pick the impact is easier to produce on us it. Yeah, so that's just that's just it's good mhmmah. Yeah, that does make a lot of sense. And to me, what I always look for when I'm even considering any any such component libraries is just how much is going to make my life easier in terms of
providing accessibility because the functionalities are not that hard, it's just accessibility. I think it's harder than the functionalities themselves, honestly, so I always think of
things that are going to help me out on that. And also they're not going to block the expansion of the app afterwards, because a lot of UY libraries are simply just in English, and that's a problem because it generally happens that eventually you will want to support other languages in your application, and if SEO is important, you will want to have server side rendering and stuff like
that. So not all libraries tech all those boxes. So because of that, that's what I was mentioning before, Like, sometimes it's just easier for you to code it yourself, because then whatever you choose to do internationalization, you can rest assured that it's going to be the same way they're going to
provide the internationalization for that particular component. Otherwise, like eventually, when you start doing internationalization, that particular library is going to handle internationalization differently, and then you have different ways of providing translation in different parts of your system.
So that ends up overcomplicating things on the long term. In the short term, do go faster, So it heavily depends because at the same time, if you think too much about the long term, then you never get there right because you over engineer from the start. So I agree that there's definitely a room for such libraries, but I would never choose the library that I know for sure is going to have problems with accessibility or internationalization later on.
Like that to me would be not just a red flag, it would definitely
be a blocker. But other than that, if the library allows me to customize the visuals to my liking, to comply with the design that I have for my application, if it is accessible, it is used enough so that I know that it's not going to die overnight, and it provides internationalization ideally in a very flexible manner, such that I can deal with internationalization in the library the same way that I deal with the rest of my system, then
yeah, definitely, yeah, short, exactly, Accessibility is a very important to consider, right, So I think for that, personally, I'll probably kind of give it to check how you have accessibility. I think that's the one I really know that. Yeah, I think I have kind of the
kind of a lot of boxes on accessibility. I'm designed. I don't know, I think it beats well personally, I kind of to like check car you mostly, but that yeah, for internal intermalization, yeah, well you have to also consider the libraries without the library supports it on that, and like you said, most most of the time, it's probably better to just coude it for se from structure that you can have this features because I think
mature you also support like can support that to work. I have no release in the to I think it doesn't the way were then I think for what you say, I think it's much easier and better to just develop it yourself, since if you have accessibility and modernization and as a consigned for you. Yeah, I think that's those. Yeah, okay, cool, So I think this kind of sums it up. I didn't mention too may many of the library that I use, because as I said, I don't use that
many. It's just honestly mostly style Components and Telwin, but other than that not much. So these are the only two that I would recommend. And besides that, I don't think there's anything super valuable that we that we definitely need to mention in this topic. So I believe we can start wrapping up. Unless Chris or Peter, you guys have anything specifically you like to mention. No, that's cool, although I would like to just drop the link
for what did you want? Oh, yeah, definitely if I'm gonna send it on this Yeah, So just to look at that and probably something and to use us kind of want to check out. You can check it out you and those are shots and since it's use it when you get that. Okay, Yeah, I'll drop the two that I mentioned, the two that I like, mm hmmmm, nice. I'm sending those in the comment section.
So if you want to check our content on YouTube or Facebook conking, we we do streams of the podcast and then you can find those lengths in the comment section there. All right, uh so let's do a quick round of promos. So, Chris, anything you're working on you'd like to mention. Uh, I'm well, I don't really have anything to share. I think Peter saw it on LinkedIn, but uh, I'm building a way with
AI to automate my software courses. So you basically the goal will be that you post in something like as simple as markdown and then you get like an automated video lesson out. But that'll be yeah, probably unfortunately a month or two from now, when I can finally have something to share. But otherwise, I just invite people to check out the links that we're all posting. There's a lot of good good stuff I'm seeing in these links. So you
are drinking the AI kool aid. Not it's a blend. It's a blend. I only I'm using a voice clone and then the rest is actually like deterministic. I guess I'm using Yeah, I am using it. But as a converter like a translator. Yeah, I think really really cool, Like I can always for you to kind of like like like and view the one that you're going to create with that. Yeah, that's three awesome, real awesome. Thanks. Yeah, yeah, we'll see, I'll see see where
it goes. Yeah. Uh what about you, Peter, Yeah, you so not in the land those rule. I think it's just for the links ship. I think you can check this live result on kind of use them what you did? Yeah right cool? Uh well in my case, just gonna promote onvoid. So it's U N V O I D dot com if you're interested in that. And basically it offers design and software development services in the most risk free way possible. So all the contracts are based on laws
of your state. That's the first. So a lot of companies, you have to agree with the contract, meaning the laws of whatever the company is in this case is going to be whatever the client is. So that already provides a ton of safety. On top of that, you can hire Onvoid task based, so you're only paying after the tasks are delivered and approved by our team, so it really provides you with a ton of safety on top of a two week money back guarantee if you don't like what was provided during
the first two weeks. So really, if you need help with design or software, there are really no reasons for not to try out Onvoid. So if you're interested in that onvoid dot com, highly recommend. Other than that, I think this is it, guys. Thank you so much. I have a lovely rest of the week and I'll see you in the next week.