The Problem With UI Libraries

#coding #ui #programming #javascript
In this video we go over the dangers & current issues surrounding UI libraries. Again, I think it's valuable to use them however, there are some problems that I talk about in this video.
Learn to code: nizzyabi.com
Discord: / discord
Twitter: / nizzyabi
Github: github.com/NizarAbiZaher
Timestamps
0:00 Intro
0:40 Devs Don’t Learn
2:26 Overuse
4:47 Not Reaching Potential
6:20 Solution
7:43 Outro

[@thesirpython]

I think a great practice is to produce your own library of buttons they are your own "little melodies" that you can recycle and because you have styled them they will be unique and being unique is a great way to stand out from the crowd and build your brand. :) So be a producer and DJ of your own code "samples". That's my approach!

[@NizzyABI]

well said bro!

[@thesirpython]

@@NizzyABI That was actually a good point when you said "are you really a front-end developer?" if you use someone else's code "samples". Once again I like using the DJ and producer metaphor. Sampling to make your own track or producing from scratch. The first one is a skill too and faster. The second one demands more work and more time but you'll get a more unique look. If I just want a functional UI. Reinventing & styling the wheel feels silly.

[@Isaac-gz8wx]

thats just good programming, if you're not reusing the exact same Button, Card, etc. the look and feel of your app is going to be awful

[@luckyalade4171]

I quite agree with you. The top UI libraries out there are being overused. But on the other hand, the industry is fast changing and on a marathon. Devs want to get their features done ASAP and move on to something else. Even with these UIs at hand, I realize that a certain knowledge of CSS can help you get creative with them and add some little customizations here and there. Awesome content as always bro.

[@NizzyABI]

I agree man & UI libs still hold thier value. but some of these current ones are just crazy!

[@patolorde]

Sometimes its just better to not know how to make a button 100% accesible but ship the app.

[@RoySukrit]

Hey you are right . I am a backend developer so I generally ignore this . I have realised that I don't know the basics . Pretty overwhelmed now to start from basics . Do you have any roadmap or any suggestions ? Too many roadmaps have confused me I just wanna build good UI for my react/next apps.

[@NizzyABI]

If i were you I'd just go to youtube & watch some tutorials on good UI & building stuff using those principles. So for example find a 1-3 hours tutorial building some frontend thing that you like & study how they do it.

[@Dom-zy1qy]

There's very little point in implementing your own components other than for learning. Its a waste of time, end users dont care if your using a component library, it actually makes things more intuitive most of the time. (Component libraries often also have very great accessibility out of the box too) It literally just adds pointless mental overhead that could be allocated towards something more important. If you're just building some kind of wrapper around a third party api, I guess sure why not. I've had projects like that, but whenever I start using IaC & getting serious; front end is not the best thing to be worrying about. To be honest, just seems like a lot of people want to pat themselves on the back for knowing basic [insert javascript framework here] when I hear the "you're not a real full stack dev if you cant write X component without a library".

[@rconr007]

I totally agree, if we become dependent on UI libraries and not try to do things on our own, we won't grow as a developer / frontend developer. This is also true for all of the AI help we been relying as of late. We are getting so dependent on it, that we won't be able to think for ourselves if we keep relying on them. Instead of using a dumb terminal, we will not become the smart developers we want to be.

[@NizzyABI]

well said bro

[@goosydev]

Im really worried about learning web dev nowadays and in the future. We started with basic html, css and js and slowly moved our way to JQuery, Bootstrap, Wordpress, Webpack, Angular, React, Vue, Next/Nuxt, Vite, Tailwind, Shadcn, ... so that beginners are thrown into the deep end of abstraction without knowing the basics. Why should I learn css when there is tailwind? Why should I learn JS when there is React? All these seemingly stupid questions make it more difficult for beginners to pick up web dev and navigate the industry. But im positive that we are reaching a point of slow down with frameworks and abstractions. Now everybody just wants to make stuff faster and integrate AI.

[@iamksmith]

I’m fairly new myself. I didn’t want AI to be the core of my learning, but I also didn’t want to stray away from it because I knew I would be at a disadvantage when it comes to where the market is heading. I made it a point to learn the foundations and basics, HTML, CSS, JS, or at least enough of them before moving forward with react. I’m extremely comfortable with html & css. I know JavaScript but do still use Google to assist. I learned JQuery as well, but then I recently discovered that it’s actually no longer used within most companies , which is strange. I don’t think we can help where we go, regarding the latest in programming, but I do think we should understand the patterns of where we’ve been. These new languages and frameworks are released, and the pattern shows that we actually revert back or stray away from them after a few years.

[@NizzyABI]

I think so too. I feel this trend is slowing down, which is much needed to be honest :)

[@thecoolnewsguy]

You still need css for tailwind. React is useless if you don't know JS.

[@Dom-zy1qy]

​@@thecoolnewsguyKind of disagree with both points there. You'd be suprised how abstracted frameworks like nextjs feel from actual vanilla javascript. Tailwind also has super noob friendly documentation.

[@iamksmith]

I agree on these points. I do think UI libraries are an overall benefit to design, however, the popularity of convenience has led to most platforms feeling generic. Which is crazy to say because this technology is so new and way more advanced than basic HTML & CSS. I don’t think creating entire applications using UI libraries is the move if you’re working on SaaS products that you’re invested in. But I do think it extremely beneficial with side projects, MVP’s, or things that you aren’t really passionate about. Please don’t hate on this comment. This is just my perspective

[@goosydev]

Absolutely spot on, also I think often you can still go ahead and install all shadcn components for example and then just invest the time to change the UI completely to make it unique while still keeping all of the accessibility features. But then you can also just use radix ui primitives xD

[@NizzyABI]

I agree on all points here & I think many experienced devs do this. I guess my main issue is the over use of them & neglecting doing stuff on your own. great points!!

[@NizzyABI]

Gooooosyyyyy

[@shakapaker]

that's why I like primitives like radix or react-aria@@goosydev

[@chunkies839]

while i agree to some extent, i think ui librarys provide utilities that are just poor abstractions on base css, html and js. typically if you use a ui library for some time you have to learn about css html and js obviously cause how else will you handle all those annoying edge cases you will probably run into. I will say though the one thing that gets heavily abstracted out is media queries most ui librarys i never think about it which is both a blessing and a curse

[@NizzyABI]

Agreed bro. we should use it in moderation and where need be.

[@edhahaz]

shadcn got it right. Not only you get full control you also learn a shit ton by having good code to study right there in your project. UI libraries just need to evolve to be all like shadcn.

[@NizzyABI]

absolutley

[@marcola47]

CHADcn

[@Bilz_-fd1do]

Good morning! (KZbin, dont ban me pls)

[@NizzyABI]

Hahaha

[@marcola47]

If you call yourself fullstack or frontend and the extent of your knowledge is gluing shit from ui libraries and passing around components, your labor is just a tiny bit more valuable than a McDonald's worker flipping burguers. The difference is that the McDonald's worker doesn't complain about not getting a job.

[@NizzyABI]

So true

[@myam754]

Yes, you're not a front-end developer if you can't center an element without using a UI Library.