DEV Community

loading...

Discussion on: Vue or React?

Collapse
ivanjeremic profile image
Ivan Jeremic • Edited

React is just better and it gets better every year and most importantly it gets better first. So they come up with new things like Suspense, Server-Components recently or back in the day hooks, so no matter what they do everyone will just copy them but if you use React you get the cool things first. Most important is React components are far more flexible you write just JavaScript so no v-if stuff that forces you just to unlearn JS, In React you write If else for conditional rendering and it makes just more sense, also you can pass everything as props in React which is very powerful even other React components, In Vue you need to duplicate yourself so often because you need to register components before using it which is crazy, In React you create and export your component and use it directly everywhere without registering it somewhere. The ecosystem is also much bigger in React and they have also the most used Fullstack Framework called NextJS, NextJS will be the first who will make use of Server Components and it will change a lot of things. Also, the Vercel platform is amazing the guys recently partnered with BigCommerce, so you can build an e-commerce Site of any size now with them + NextJS

Collapse
adithyarafk profile image
AdithyaR-afk • Edited

Svelte is just better in every aspect. React suspense? This is already implemented in Svelte as Await block including a catch block. Server components ? Lol it this was present in svelte sapper from day 1 . And also your comment about unlearning JS? But React forces you to learn JSX which is the single worst thing about the framework. Don't get me started on Redux and Mobx. And the whole Should component update hooks shows how crappy React is and how much developer effort is needed to make a performant app

Collapse
ghamadi profile image
Ghaleb Author

So many comments about Svelte! Now I'm thinking my next step from Vue should be to learn Svelte not React. lol

Collapse
ryansolid profile image
Ryan Carniato • Edited

I worry the content here is misleading. Await block !== Suspense. Here are some people looking at actually implementing Suspense in Svelte. The Server Components in React is subtly different in that they do serialize partial updates after the client has already been rendered, and they support out of order streaming. Svelte/Sapper doesn't support either of these. JSX is like a template language, so obviously, people have different perspectives. It is funny that libraries with Single File components that put markup with their scripting don't catch the same flack but to each their own.

However, I agree with your last point. The effort to be explicit about blacklisting change starts you at a place of less performance. It has the benefit of things at minimum update instead of potentially not updating which can happen with any sort of auto-tracking system. So the mentality of leaving the optimization for when you want to optimize is logical. But the library presumably has enough information to make some of those decisions for you. I think this is more of a philosophical one though.

Thread Thread
adithyarafk profile image
AdithyaR-afk

Suspense almost serves the same functionality of await. Ofcourse there can be more control in react suspense(ex: handling promise timeouts) but the same can be done in svelte via wrapping your original promise in another promise wrapper ( which ironically you need to do for react suspense to work anyways).
As for JSX I agree it is subjective.

Collapse
ghamadi profile image
Ghaleb Author • Edited

Ok, as I said before, I have not used React yet. But I think many of the arguments laid out here are invalid.

if you use React you get the cool things first.

This would only be a plus if both codebases in general are equally maintainable in structure and syntax. If the popular claim is that Vue is easier to learn, more structured, and easier to maintain, then getting the cool features first doesn't matter; especially if the current features do a good job already.

Most important is React components are far more flexible you write just JavaScript so no v-if stuff that forces you just to unlearn JS

v-if and v-for did not force me to unlearn JS. Their use is very intuitive. In fact, I appreciate the fact that the HTML and JS parts are well separated in Vue. I think this is a highly subjective point, and not a deal breaker when choosing a framework.

In Vue you need to duplicate yourself so often because you need to register components before using it which is crazy

That is a false statement. You either register a component globally to avoid importing it in multiple other components, or you don't register a component and you import it only where needed.

Finally, when you speak of NextJS you should compare it with NuxtJS, not plain VueJS.

I am not saying Vue is better, I am simply pointing out the flaws in the arguments presented.

Collapse
ryansolid profile image
Ryan Carniato

If the popular claim is that Vue is easier to learn, more structured, and easier to maintain, then getting the cool features first doesn't matter; especially if the current features do a good job already.

Is this the popular claim? Easy to learn, completely. Vue likes being the progressive framework. Vue's like "All you need to do Web Dev are these couple things don't worry about the rest, and as you need to know more we will direct to your next level". That might mean changing your mental model slightly and introducing new APIs and capabilities. It's very welcoming. It's also leveled which works well with how we learn.

React's like "Here are some primitives, here is a philosophy, now go out into the world". You get the basics and never need to come back until they introduce a new feature. I think there is a lot of preference in what is a better pattern for each person/team.

But saying Vue is easier to learn seems reasonable, even if I think if your goal is to become an expert React might be easier from the onset because they don't waste your time. React is also simpler architecturally. I mean there is fiber, but if you were to write a clone from scratch React's model has less moving parts generally.

