A couple of months ago, I chose Vue to be my point of entry to the frameworks realm in web development. I also decided to go in depth-first. So, I practiced barebones Vue, then used Vuetify, then - after getting sick of all the props and emits - I learned Vuex, and now I am playing around with Nuxt. In all this, I have not even glanced at the documentation of React.
What I know about React, I know from occasional blog posts. A common claim I came upon was that Vue is simpler to learn than React. And that does not seem to come with a penalty in terms of performance or robustness. As I understand, from reading and not from experience, both frameworks are equally useful for projects of different scales.
At least from my experience, as I work on my first meaningful web project, I find myself constantly impressed by how simple the development process is. Especially, when component libraries like Vuetify are utilized.
Assuming my understanding is correct (and feel free to enlighten me if it isn't) I have two questions:
- With Vue.js readily available, is there any reason to learn React—other than the fact that React came first and therefore has the bigger market share?
- If no such reason exists, do you expect Vue to take over in the future? In other words, any reason for a startup project today not to be developed in Vue instead of React?
Top comments (75)
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.
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
useMemois 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.
I think
useMemo(() => )is more maintainable than$, and I am not smoking anything.What are you smoking?
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.
Actually I am also impressed by Svelte, which seems to be sort of novelty on this given battlefield, but it is contender with mentioning IMO (especially considering SvelteKit).
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
Ok, as I said before, I have not used React yet. But I think many of the arguments laid out here are invalid.
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.
v-ifandv-fordid 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.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.
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-foror 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.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 🤔
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
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
useEffectis 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...Would love to see an actual example of this as I see many pointing this out without providing anything concrete.
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.)
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
useMemoanduseCallbackotherwise 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...)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 ;)
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.
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.
You're right, not necessarily a con. Just a con for me.
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.
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.
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.
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.
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
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.
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.
So many comments about Svelte! Now I'm thinking my next step from Vue should be to learn Svelte not React. lol
I started with Vue and worked at start-up where I implemented. I now work a big brand where the architecture is react. Some comments just poo poo on Vue and claim React is better are Devs that haven't built production apps with Vue.
Vue:
React:
Can you elaborate on the "super modularity" point?
I like the point made in the Vue.js docs:
Beyond personal preference, and I will agree that this seems highly subjective, is there a reason why React apps would be "more modular"?
The jobs point is spot on. So far I find it to be the only compelling reason for a newbie like me to consider React.
By Super Modularity I mean everything is a component. So much so, in large systems, you need a design pattern like Atom Design Methodology: atomicdesign.bradfrost.com/chapter-2/
I think React, community and docs, point you in that direction. Vue can be the same way, in my opnion, but I think react more so
To be fair, it depends.
Vue is a progressive framework, and for me that is their best advantage. Got an old project you wish you can quickly revamp? Use Vue. Literally plug & play. There's no need for setting up bunch of webpack and configurations like React.
React is considered to be an ecosystem for me. You are either fully invested, or you should not use it.
If I am building Enterprise applications and more towards MVC-based web applications, I'll use Vue. It is cleaner, neater, and more elegant. If I feel like being fancy and want to have a wider community based plugins or kits, I would go for React. JSX is great, and I am glad Vue adopted it.
I think Vue and React will not replace each other. They are each their own. Learn both, and know when is good for either one of them. Remember back then, the best thing JS had was jQuery. Be grateful!
That seems like a fair comment. I was actually anticipating the "it depends" answer. The case you give with the "wider community-based plugins" seems convincing, but so far seems the only convincing case to pick React over Vue for a given project.
And don't get me wrong, I am grateful. I definitely plan to learn both. The main point of my second question was to assess which deserves bigger attention for a better long-term strategy, that's all :)
Understood your concerns. I find it hard to decide for a project all the time. But, to see it in long term, I would personally choose Vue over React.
Technology changes fast. Being progressive, it is easy to revamp or scale your application part by parts using Vue.
If I am to have a project that focus on being nice, fancy, and hippie, while knowing it will be totally obsolete and needs a total rewrite regardless in 2-3 years, I would go for React.
Some sort like a sprinter vs marathon. This is not to say React is fast, thus being the sprinter, but React has a mature community and a deep ecosystem. It will be a very impactful framework, but hard to bend it once it's planted in place.
A lot of perspectives flying around on which is better etc.. But this is probably the question of the article and I'm not seeing as much answers to this. My perspective is you will see more startups use Vue, and Svelte, but I wouldn't expect React to lose much ground. If anything you will see them shift up into areas which previously were reserved for Angular, and while Angular perhaps is losing mindshare will still take over places that were Java etc..
I don't expect Vue to take over, mostly in that while different it isn't different enough to necessitate this sort of change. Why choose Vue specifically? Funny enough many of the qualities that might have pushed Vue as different than React are now better represented in Svelte. The challenge of being sort of the middle of things is standing out. Svelte sort of completes the triangle with React and Angular as libraries that exemplify the qualities that Vue balances. That might make it the perfect middleground, or that might make it a messy compromise. Still Vue has a big headstart on Svelte so again I don't expect it to lose position when it comes to the job market and actually grow fairly substantially atleast for now.
But mindshare is interesting. I currently have this visual of React and Svelte sort of circling sort of trapping Vue and bumping Angular out of the party. In the same way Angular is for some reason just getting forgotten in conversations, Vue is sort of getting boxed in comparisons, where someone will use Svelte to exemplify certain things Vue was known for. Sure this is all hype and no one can deny Vue's popularity but the trial I think will come down to how these libraries attack the non-typical customer. Forget Web Applications and tech startups. I'm talking Websites. Biggest potential place to pick up new users. So grab some popcorn and get ready for the competition to heat up.
Yes! Thank you for addressing the main question! The more I read the responses the more I felt that the post triggered a Samsung vs iPhone kind-of debate. lol
The main reason for focusing on Vue and React in my case is inexperience. For instance, I had not heard of Svelte until I read the comments. It definitely is on my radar now, and I am grateful to all the tips and pointers I picked up reading this thread. The post picked up far more traffic than I expected and most of it was generally informative.
However, regarding your response, I think we can spot a criterion that seems to be a substantial driver behind which technology gets more market share and which gets driven out of the picture, and that is ease-of-use.
Now, I am almost definitely over simplifying things here, but ease-of-use is important, I think, because it translates into two things:
For example, I would argue that much of Python's appeal comes from its simple syntax and extensive and powerful libraries that take away much of the heavy-lifting from developers. I would also argue that the main reason Angular is being bumped out of the party, as you put it, is that it was often branded as the more complex framework that is mainly for big companies.
When I wanted to pick up a framework I looked up the top names and found React, Angular, and Vue. Then I dug deeper, and the first one to go out was Angular, because I kept coming across comments about its complexity. I began with Vue because I needed something I can pick up quickly to start building my portfolio. I already have the disadvantage of being late to the game, so the "simplicity" of Vue eventually made it my point-of-entry.
With this perspective, as I grab my popcorn, I predict the longer-living library will be the one that continues to have the lower learning curve while being robust. I think such library will more often be considered as "the perfect middle ground" and not "the messy compromise". But I agree, nothing is truly predictable in this race.
I guess I could sort of bucket it all under ease of use. But maybe less friction is better. Up until now I'd never peg the easiest library for the developer to write their apps to necessarily win the day. At least easiest as in least initial learning curve. I do think it plays a more important part with the widening of target audience though.
I'm honestly excited/curious about this next stage(hence the popcorn statement) as even with my general ability to predict this stuff I do not know where this goes. Mostly that since React came out in 2013 (ignoring Angular for a moment) it's been a one party show. All other libraries just followed queue, copied features, communications, terminology, etc.. And it shows.
But where we are heading we are already seeing splitting of opinions, so the next sets of features will see different libraries implementing differently and I don't know what will come out on top. It isn't necessarily the easiest approaches or the most technically performant. I live in this stuff between my work (core team on eBay's Marko framework) and my personal project (Solid Framework). So I genuinely think we might see an interesting change in dynamics with the releases in the coming 12 months.
It's an interesting tension because I know I can no longer identify in an unbiased way with people making the choice for themselves sometimes for the first time. I have too much specific experience understanding all the minute tradeoffs, and honestly hardened too many biases over the years. Funny enough not from choosing one solution and sticking with it but from doing different things and building strong resentment towards certain aspects.
It is often no longer about what I find fun as much as what I dislike the least. So I gravitate towards simple but powerful, which often means more work and leveraging of my knowledge but complete control in what I get and complete confidence in what I teach others. For me that's something like React. But Svelte has aspects of that as well if you understand how it works which is a bit masked behind their compiler. Whereas easy, or configurable are not characteristics I value as much personally but constantly am conscious of when designing.
I like react more. Vue has allot of sugar and dosnt visually match up to what you want to do. There’s allot of syntax that’s easy to name possibly the same that needs to be changed at times, yet it’s just a : and your tired things together. I like react more because it’s truly laid out right.
For me it depends the project I'm working on. I'm a big fan of Vue.js. I love the simple syntax and the clarity. So starting a new project I prefer Vue.js. However React.js is way more flexible and there are way more libraries based on React.js than based on Vue.js.
Can you define "more flexible"?
What would be an example of a task you cannot easily implement in Vue because of a limitation that does not exist in React?
Not necessarily focused on limitations of Vue.js. First of all Vue.js is a Javascript Framework and React is a Javascript Library. So in practice you see that React is more flexible in working/programming. Think routing or state management. Vue.js has one router (Vue Router) and one state management tool (Vuex). In React you can choose whatever you want. For routing for example you can choose React Router, Hook Router, Reach Router and so on.
Beside that there a lot of more libraries written for React than for Vue. Think of animation libraries. React has a lot! Framer Motion, React Spring and so on. Vue is way more limited in libraries like this.
I see your point. Thanks for clarifying.
Let me what you think about Svelte: bit.ly/3s2NwKh
TBH, that looks like a point on vue's side as vue router and vuex are official solution deeply integrated with vue, while react libraries are not official, so it fragments the ecosystem and are not as high quality as vue ones
The problem with any of these frameworks, and it's not going to be solved any time soon, is that they're all moving targets. That means if you're operating a team of any decent size, you have to be careful about the cost required to keep the team trained on all the latest ideas/paradigms, and the cost of constantly refactoring old code to do it the new, accepted way. If you don't, you'll pay the price in the long term with having 6 different ways to do the same thing in one codebase.
Any framework is going to be opinionated and have its own philosophies on how to design systems. The "best" frameworks will be the ones that mesh well with the project's domain and the development team that's actually developing and maintaining the project.
When it comes to the pros and cons between React and Vue, it mainly comes down to differences in basic developer experience. There are probably some slight performance differences, but it really comes down to choices in how you want to design the code making up your system. Do you want to use specific technologies that mesh better with a specific framework? Where do you like putting your component-specific CSS? Which framework seems to have a better ecosystem to you? Do you like JSX or Templates?
I think you should learn both if possible. I think there are good pros and cons to both frameworks that keep them pretty balanced in my mind, but even if you clearly prefer one over the other I think it's good to ask why you like it more.
Thanks for your input.
I am sure I will learn React at some point; it might even be in the near future. If not for anything else, it would be for a better resume. Even though I have fallen in love with Vue, React simply has more jobs—at least where I live.
Vue or Svelte or RiotJS. JSX is an abomination
Àwa vanilla js developer nko make we go die.
Some of these people that walked straight to a framework never knew our stack 😃😃😃at all
document. getElementById
document.getElementByClassName
document.querySelector
document.createElement
document.anything
document.poweremowere.
😃😃😃😃😃
The father will always be older even if its the grandfather Na he n sha born the rest. They may be smarter but na hen be source baba Na baba
We have to start our war also oooooo
Vanilla or js or react
🧑🏾🦯🧑🏾🦯🧑🏾🦯🧑🏾🦯🧑🏾🦯🧑🏾🦯🧑🏾🦯🧑🏾🦯🧑🏾🦯
Any vanilla js developer to join me in this fight😃😃😃
😂😂😂🤣. Baba, I just tire oh
Some comments may only be visible to logged-in visitors. Sign in to view all comments.