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.