the worst part about being a front-end developer is developing UIs, which also happens to be 100% of the job. Web developers have tried to make things easier with countless UI libraries like Bootstrap, Material, and so on, but recently Shadcn, the hottest UI framework in the front-end world, recently released a major update that makes it way overpowered, and it's nothing like you've ever seen before.

The only way I can think to describe it is like if Ruby on Rails and Skynet had a baby who grew up and got jacked on steroids and then got into front-end web development.

When I started this channel back in 2017, my goal was to make tutorials like this Facebook-style emoji reaction thing.

The code for that video took the better part of a day, but now I can build an even better one in like 30 seconds.

In today's video, you'll learn how to build a custom front-end website faster than ever, but with great power comes great trade-offs, and we'll also look at the drawbacks of this approach.

It is September 5th, 2024, and you're watching the code report. Last week I ran a poll about Vercel, and thousands of people agree that it's the best.

For an incloud, this video is not sponsored by them, nor have they sponsored any of my past videos, and that's why I can tell you that yesterday Vercel took a pretty big L when it was revealed that Chat GPT switched from Next.

js to Remix. Despite that, Vercel did make a really good move by hiring the developer behind Shadcn, and now, as we'll see, it's tightly integrated into the Vercel ecosystem.

The Shaden is a component or UI library, but it's a lot different than most other libraries like Bootstrap.

Instead of installing a massive library of components into your node modules and importing them, you copy and paste the code for each individual component into your own project, which allows you to use things a la carte and makes it easier to customize the code.

It sounds chaotic, but it's based on primitives like Radix and Tailwind, which keep things looking consistent, pretty cool, but its killer new feature landed in the CLI in the form of a component registry.

Like, you can run Shad CN add data table or Shad CN add carousel to easily add those components to your project, and it works with all the major frameworks, but here's where things get really crazy.

Vercel also runs this service called V0, which is an AI chatbot for building UI, like, all you do is ask for a button and it'll return something that looks just as good as any A16Z funded startup with a $100 million valuation.

If we look at the code, though, what you'll notice it's doing is relying on the existing Shad CN button. It then AI generates some extra Tailwind slots, and the end result is pretty nice.

That's not the crazy part, though. If we click on this install button up here, we'll have a command to Shad CN add this to our project.

It'll automatically copy that code into our project and bring in any necessary dependencies, and now we have a cool custom button we can use anywhere.

And not just that, but these URLs can also be made public to be shared with anyone, and you could even build up your own standard library of Shad CN components if you drink the Shad CN Kool-Aid and then combine it with other AI tools like co-pilot or cursor, you can build UIs 10 times faster than you could just a few months ago, and they actually look halfway decent.

The end result might look exactly the same as all your front-end side projects, but at least it didn't take you six months to build.

But the AI haters out there will tell you to never touch any of these tools. They'll make your programming skills go flaccid and their garbage code will eventually backfire on you.

But the reality is that just a few years ago, you'd have to solve many of these problems by going dumpster diving for code on blogs or humiliate yourself with a Stack Overflow question.

But nowadays, you have people building to-do apps in their Teslas in the IKEA parking lot. The AI performance gains are real, but they have to be used carefully and deliberately to avoid unnecessary complexity.

I don't think tech like this will replace actual front-end developers, but here's my prediction in the near future.

I think developers will care less about the ergonomics of a framework, like the syntax differences between Angular, React, Vue, and Svelte, and care about how quickly and reliably they can generate stuff.

Like, I wouldn't be surprised if we see a prompt-based UI framework. Oh wait a minute, it actually looks like someone already built that.

This has been the code report, thanks for watching and I will see you in the next one.

Front-end web development is changing, quickly

High-intensity ⚡ code tutorials and tech news to help you ship your app faster. New videos every week covering the topics every programmer should know. 

The original home of #100SecondsOfCode #TheCodeReport and #CodeThisNotThat. Created by Jeff Delaney. 

Building an app? Get project support, advanced full courses, and more at https://fireship.io

Front-end web development is changing, quickly

Scripts