I Benchmarked EVERY Framework So You Don't Have To
Vložit
- čas přidán 1. 06. 2024
- UPDATE: VERCEL JUST POSTED THE SOURCE FOR THE REACT EDGE THING OMG github.com/vercel-labs/react-...
Astro, Vercel, Next, Svelte, Fresh, Deno Deploy, Bun... we tested a lot.
bench.t3.gg if you want to check yourself, but be kind to my vercel bill
Follow me on...
Twitch: / theo
Twitter: / t3dotgg
Everywhere else: t3.gg/links
s/o Idez for the insane grind for edits, we have so much good content coming!!!
Timestamps:
00:00 highlights & intro
01:23 performance of web solutions overview
13:37 benchmarking demo
20:16 goals of this project
22:53 secret vercel project and some benchmark comparisons
24:22 summary and outro - Věda a technologie
A new JS framework was born during this video
innovation baby
@@cymaked more like mental illness 😂. While JavaScript developers are learning a new framework, I'm actually getting stuff done with C#. Jk jk
@@NathanHedglin it's funny because it's true
@@NathanHedglin No doubt. Elixir love here. Time will tell with JS.
@@NathanHedglin I'm getting shit done in VB.nET
Do you know what I love about you? You bring such a chilled vibe to this "competitive" area. I feel like with you on my team, I would not have any imposter syndrome at all. Not because you're not a great developer, but your vibe, the way of presenting things, and teaching concepts creates an awesome environment.
This is one of my favorite comments ever. Genuinely. Thank you so much. This is like exactly what I strive for in the work environments I build and I'm so pumped it's resonating here too ❤️
Couldn't agree more.
Just 🎯. And love how he talk about something, cuz I don't know english very well but I can understand almost everything he is saying cuz he talk in a simple way. So ty @Theo - ping.gg. (sorry if my english is not good, Im getting better)
@@t3dotgg literally one of the best channels ive come across in the last few years
That was nicely said 😊👌✨🌈
A lot of people talk and they don't even know about what ... and then there is you Theo, you explain by showing data and you use tools that demonstrate what you are saying. There is a lot of confusion around, regarding SSR, hybrid, getStaticPaths, getStaticProps ...Thanks man, very interesting this topic ✌🏻
"I Benchmarked EVERY Framework So You Don't Have To"
is actually:
"Hey, I have an idea for a benchmark, go do it yourself"
Kinda not what I was expecting.
“I made a benchmarkable deployment for every…” felt too long and not clickable. I’m on that clickbait grind 😅 technically w/ the browser logging this does a lot
Same. Clickbait titles suck ass. That's an unsubscribe for me.
@@uziboozy4540 bye 👋👋
He did technically benchmark it. You can see the results he got in the video.
@@magne6049 he technically benchmarked like 3 frameworks and didn't even combined results so people could analyze it.
It is TECHNICALLY not the same thing as "benchmarking every framework so we don't have to".
Where is vue and nuxt?
Elephant not in the room : Vue/Nuxt
This is one of the best explanations I've seen on the current state of Serverless and Edge. It's truly incredible how great you are at explaining concepts.
SSR only: Having tested req/s for a page of size 1000 div Elements in all frameworks, Fresh comes ahead by about twice as many requests as SvelteKit or SolidStart or Astro. NextJs was last. Fresh had 2500req/s, Solid, Svelte, Astro + Solid or Svelte all had it in the 1000-1200 range. NextJs was 350req/s for generating the exact same page.
I don't care about edge or serverless and coldstarts since I deploy to VPS only
7:39 admittedly I didn't work with serverless enough, but I think when you say "serverless server dies after serving one request" it's more or less completely not true :)
I worked with node.js and Java on AWS lambda. What is happening there is that your "cold start" is your environment starting for the first time, so if you have "console.log(123); exports.handler = ..." that's 123 is going to be printed once on a cold start, and you won't see it again until the new cold start. So it only "dies" in a sense that you are not paying for the server execution time between requests, but it only for real "dies" once AWS kills it (once you didn't have any requests for it for some time).
That's why AWS would recommend you doing something like "const cache = runExpensiveStuff(); exports.handler = () => {}" instead of "exports.handler = () => {runExpensiveStuff()}". If it really would have had "died" it wouldn't make any sense to do that, would it?
Nuxt3 support edge. Kinda weird, it not added here since it is the most popular vue framework
Edit: Also provided support before Nextjs
"I Benchmarked EVERY Framework So You Don't Have To"
**proceeds to ignore the Vue part**
Imagine benchmarking an app with 23 DOM elements and still getting wildly different results
Nuxt3 should also be in that list
I would say I'm a junior dev considering I just became part of the industry recently, and so not necessarily the target audience of the channel but your videos are still great and I learn a lot from watching them. The content is appreciated :)
do you have any tips for landing your first job?
@@marcelooliveira1541 Apply to a lot of places and don't get to attached to any particular role. Put in the work, research the company before a phone interview but acknowledge that none of that guarantees you the role.
Also check your local businesses not just the huge ones, they may be looking for engineers.
I appreciate you are actually testing all of this and not just talking theoretically. That's some hard work for a CZcams video, thank you:)
Were is vue?
Found your channel after Prime's DevHour collab. Really enjoy your videos! I am completely new to this "web tech" sphere. I am overwhelmed by the number of different options/alternatives this space has. Where do I start from ?
Great question! I'd say it depends a lot on what you want to build. Generally, I think react is a great starting point for a LOT of different things, and the new Beta react docs do a great job of pointing you in the right direction and also onboarding you onto "thinking in React"
really nice video! Just found your channel! dealing with newer frameworks when they come out is a big blind spot of the youtube sphere! Already have a fuck ton of your content in my watch later list! keep up the great work!
I would like to see Marko & Solid Start Streaming Rendering Benchmarks too.
Also Note that Deno Deploy is in beta 4 right now.
I created an example in Marko using Cloudflare Workers and sent it to Theo. It runs the test about as fast as Fresh. The code is concise and easy to understand, too.
This is fantastic. Particularly the trade offs between cloud native service combinations. Can’t wait to see the uncross that data storage box!
Which Framework do we have to use as per the backend Part or Frontend Side, Like React or Next.js or on the way of backend Node js or Nest.js or any other Replacement?
I don't see Solid js, which rips other frameworks while being very similar to React
Love your stuff! Exceptionally insightful integrating materials across the web landscape, and you're on the edge of stuff. (Pun intended).
the recording audio feat is much better in this video than the recent videos.
Man I found so funny the way u explain things XD subscribed at once!! :)
SolidJS 😢
Pretty interesting. No sure if fair.
Would love to see SolidJS in the ranking.
I like your vibe my dude, I kinda don't like the "here are all the pieces, go do the 'last piece'" after you just said that "last piece" was a ton of work xD
props to whatever team of absolute units are able to pull a proper data report together against the matrix of options you started to outline here.
Anyways, great stuff as always - lets stay excited, collaborative, and humble! The Web Wins.
Do you have any kind of rant video about vue ?
This was a good video. It lets me know how the new crop of programmers thinks and talk with their grammar. Are you guys old enough to remember or compare clojure script (which is where all these knew libraries birthed from). [clojure script]|[virtual DOM LISP] still exists but its design is way more problem solving than react. But the bad thing about clojuresript is that it requires a JVM runtime to compiler|compile that thing. [svelte] is good for making html graphics (guis) user interfaces. But no new technology has changed in the last 12 years. New graduates just keep taking a technology and renaming it. Good video. You have a good grasp of html and web stacks for your age. Good job. You gave me a good jump off point to lookup the new names.
P.S. I do not know how old you are, but you look young. I was just guessing.
Thank you so much, i learnt so much from your videos 😀
A little upset that Nuxt 3 isn’t here
I am student of geoinformatics and cartography diving into webcartography. Right now i feel like almost drowning in the amount of possibilities web dev offers. This channel feels like a raft to hold on to in all this mess :D.
I can run serverless functions in aws, azure or gcp without cold starts. What you stated about cold starts is wrong. I do it everyday in all three of these cloud providers with production systems.
on what server?Php?Go?Rust?Node?
Hey on the next round can you include your test code running on a bare metal, co-located server? That would be the platinum standard IMHO and if using a recent CPU would likely smoke whatever is used by all the edgy vendors. Oh, and if you seek a testing tool like Mjölnir, try Locust or Tsung.
There are so many technologies and abstractions it's overwhelming
Where would static sites on cloudflare pages/netlify fit in here, if anywhere?
Congrats on the release of Ping! Go kick Twitch's butt!
Actually, Firecracker was built by AWS for running Lambda! :)
Yep big mistake on my part lol
can you benchmark how fast and eficient their reactivity solution and also their way to update dom? because it also performance not just initial loading
You should probably also test "Turbo" and "Qwik"
Thank you for making this video! Very helpful. Greetings from Europe
what was the result? it would be better to see the results side by side at the end
how do i get to work with this part of the community?
I live in Kigali, Rwanda (not close to any widely used datacenter) and Deno is the fastest
No solid-start?
bottom line up front son, then ramble
What would a database "at the edge" look like? Is that even possible, like how would we still have one "source of truth"?
Cloudflare D1 or Macrometa
There more I hear about these "edge" deployment options the more I believe in the return of fat/smart clients.
L'histoire est un éternel recommencement.
After all, nothing is closer to the user than the user's terminal.
Fast download Fat clients backed by something like a Google Sheet will be a thing in the near future, IMHO.
No vue / nuxt?
Once upon a time in the "Age of Cloud" where money was laundered like rains from those clouds... people did Benchmarks! (for nothing)
How about vanilla JS ?
26:49 "I wish I had the source for"
*literally a 'Source' link in the bottom right corner*
haha
The source button DIDNT LINK TO A PUBLIC REPO AT THE TIME OKAY
No soildjs? Still too new would be my guess. Nextjs is still ‘bleeding edge’ to some
Where's Angular though?
Who won?
bottom line you fight with JS performance that's why they will kill it and replace with something better than webassembly
Cloudflare Workers have 0ms cold starts ;)
how does serverless work with db connections? As its stateless in theory
Good point. You would need a stateful server to manage the connections to the DB. Yay! Our architecture just got more complex!
What about severless containers like Google Cloud Run
what about qwik?
liked for the headphones
Theo. You are my hero!
I haven't watched the entire video but is it bun?
Hey I noticed you don’t have any CZcams shorts videos or a TikTok channel. TikTok is by far one of the most downloaded apps. I can help convert all of your current and future videos into TikTok videos and upload them onto different platforms. Lmk if interested.
php 10ms?
At 07:00, you talk about how we have to think about the relationship between containers and ideally there will be a solution to this problem. However, there exists a solution because when deploying using Kubernetes you use containers but you don't have to think about the relationship between them even at scale. Also I wonder if you consider k8s as "containers" according to your "deployment methods" or not.
I’m utterly speechless. You ain’t as good as you thought you are.
fresh ftw
haha dont have Nuxtjs
you have to put more slides haha i got distracted while listening
angular?
This was a video about SSR
Can you do qwik now????
Remix !
Bro according to you which is in more demand django or spring boot.
I really tried to watch the video, but the vocal fry is so bad in this one
To much Out talking.
Performance.timing is deprecated. This feature is no longer recommended.
You can use PerformanceNavigationTiming interface instead.
This guys voice is Richard from silicon valley no???