Introduction
Web development π is constantly evolving π, and technologies π» are emerging as game-changers βοΈ. Enter React βοΈ: a powerful...
For further actions, you may consider blocking this person and/or reporting abuse
The Virtual DOM was a revolutionary concept back in 2014, but it's actually not as efficient as other techniques. Aurelia and Svelte, for example, employee a reactive binding system that runs circles around Virtual DOM. When you actually look at how Virtual DOM works, you'll learn it's just a glorified dirty-checker.
I believe that React despite its popularity, is not the best option in 2023.
React is one of the slower front end frameworks
Don't get fooled by some tweets you read, you are not really up to date, the virtual dom in 2023 had now a nice comeback, you need to read about blockdom & million.js which are vdoms of the new generation, faster and smaller than svelte or signal stuff.
So, where precisels does the DOM reside? Yes: also in memory... And the DOM is pretty fast and efficient too.
This is belive of many REACT users that VDom is fast, but it is not true. VDOM brings you a lot of overhead, and every operation to be performed on the DOM has to be performed on the VDOM first, so i doubles your effort. In fact, even if you do not change anything, the VDOM might force you to compare the whole DOM tree, which needs a lot of calculation power. So, it is only a fairy tail that VDOM is fast.
BUT: Dom Manipulation is only a small part of the work of a browser. After the DOM was changed, the browser has to reRender the page, and this is the really slow task. It often takes a factor of 10-1000 longer than the pure DOM manipulation.
So: you can save some time, if the VDOM prevents you from unnecessary redraws. But today there are many frameworks out there, that have a better approach than the "brute force DOM diffing" implemented in REACT. Svelte compiles the redraw logic, so all the DOM manipulation can be more precise. But even if we use frameworks like VanJS, that work directly on the DOM, we find that browsers handle DOM redraw very efficient, so it is not clear if VDOM still has any advantage. It just helps you to continue to write bad designed web applications, that do not care for state changes at all...
VDOM diffing + bulk DOM manipulation beats DOM diffing + DOM manipulation, in part because abstracting away the DOM intricacies and collecting changes before applying them helps. But it's vastly slower than targeted DOM manipulations, and the optimizations that went into DOM render cycles have reduced the drawbacks of direct DOM operations significantly.
Nothing beats tailored solutions on performance, and frameworks that try to approximate those tailored solutions will necessarily beat the React approach. React does have its benefits, but they're rapidly dwindling, so the main reason to keep using React ends up being the established legacy - more mature ecosystem, more retained experience, more existing codebases.
For new blank slate projects, svelte is quickly becoming the tool of choice, and for good reason (much as I personally have at this point too much fatigue to make another technology switch for a while).
BΓ© self confident, if you are not building a Facebook like app,
React is certainly not the best choice...
SΓ©e what you can accomplish with a only 1.2k : VanJS
VanJS doesn't look good though, you can't use tags because they are functions.
Look at this dev.to/artydev/vanjs-flavours-51ha
I just did, it doesn't look intuitive to use.
And this one ? Demo:
That one looks better.
Gladπ
All this, in less than 2k!!, no bundling,
no hundred of kilobytes npm packages
You master totally your script and don t rely on cryptics concepts...
VanJS doesn't claim to
replace React, Angular or Vue
But for many projects you can avoid them...
I'd still rather use Vue, it's the easiest front-end framework to learn and understand. I don't care that much about bundle size (we tree-shake our apps though) unless I'm told we need to make our website fast on third-world countries with slow 3g internet connections.
I understand...
Personnaly, I don't want to fill my device with tons of npm packages I don't control every time I create a new javascript project...
Nice article, thanks for sharing.
Π‘ongratulations π₯³! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up π