More structured? Easier to maintain? ... I mean there is a reason Vue 3 exposed their reactivity in the composition API. I imagine this was to address limitations in that structure. As way to improve expressiveness and composability. Those probably make Vue less structured than before and possibly not as easy to maintain. It's a good tradeoff. But I don't think these are particularly compelling arguments for either library.

There is an argument on less reliance on 3rd party libraries means more stable code base, but there is an equally apt argument that easier ability to swap out pieces leads to better long term maintainability. Not that you'd could do this in Vue as well, just you end up in the same place if official vue-____ doesn't solve your needs.

React does get the cool things first, but that is double edged. They are doing the R&D work and the early adopters are paying the price. Vue waits until things are settled usually before dipping in. Directionally being innovative might be something you appreciate in your tools, but most people are looking for stability. But it does make for the argument that if only one of these libraries was to survive I'd take the innovative one. Not that there aren't small innovations in Vue. They just mostly play it safe and their community thanks them for it. But I think it's still a checkmark on the React side.

The rest of the original arguments I agree are a bit out there. So much easier if people on both sides just understand that JSX vs v-for or what not are conceptually close enough that this comes down to syntax mostly. JSX side can claim theirs is more flexible (and it is) but you can always achieve the same things in Vue-like templates albeit with a bit more work. The Vue side will claim their static templates are better for compiled analysis/performance. But not in any meaningful way as the fastest UI frameworks use JSX or HyperScript.

Collapse
shadowfaxrodeo profile image
Nathaniel

You can do the same style templating in Vue as in React if you wish. You don't have to use v-if. It's just usually easier to write the html seperately.

I don't have much experience with React but it feels less like I'm making a website than with Vue. With Vue I write the html like I would if I was using vanilla javascript, then I use Vue to add functionailty on top. That just makes more sense to me.

Collapse
ivanjeremic profile image
Ivan Jeremic

Less making a website? I think this is not a con, who knows what the future brings maybe someday you run compile in a React project and it spits out a Web, mobile & desktop version.

Thread Thread
shadowfaxrodeo profile image
Nathaniel

You're right, not necessarily a con. Just a con for me.

Thread Thread
ivanjeremic profile image
Ivan Jeremic

I don't even know what you mean by it does not feel like you are making a website, what defines that writing just html css & js in seperate files? Why should everything be like that? I don't get it.

Thread Thread
shadowfaxrodeo profile image
Nathaniel

Progressive Enhancement is the reason.

At it's heart a website is an html document, and for functionality that can't be done with html, you use javascript. Then you make it usable and pretty with css.

That's still the best methodology for building a broadly accessible website, with the best performance.

When i build websites I want them to work even if javascript doesn't.

If i was building a video game in the browser then I wouldn't think about it like that. But most of the time websites are still just text and images. You can still achieve these things with react, i just don't think it's designed with that in mind.

Thread Thread
ivanjeremic profile image
Ivan Jeremic • Edited

JavaScript is a must have for modern sites if all you think about is how to make website work even if the user has js turned of what very likely no one has these days all you loose is flexibility. Also focusing to much on the browser is wrong I see the power of web tech everywhere also outside of browsers as GUIs for desktop and mobile apps, and if we keep developing like 20 years ago there will be no new innovations. I also see WebAssembly helping the web tech become a standard GUI for every language and platform.

Thread Thread
shadowfaxrodeo profile image
Nathaniel

Sure, but right now, if I want to make a website that's as accessible as possible, I don't want to start with Javascript, I want to start with html. So if I need complex functionality i reach for vue. if I need a small amount of functionality i use vanilla javascript.

~0.2% of people have javascript disabled. Javascript doesn't work at all until the page is loaded. So for at least a second every page has javascript disabled. Web crawlers often don't parse javascript.

I may well end up building some complex app with react one day. But I've not come accross a need for it.

Collapse
oncode profile image
Manuel Sommerhalder

Clearly you have no idea of VueJS. You don't have to register every component, just the ones that you want to use globally, others can be imported normally like every other JS moduke. Regarding the v-if, at least they are using understandable/readable HTML and not crappy JSX. Every React kiddie celebrates hooks because you finally are able to implement some kind of reactivity, while this is so much better solved in Vue (proxies) or Svelte (compiler). It's ridiculous to think React is better. React is the new jQuery for me.

Collapse
ivanjeremic profile image
Ivan Jeremic

It is ok that you have your own opinion but there are clearly more people who disagree with you in the world then with me.

Thread Thread
oncode profile image
Comment marked as low quality/non-constructive by the community. View Code of Conduct
Manuel Sommerhalder

It's not a opinion, it's a fact. If you think this:

useMemo(() => computeExpensiveValue(a, b), [a, b]);
Enter fullscreen mode Exit fullscreen mode

is easier / more maintainable than this:

