A few things are becoming de-facto solutions in JavaScript with a lot of tutorials but without much discussion about the practical benefits and reasons. The goal of this series is to talk about these topics.
The rules:
Speak about the whys, not the hows. It's okay to include a few favorite libs and patterns but it should not be the main focus of your comment.
No Googling! I am interested in Your opinion, experience, anecdotes, and gut feelings.
Your comment might get linked or quoted in the weekly summary if you are not asking otherwise. I never quote comments in a negative context.
This week's topic is the Virtual DOM
Do you prefer cross-platform vDOM implementations or Progressive Web Apps? Are these two substitute or complementary?
Do you prefer JSX and CSS-in-JS or the old-school HTML way?
Did you ever have issues with the extra abstraction layer of a vDOM? I am curious about situations where you wanted to do something - that you could do with vanilla DOM - but was blocked by the vDOM layer.
Do you feel like vDOM based frameworks are faster? Can you mention a case where you experienced speed differences?
Whatever pops into your mind about the Virtual DOM.
All comments are welcomed, there is no wrong answer!
Latest comments (11)
I think that the vDOM and PWA can live together in harmony. I’ve used a vDOM implementation (Vue) to create a PWA that was, in my opinion, pretty sweet 👌. Together, the two technologies could easily wipe out native apps all together. While native apps do have their place, PWAs are a fantasticly fabulous tool.
PWAs are particularly great for the world of web and app development, because they cut out the need for an official App Store to acquire software from.
The default DOM API is hard to use and manage. I find the syntax used by JSX to interact with the real DOM using virtual DOM really handy. Plus using JSX feels more natural.
I prefer my JSX again and again, it's fun writing with it and more easier too though this is my personal opinion.PWA are more preferable than vDom maybe for me. vDom comes in when more complexity shows itself
I like virtual DOMs because they are a convenient way of keeping your application state and the DOM synchronized, especially for dynamic applications that need many non-trivial updates to the DOM.
Regarding performance, I don't think it's the main selling point, but unless you are doing something crazy, they are usually performant enough.
I do not like JSX, though. I think it is easier and more straightforward to work with plain JS functions and I see no point in bringing in a DSL only because it resembles HTML.
Seems like a good idea to keep performance when you need a lot of changes to the actual Dom. But for a lot of websites it seems overkill to me.
VDOM was great a few years back but now there are alternatives like lit-html et al. which are looking p.h.a.t.
If you think VDOM is the only efficient way to update the DOM in JS, try something new this year.
Thanks for the series, Miklos.
This series really makes me think about the topic.
Below are my answers in-line.
I think they are unrelated for preference.
I believe vDOM is an in-memory representation of DOM while PWA is a practice to follow to make the site work offline like a traditional app.
I don't have a preferance as I am still learning CSS-in-JS on Manning video course.
I believe people make huge deal about vDOM being faster and sometimes slower than a direct DOM manipulation. It's a topic for me to learn 😅
I've never heard of it until I started using React. Got started with React only because of vDOM being faster (according to many articles that came out at the time).
But it seems like a good step to providing devs more options.
Thanks for the kind words (:
I meant that both PWA and vDOM (with React Native) are competing techs in a sense that they try to provide nice (native app like) experience on mobiles. Maybe I could phrase it a bit better.
I see what you mean :)
I still cannot prefer as I haven't implemented PWA, yet 😅
I always had mixed feelings towards this topic.
I like JSX and CSS-in-JS and I think they are not stranger than some domain specific HTML extensions for templating.
I think the speed argument is more of a marketing trick that went surprisingly well. The new vDOM is 'zero runtime' in this sense and I am not convinced by it either. Benchmarks should be used to spot extremely bad raw performance and to fix sily errors.
I secretly hope that PWAs will prevail over React Native. There is a big difference between 'Learn once, use everywhere' and 'Write once, use everywhere'. I admit that creating a truly nice mobile experience on the web is super difficult though.
I don't really like the persistent nature of current vDOM implementations and I prefered the state level diffing of AngularJS over the view level reconcilation of React. I feel like the latter results in slower apps and codebases bloated with memoization and other performance tricks.
Ultimately I would prefer to have JSX as my templating language with state level diffing and real DOM behind it instead of the vDOM. I don't know if this is possible though.
I'm a huge fan of JSX. The virtual DOM is much harder with animations until you get past the idea that you're going to tell it do put x in position y. vDOM's benefits, for me, are more logical and implementation benefits than performance benefits, however others seem to think that performance is better with vDOMs and it always comes up when vDOMs come up.