🔥 Bun 1.0, React Server Components, V0.dev
Hey hey,
Another hot-off-the-press issue of the Top 3 in Tech newsletter coming right at you. Lots of JavaScript and React goodness this week, so let’s get right to it:
1. Bun 1.0
If you’ve been on the web in the last few weeks, you probably haven’t been able to avoid the newest hotness in the JavaScript ecocsystem: Bun!
And for good reason: Bun is really cool, and it just hit version 1.0 marking it officially stable and production ready. But what is Bun, you might ask?
Well, it’s a lot of things: a runtime, a package manager, a bundler and a test runner to name a few. But again, you might ask: don’t we already have tools like NodeJS and npm?
The answer is yes. And if you’re used to working with modern JavaScript frameworks, they’re all built on top of NodeJS - the traditional go-to runtime for building JS applications that (also) run on the server.
And while Node is great with a huge ecosystem, it’s also getting old. Early decisions prevent it from really advancing, and the backwards compatability, while great, also limits innovation and performance improvements. That’s where Bun comes in.
Since Bun is a “fresh start”, they can put a huge emphasis on performance and better ergonomics for developers. Which becomes really apparent the moment you start using it (Bun = fast). And it removes a lot of the friction of having to duct-tape different solutions when starting a new project, because Bun can do it all from one single package.
There’s lots more to say about Bun and why it’s so cool and exciting, so check out this video from Fireship for even more details and what might happen with the JS ecosystem in the future:
2. React Server Components
Speaking of exciting: React Server Components have been a part of NextJS for a good while now, and they’re really starting to pick up steam. I’m generally enjoying working with them too (despite the odd gotcha’s that still catches me off guard). But it is definitely a big paradigm shift for React, similar to when we all moved to using Hooks from class components back in 2018.
I think this new paradigm has tons of benefits once you wrap your head around how the server components work (and don’t work!). So to help you do just that, check out this amazingly detailed article from Josh Comeau where he breaks down everything you need to know about React Server Components - regardless if you’re just getting started or have been using them for a while:
Making Sense of React Server Components
www.joshwcomeau.com/react/server-components
I know I definitely learned a lot, especially how to think of the client / server “boundary” 🙌
3. V0.dev
The final pick of this week is another fun AI tool from Vercel, who seem to REALLY be riding the AI wave 👀
How it works is pretty simple: you tell it what you want, and it spits out production-ready React components using the shadcn/UI component library. It presents you several different options, so you can pick the one you prefer and then continue giving it feedback until you end up with the desired result. At any point can you copy/paste the React code and make tweaks in your own code.
It’s still in alpha stage with a waitlist, and it looks like you’ll sometimes have to give it sooo many instructions that it might be faster to code most of it yourself. But it can definitely be a great starting point or even a source of inspiration when you only have a vague idea of what you’ll build. And as with any AI, chances are it will only continue getting better from here - so time will tell how useful tools like this will actually be in practice. Exciting stuff nonetheless!
Here’s the announcement tweet from Jared Palmer, the VP of AI at Vercel:
Over the past few months, I've been building with my team @vercel.
It's an AI tool that is effectively Midjourney for React.
With v0 you can use simple prompts to generate copy-and-paste friendly React , powered by @shadcn UI and Tailwind CSS.… twitter.com/i/web/status/1…
That's all for now - thanks for reading! See you in 2 weeks ✌️
If you did, why not share it with your friends! Either by forwarding this email, or by posting about it on Twitter, LinkedIn, or Facebook. You can also simply copy/paste the link mads.fyi/top3 on other platforms. It really helps to keep me motivated and let the newsletter grow.
— Mads Brodt