$: computeExpensiveValue(a, b);
Enter fullscreen mode Exit fullscreen mode

Then I would like to now what you are smoking. The people you are referring to are the ones like you who have never tried another framework and saying "React is just better". 🙄

Thread Thread
ryansolid profile image
Ryan Carniato

I do actually prefer the React solution here (mostly) even if my personal perspective might put me closer to Svelte camp. I've used dozens of JS UI frameworks. I'd like to even consider I have some expertise on the subject.

I know the first thing is React but for the sake of this argument it doesn't have to be. We are talking about an explicit JavaScript semantic expression that could do the same thing as the Svelte one except it is more explicit what is going on. I know that in React that is not what is happening and that useMemo is a whole other craziness given Hook Rules and potential stale closures etc..

But syntactually the first is clearer of what is going on. What values are being derived from, what is happening simply from being named. There are other benefits. Composability, modularity.. What is $: and why does it have this behavior? Can I just pull my $: statement into a different file and expect it to behave the same.

To be clear I do think this is an opinion thing but one could easily make the same naive argument that React is factually better from that example. This comes down to easy vs simple. Implicit vs Explicit etc.. Everyone has it's own comfort level. We can discuss the tradeoffs of the abstraction vs the internals to death, but ultimately these libraries are doing similar things and more important similar complexities are there.

So conversation is good. This argument not so much.

Thread Thread
chrisza4 profile image
Chakrit Likitkhajorn

I think useMemo(() => ) is more maintainable than $, and I am not smoking anything.

What are you smoking?

Collapse
shadowcraze90 profile image
Shadowcraze90

I recently learned svelte a few weeks ago and absolutely love how simple it is. You can literally just look at the documentation with a quick glance and be like, "oh, that is how its done." Sooooo simple. At work we use Vue.js. React's bound properties are just messy.

Thread Thread
oncode profile image
Manuel Sommerhalder

Finally someone who knows what he's talking about and has actually tried all frameworks. 🤗

Collapse
sduduzog profile image
Beautus S Gumede

From your first sentence, I could tell that you're a great fan of React, and I read the whole thing to try and counter where I disagreed. But upon finishing the whole comment, I don't think it's worth the hassle.

Most of your claims about Vuejs are either subjective or either misrepresented. I've been using Vuejs for years and I've started learning react last year and I'm really enjoying it 🙂 There's nothing wrong with liking both, and choosing one over the other depends on so many factors apart from the ones discussed here

Collapse
kayis profile image
K

I have to admit, I didn't find anything interesting in Vue.

It's only USP seems to be "not made by Facebook".

If I wanted something better (and not just different) from React, I would use Svelte, which seems to be the only UI framework out there that brought something new on the table after React came out 🤔

Collapse
ivanjeremic profile image
Ivan Jeremic

Yep agree, most people hate React are just hating the company behind it, I find it very sad that developers get mixed into politics. Svelte looks great it is definitely my nr. 2 after React

Collapse
michi profile image
Michael Z • Edited

most importantly it gets better first. So they come up with new things like Suspense, Server-Components recently or back in the day hooks, so no matter what they do everyone will just copy them but if you use React you get the cool things first.

Not sure how getting things first is a benefit in any way other than "being first". The first iteration of something is usually still somewhat underdeveloped. The react team itself said that useEffect is more of a low-level API, yet it's used like crazy. By not being first, you can learn from these constraints, just take a look at the list of benefits Vue's composition API has over React hooks: composition-api.vuejs.org/#compari...

Most important is React components are far more flexible

Would love to see an actual example of this as I see many pointing this out without providing anything concrete.

you write just JavaScript so no v-if stuff that forces you just to unlearn JS, In React you write If else for conditional rendering and it makes just more sense

So the first time you did react is was completely obvious that to render a list, you have to use {array.map()} in JSX? Then how come this stackoverflow question has over 144k views?

You don't unlearn JS by learning a little template language :D It's just HTML with a little reactivity sprinkled on top. In fact, Vue stays true to the traditional form of web development (HTML, javascript, CSS) at the component level rather than mixing those things left and right. (I am not saying React's approach is bad, just responding to the "unlearn JS" claim.)

also you can pass everything as props in React which is very powerful even other React components

I have no real preference here. It's nice that react allows this, keeps it simple, but I also like the structure that Vue components have thanks to this (slots > render props). But I can see how this can turn people off coming from React.

However, you have to be very careful in react to properly use useMemo and useCallback otherwise the performance of your app will be really bad on complex pages. This I find extremely unfortunate as it goes against best practices of basic API design (blog.codinghorror.com/falling-into...)

In Vue you need to duplicate yourself so often because you need to register components before using it which is crazy

That's definitely annoying, but there is an RFC to address it already.
But not nearly as bad as all the boilerplate people brought into the world by applying every possible redux abstraction they could find on npm ;)