High-school student makes React a million times faster
HTML-код
- Опубликовано: 25 авг 2024
- Million.js is a React library that can improve rendering performance by bypassing the virtual DOM. It is inspired by blockdom and other popular JavaScript frameworks like Solid and Svelte
#javascript #programming #thecodereport
💬 Chat with Me on Discord
/ discord
🔗 Resources
Million on GitHub github.com/aid...
Million.js Website million.dev
Solid in 100 Seconds • Solid in 100 Seconds
10 JS Frameworks Compared • I built the same app 1...
🔥 Get More Content - Upgrade to PRO
Upgrade at fireship.io/pro
Use code YT25 for 25% off PRO access
🎨 My Editor Settings
- Atom One Dark
- vscode-icons
- Fira Code Font
🔖 Topics Covered
- Million.js basics tutorial
- How to make React faster
- React vs Solid.js
- React vs Svelte
- What is the virtual DOM in react?
- React performance optimization
Moral of the story:
It doesn't matter how good you are, there is always a teenager who can do it a million.js times better
and it doesn't matter you're a teenager that can make it a million times better, because there's always an asian teenager that can make it a billion times better
✊️😔
@@berkileri2082 nice Fix I was about to do the same fix.
@Berk İleri man I wish I was Asian. Maybe then I would actually be smaert.
@@vectoralphaSec why? im black and smart
As the older generation, we can finally die in peace knowing there is at least one person who will carry society on his back.
...or her back
@@chocolateearrings let's be real
@@chocolateearrings it bothered you that much that op said "he"
@@chocolateearrings in this case he is "he"
@@smith4591 🤦
i feel this says more about react than it does about the high schooler
😂😂😂😂
and about Facebook engineers
if someone asks you how big your js framework is when you load it and you begin with the words "well gzipped and minified" you have already failed.
About the entire React community probably "Sorry was too busy googling how to center my div to actually care about the Virtual DOM and how it works, certainly the React mighty open source community got it all figured out, they created this thing called server side components, that's huge, my div get centered in the server already 🤯"
@@me-low-key hahahaha
The amount of optimization techniques/tools and community support that react has is unreal 🤯
we didn't had to support it with wheel chair, if it was already fine..
the amount of community support is both amazing and a testament to how bad React is
Yet still the worst frontend "framework".
Imagine if all this effort was spent in the way better alternatives
Not its not the React implementation is unbelievable stupid . Its copying a the whole tree for it to let an iterator doing things like delete on it . The standard way in all other languages is make a list while doing it and then let it run over again to apply changes.
This is the dev equivalent of playing a multiplayer game and suddenly seeing 김황보 join the server
this comment is magical
I knew as soon as I saw the title you'd be talking about Million. I first saw this project with me at the international science and engineering fair a few years ago. It's really incredible and I wish the creator of it the best of luck in his endeavors!
Yes !
What are his endeavors, can you talk about it?
I also came across Million but had no idea Fireship would make a video about it lol.
Great to hear. To be fair to those React developers: most software developers use the software without a deep understanding of how it works. You can't blame them, either. They're too busy learning how to use the software stack so they can get a job as a developer than to spend their time digging deeper into any single one of them. You don't get paid for understanding how React works at a granular level. Companies don't pay you for this extra knowledge and it only helps like 1% of the time.
But what about the creators of React?
@@ccgarciab I think a lot people don't realize that the creators of React are just a team from Facebook, they didn't even earn high wages at Facebook. Dan Abramov made like $100k at Facebook. I mean to say I can't expect them to put out brilliantly efficient and beautiful code when they are not commensurately valued by Facebook for their work
replace companies with clients. in the real world market clients want a solution to a problem the faster it can just solve the problem the better, you are not making a living or going to compete for things a client doesn't want.
So... Are you saying higher pay equals more knowledge or being more intelligent? Wow
@@fark69Dan was working in the UK office, paid in GBP and that 100K was gross at the time he was hired in 2015. Now probably he earns a lot more, plus stocks , which probably he isn't going to tell, but keep in mind that in the UK he needs to pay a lot of taxes, like 50% or so for revenue over 60k a year plus NHS and the rest of the things.
Finally Aiden Bai gets the props he deserve.
{ children } …? 🤓
But does he also get the state he deserves?
what A CRACK
Is there not a suspicious amount of ai in his name?
@@wh2742If there are so many AIs in his name, maybe he asked AI how to optimize React, and he implemented the optimizations suggested by AI.
hell yeah, tree diff is a reasonable approach, but you are much better served with a little bit of pre compilation to hook the code here and there. Especially in JS/HTML, there have been so much work around the tooling to parse, transpile, output, so much richness in this field is really a strength for this language.
this makes me want to learn more about how compilers work. I think this is a really creative solution, and I wouldn’t be surprised if Facebook hires the author to work on the React code in order to make this API supported officially and out of the box
How did we get to this point where we are performing surgeries on DOM for premature optimization and shipping electron all over the place at the same time
so what happened is we didn't burn enough -10x engineers at the stake
javascript happened.
Not a single count of software I enjoy is written in javascript
@@psisis7423 he says, posting on a website that uses javascript
90% of people who complain about Javascript have never written any production code in a language they enjoy, guaranteed.
1:12 lol a highly experience react developer asking what's a virtual dom.
Anyway, props to this kid
Do note these "pre-compiled" optimizations translate directly into bigger bundle size if done at build time or longer startup time if done at runtime. So the speed gain only matters if you really have rendering performance problems which you can pin down on react rendering engine specifically (not the lag introduced by interacting with quadrillion async browser APIs).
API call optimization could honestly be a speciality on its own.
What I find amazing is that react was the framework that revolutionized updates because it didn't crash and burn when you had too many updates like older methods did with the famous server monitoring page demo. The fact we now have more transparent and even faster and better ways just a decade latter gives me hope for humanity.
This channel makes me think front-end is insanely more complex than what I know and expect, maybe I'll never be able to land a full-stack job, because I thought the only complex and hardcore part of this was the back-end, but I'm dumb enough to think back-end is complex as hell, and now front-end seems like a nightmare too, guess I'll stick to front-end development
Same here bro😂
congratulations on your recently acquired impostor syndrome, have fun and don't get hurt
@@YuriG03042 This
Imposter syndrome is loosely defined as doubting your abilities and feeling like a fraud. It disproportionately affects high-achieving people, who find it difficult to accept their accomplishments. Many question whether they're deserving of accolades.
@@senrign exactly, this like the dunning Kruger effect
I never really bothered myself to think about how to improve the frameworks and libraries I use, I always assume it was coded by large teams and I'd be wasting my time trying to improve them, but this example kind of clashes with that mentality. I don't want to look at other's people's work, it's so much easier to improve my own stuff, because even in a messy development environment I could still have a mental map of where everything is and how it works, but I wouldn't have that for other's work, a lot of time would be wasted on just familiarizing myself with it.
You assume there is a large team behind. I did the same for years, only to realize PHP is driven by a team of only 5 paid full-time devs.
siempre hay un asiatico que lo hace mas rapido
Yeah, I’ve had a RUclips channel idea for that reason to document open source project architectures before but it seems like a lot of work for each architecture to cover. Although, I suppose they could be a video series per project instead 🤔
If you've been doing this for a long time you realized that the best tool is the one that has the most robust ecosystem, largest community, greatest documentation, easiest collaboration, better readability and most elegant API. These aspects are not founded in performance (speed) mostly. Most solutions one must build don't need to be faster than light, just responsive enough for the benchmarks. But for sure all solutions need the previously mentioned aspects.
Not faster than me running here to watch this video.
Honestly, react should have been doing static analysis from day one. Manual reactivity is a pain and a huge source of bugs, and react already compiles jsx into js, so I don't get why they couldn't perform static analysis
The React team had a project that explored this, but it had some drawbacks that led them to decide on a different path. I forgot the details, think it might have had something to do with concurrent rendering.
@@majorhumbert676 If you don't mind telling, have you worked for Facebook?
Is it possible to know this info without being an employee for Meta?
@@amateurtries7542 I just heard this mentioned a few times on Ryan Carniato's streams (the creator of SolidJs).
How do you expect static analysis to work client-side?
Not enough innovation tokens. React already innovated the VDOM, which laid the *foundation* for the rest of the frameworks.
Unless Angular did that first, I don't know.
It was never that the vdom was supposed to be blazing fast, the issue was that changing the real dom (and keeping track of updates) was so incredibly slow.
This teen is giving me peer pressure, now I want to create something epic
Same let's go!!!
That's a good thing, humans need competition to improve and get better. Without it you become comfortable and when you become comfortable you stagnate or get worse.
I thought i had gone far as a teen but now i feel old at 19
Find some garbage JS library (most of them) and optimize it
@@NathanHedglin lol
I understood some of those words!
What a rebel - just a wrapper instead of making this into a brand new framework 🤯
The idea of the virtual dom was to avoid repainting the ui multiple times which is costly. Which made react faster than angular.. so calling it overhead is a bit exaggerated
Sadly that is what React doesn't seem to be doing,entire point was to to avoid updating everything at once...
you can toggle that in angular btw, which will make it faster than react. And incoming version 16 with signal based component will make it a lot times faster
he figured out how to make react 70% faster I couldn't even figure out what exactly was done
From what I understand, Instead of rendering the component to get a virtual DOM, Million runs static analysis on the JSX to figure where the exact change in state is rendered. This allows you to basically skip static nodes which is great for minute changes like updating a single counter.
i love this code report series
I was getting paranoid from the lack of new JS frameworks lately
It's how you can tell if you slipped into an alternative reality, instead of asking who is president or prime minister, just ask if there are any new frameworks in the last hour, if the answer is no you are no longer in the same timeline or dimension.
So basically, the dude took a quick peek into the world of backend and figured hashmaps were cool, so he essentially did a similar thing for React?
yep
“Basically”? I mean, he put in the work and made a whole new framework, at least give credit where it’s due instead of being immediately dismissive.
that's a pretty long "quick peek"
@@Zer-ei4co Can you not identify a hyperbole when you see one? Of course it's impressive.
As for the result, it's an augmentation of React that has an additional ruleset to work with the static analysis. It's not truly a new framework. It's still just as impressive, but call it what it is.
@@aiexzs Well... the quick peek was quick, the time required to apply the principle, not so much. Honestly, making React run faster than SolidJS, even if it's potentially only in faster benchmarks is massive. That means React will perform much closer to vanilla JS which is an incredible feat and if it starts being used more extensively, it will have a massive impact on lower end mobile devices especially.
Ah, yes, they just turned React into Vue by introducing a proper compiler
Lol. Vue ftw.
He already has ten years of react experience but zero of professional 😅
Soon he'll be required to have 10 years of experience using his own framework for a job even though he started working on it in 2021.
about to get hired as an unpaid intern
he accrues experience years with react 70% faster than everyone else
@@CottidaeSEA 😂
@@YuriG03042 Maybe in the US lol. I'm straight out of high school in the UK and doing a degree apprenticeship. I get to work, get paid and get a degree all for free.
"MillionJS" - so Techlead achieved time travel (as a millionaire) and went back in time
just going with the flow and observing how fast world and technologies changes
gen z on their way to do things better than millions of programmers while shitposting really just goes to show how truly incredibly stupid modern computing innovation can be sometimes.
Good to see my prediction of Svelte-like compilers making their way into other frameworks is becoming a reality. Unfortunately, it means that Svelte will probably stay less popular than it deserves, but hey, we could always consider it the first "academic framework" in the frontend space.
For anything that can’t be done with plain HTML CSS and a bit of JavaScript I am using Svelte. It is not just the compiler approach that makes it my favorite. Especially the Stores concept runs circles around React and its state management (or whatever fancy words you use for data binding and data model).
I started as a web developer long before any of these frameworks were a thing. Moved to desktop, mobile and embedded and when I returned to web, React was the thing but Svelte on the rise. React felt immediately way too complicated for what it tried to solve whereas Svelte was simple and straight forward. Has everything I needed.
Will support it as long as it lives
The thing about Svelte is that you get interested in it because of the performance but then you stay because the dev experience is so awesome compared to the alternatives, and the good performance becomes a secondary benefit.
Cough *elm compiler and co* cough
Cough *elm compiler and co* cough
@@AbWischBar I'm in a similar boat to you. Every time I try using React I bounce off state management. Svelte was immediately intuitive by comparison
Your sense of humor just keeps getting better 🤣🤣
This video has forced me to rethink my whole teenage life :))
Thanks for always delivering the newest happening in front end, learnt a lot!
Absolutely 💯
Okay, I'll say it out loud: I'm angry, jealous and insecure by the fact that people are better than me.
Thank you for coming to my TED talk
Hey dude, im furious angry jealous and sad
But life is shit and can be like that sometimes😂😂
It's been -12 minutes- 0 minutes since a new JavaScript framework was released
2:32 "I am the virtual dom now" 🤣😂🤣😂 I'm dying...
W8, so he made all those gains but without use of chat GPT? Is that even possible? What a mad lad.
you can't make anything new with chatgpt lol
Stop overhyping "AI"
before yall take this comment too much to heart, treat it as a joke
@@flouglemireindustries4335 I love pizza 🍕
@@matthewjyao who got first and seocnd and what;s an IESF ?
cool video (as usual)! the benchmarks are misleading though and as you alluded to, for real-world apps it is basically unusable due to the constraints.
So the lesson here is that compilation is always better? Okay, good to have my life choices validated.
Omg the Captain Phillips meme nearly made me spit out my coffee
Q: How can you make React faster?
.
.
.
A: Use Svelte.
Well using things like seems like the angular way. That's a major deviation from how react is written.
It seems more of a discussion about ease of use vs performance. Very glad that you mentioned that people rarely run into performance issues due to optimisations in framework itself (my inference - sry if wrong).
Surely, the react developers also know the "compilers" other smarter people use.
(I would like to hear Ben Awad's opinion on the angular thing.)
he made it to the Regeneron International Science and Engineering Fair with it!
I don't think the amount of tech literate people has ever necessarily gone down percentage wise. I'd argue it will only go up and, just like actual literacy, will become a societal norm.
So it's like making a table in HTML
More than 20 years later everyone is still trying to ma Javascript not run like crap
over 10 years trying to make react not crap too
Optimizations in the framework always make sense. Yes, you can waste time on it, or actually invest it. An often overlooked part of a green future is not computing stuff that's not necessary - Of course, we'll always have to strike a balance here. This makes your app either faster for your client, or keeps their battery running for longer, or makes it work at all in the first place. How's that a bad thing? It's not, it's great.
could you do a 100 seconds mantine video? mantine looks like a useful component library and i think more people should know about it :)
I am learning React! Thanks for your content.
i think people forget how powerful your mind is when youre young. You really lose a lot as you age. Like my grind as a teen and early 20s made me feel unstopable. Then girls happen.
I checked his commit history
this madlad started blasting code on a first year of high school (possibly even sooner). I was studying for math exams when I was a freshman lol
This looks a lot like what Dioxus-rs did to get their virtual dom based framework working as fast as signal based JS frameworks!
"Well if you are a highly expirienced react developer you might be wondering what is a the virtual DOM!"' I am dying while laughing 🤣🤣
I’ve been expecting someone to do this with React for a long time.
A. LONG. TIME.
Fireship always puts a smile on my face 😀
That picture of the bridge was soooo cursed.
Would've been interested if it was made 70% easier and readable than faster....
@@IStMl or Vue!
@@heisenbergstayouttamyterri1508 Vue is great but Svelte is even cleaner. But the ecosystem is immature atm
@@IStMl it may be immature, but in the end, it does support most vanilla js libraries, as its just a compiler
@@phoneywheeze yes thats a huge plus, but a lot of libs are for React nowadays
@@IStMl not anymore. Svelte has a rich eco system with all tooling one needs
I’m sure the react developers are 100% aware of this and haven’t changed react for the exact reason you described as a downside to million.js
It's a possibility but also unlikely considering how buggy most Facebook owned software is.
If you don't follow the rules, it just reverts to the Virtual Dom. So as long as you know what you're doing, you get all the upside where it is possible, otherwise it still works as it would without million.js.
If it's boosting performance by 70% is definitely worth a try.
Me a 16 year old wondering what the hell is react? And here a teenager made this unbelievable piece of program.. Sometimes I wonder what the hell am I doing?
Damn my ad was 1hr long thankfully it wasn't unskipable😂
Probs their management loved their idea of virtual DOM and made the devs stick with it and make it just as fast as possible.
It's not always devs, people. I can also start to do what *I want* in the workplace, but that means I'll be let go soon enough.
This is the motivation i needed to quit programming.
bruh 😂😭
Yup no more
🤣🤣🤣🤣🤣🤣
i am gonna ship to rust.
YOU ROCKKK AIDEN!!!
always counting on fire ship for our latest software dev news
"if you are a highly experienced react developer you must be wondering what is virtual dom?" hahahaha....
React’s horrible performance has been appalling to me many a time when choosing the tech stack for a project. If, with this, it matches Vue (or even get close to it) then it will become a very viable option for a performant frontend.
since it's faster than solid, then it might also be faster than Vue that's is template. might only lose to Svelte and Strawberry, really
Just curious, but what kind of apps you do that react's performance affect you that much? I'm asking because i've done a bunch of web apps, all different to use with real time systems and really never had a performance issue.
What OP is saying isn’t based in anything. It’s just one of takes that are provocative to garner attention.
@@gomesiano When dealing with animations, the rerendering can take so long that the animation either doesn’t play, or flashes. Suppose a comment feed with many comments and many replies. And have a button at the top level to collapse all replies. I was unable to do it with CSS and had to use Framer Motion (which ngl was an excellent choice as it’s an amazing library, but would be better if I could just CSS my way through it instead of just flashing because it was slow to rerender for the transition to apply).
But other than this specific scenario, I always found myself trying to improve performance by going on roundabout ways to overcome its rerendering and eventually got tired of it.
@@AlexEliotOfficial Do work on your backend to support better loading features, nobody needs to see 10+ comments right away most likely
No way! A teenager beat a snail in a footrace??? How???
i didn't understood no shit but enjoyed the video. now this makes me feel good.thank you.
Be who you want, but there's always an Asian dude who can do it better than you .
Kudos to him
Yeah as everything in programming, it has its downsides because it requires you to write React with even more additional "rules" and specifics. I mean it's still crazy that it's that faster, but not sure how usable in real world.
At this point, I'm just waiting for React Forget and what the React team will do with compiling code and optimizations. I don't really have a problem with React's performance because it's quite fast, I just have a problem with some specifics regarding memoization and re-render optimizations because those are just pure overhead for developers using React.
My thought process, very much similar to Tensorflow which has a static graph and Pytorch which has a dynamic graph.
"the manure truck goes 70% faster now!"
I'm still not driving a manure truck.
"One day fix React-"
Let's not get crazy.
To be fair to Facebook developers, it's very hard to write a framework with an Oculus strapped to your cranium.
Great video! I don't really care about react performance, since we are building simple interfaces, it is absolutely fine. What I am really pissed with is all those millions of nuances with hooks, effects, state... Hope they would simplify things one day.
Usa svelte y listo, problema resuelto, lo digo por experiencia .
I don't understand 90% of the content. I still love to watch every single video.
So it's still slow AF.
A spoonful of soot for those who are prematurely prejudiced: "Returns must be "deterministic," meaning there can only be one return statement at the end of the block that returns a stable tree."
Million.js requires that you use DOM elements instead of components. This is because components can introduce non-deterministic returns, which can cause degraded performance.
🤯
and that;s mean ?
@@ko-Daegu it is not useful now in most cases
@@ko-Daegu That means it's useless for hybrid render contexts and all components which deal with multiple states. Which is vast majority of them.
Paul Dillett reference was savage
Love the not so subtle jab at react devs
React, please hire this guy before he makes another framework
react is just the new jquery one day it will be disrupted by something else and better
if meta drops support, yeah. otherwise it just has too much cash pumped into it to fail
React is the proof that the most popular framework isn't necessarily the best framework.
@@user85937 javascript as a whole
@@user85937 actually no the entire web, markup languages should be pulverized
Big names attached with React
that final diss kills
I'm not surprised knowing the quality coming from meta
This is where current js frameworks development is. Everyone says it's great, so it must be great solution, right?
I always thought how is it possible that there will be WHOLE TEAMS, even FULLTIME developers doing software and they'll manage to fuck it up so badly!
I'm now writing my compiler for my language.
It's going to use a CUSTOM backend and I'm also making my own file format and loader! Everything is possible with a little bit of passion!
Don't forget the compiler would have to be "multiplatform" but with vendor-specific dependencies and crash with cryptic errors upon not meeting them.
@@ra2enjoyer708 Yeah...
@@ra2enjoyer708 Sucks to be me I guess...
how is it possible that there will be WHOLE TEAMS, even FULLTIME
because they are being micro-managed by "Agile coaches" who don't give developers the freedom to solve real problems. Clearly react optimization didn't get enough "points" in the sprint planning :-(
@@Daijyobanai This doesn't change the result.
VDOM was a crutch, such as everything in react, so there need some crutches to make base crutch work EVEN better )
crutches are also tools which make things easier, and that is a good thing
@@BusinessWolf1 can't fight this one )
i'm a react developer, and i can admit despite the fact that react allows the creation of clean elegant component-based architecture, actually never seen a framework/library with such clean syntax, it's so dumb, It's like they have traded performance for cleanliness, the component has to rerender on every single state update, that's why there are too many hooks and wrappers to optimize performance, things were never a problem with vanilla js
You kidding me? This kid created his own framework with a compiler and it is faster than React? That is amazing!
Well no, he didn't. React has a lot more under the hood than just the method it handles DOM changes. It's just one bottleneck of react 'this kid' detected and fixed. To be fair, if other very good engineers had a reason to dig every single bit of performance out of react and compared it to other fast frameworks, they could have done this, too. It's sad enough that a teenager was the one who first got the idea to do it, says a lot about todays software market. This is not a hate comment, Aiden did great work, however it's not the magic some people make it out to be.
My guess is that other professionals had higher priorities. But still cool
Did you watch the video? It's literally a decorator for react components, which expects them to be written in a specific way. Chances are you won't benefit from it in a typical hybrid-rendered component which has to deal with auth, fetching, caching and data synchronisation between different sources of data. Without major refactor at least.
He made React react 70% faster. Brilliant.
The Paul Dillet reference was insane 😂
man, kids are on another level
It makes me sad that companies keep choosing for React, it's the most crappy js framework you can pick.
Company I work uses Angular
Im so happy to work with Vue, won’t use anything else
"there's no way a teenager could out-render an entire team of top-tier engineers at Meta"
After completing my BS in Computer Science, I can safely say that I'm not surprised some child outperformed "engineers"
😂 exactly. The bar is pretty low. Just need skinny jeans, a Mac and know basic JavaScript
@@NathanHedglin Not really Gaming Laptop is fine
Bro, teenagers work at Meta. I have a mate doing an apprenticeship at Meta here in UK
I love it when your video has many logos
@0:28 - Asian Efficiency FTW
there is always an asian better than you