Neither ReactJS or VueJS are overly novel anymore. With lots of time to establish identities, can we have a discussion about what fundamentally differentiates these popular JavaScript approaches?
Feel free to debate, but keep it respectful. š
For further actions, you may consider blocking this person and/or reporting abuse
Latest comments (46)
i started my front-end skills with vue 2 but after react released version 16 with hooks that means no need of class cumbersome but functional way then i decided to stay with react because vue 3 tried to implement such technique .
I go with Vue because
One thing I really like with Vue, is that it makes very clear what is specific to Vue. You migh call the props/component/data/methods object boilerplatey, but when you come to a code base you clearly have the This part is Vue and This part is regular JS.
It also provides shorthands for the most common tasks, as part of the same "We're not afraid to be a framework" philosophy.
Reach though, with its it's just JS approach, it's harder if the other dev has done something because of React or some other purposes. This leads to an unecessary amount of
constructor(props) { super(props); this.state = {ā¦for trivial things for exemple.This is my personal take, please take it with a grain of salt.
Vue
I'm quite frustrated with Angular, and although Vue seems easier to begin with, it still embraces some patterns from Angular, like bi-directional bindings, which are really confusing in a bigger code base.
Vue still requires one to separate representation (HTML) from data (JS), which is a conventional way of thinking but the context-switch can be exhausting.
I like the community and the fact that it's being authored to massive adoption by just a developer is empowering. The ecosystem is catching up and on-par with React.
React
Although React may appear to have a lot of jargons, it is very fast to learn coming from a functional language. If you have tried Elm, I think you will appreciate React (Elm is like the ultimate Nirvana for React). It was confusing to me at first, but more and more functional components seem to make a lot of sense and easier on debugging.
I like the fact that I can think of elements in terms of data (JSX) instead of HTML and code in the traditional way. It's very much coherent with the way many functional languages do things. The current introduction of hooks finally obliterate the need to write class-based components, which is awesome.
which one is your biggest frustration about angular?
Angular itself.
I just leave this here āŗļø
Personally, it boils down to the ecosystem for me. React has a very vibrant community, but that is both a plus and negative IMO. The React landscape is constantly changing. New, innovative, things come quickly, but the community is so fragmented on how to do things, it makes it harder to just pick the right tools and start working.
Outside of Context and Hooks, for state management, React has so many options:
Vue has an official library - Vuex.
Routing in React is different from pretty much every other library ever made. Instead of creating routes as objects (controllers), they are created as components inside the JSX. React Router v6 will FINALLY allow route definition by object, but it's still in alpha last I looked.
Vue offers this now, with an official router plugin.
React has a million ways to style components, few of which actually use basic CSS.
Vue allows you to use CSS, SCSS, etc and scope them to the component without an effort. Just add "scoped" to the style tag. You can also export it as a module with "module", instead.
Building something as simple as a form should be... simple. Not in React. There are countless packages to handle forms because doing it is cumbersome with 1-way data binding.
With Vue, just add v-model to your from element and your values magically update on each input.
Create-react-app is limited and assumes you'll only build your app a certain way.
The Vue CLI is super flexible and prototyping and scaffolding apps is super simple. They even have the Vue UI app built in to give the CLI a GUI.
JSX has first class support in Vue, too. So does Pug. Both are configuration options in the CLI. You don't have to use the template system.
The thing with React is, you HAVE to add so many libraries to it, because it's not really that powerful without them and with Vue, there's not many libraries you have to reach out for besides what's included in the "core" ecosystem.
IMO Vue is going to get a huge spike in popularity this year, once v3 is released. First-class TypeScript support, Hooks, fragments, portals, suspense and an even smaller bundle size with faster response times, all with a strong core ecosystem.
Don't get me wrong, I love React. If it weren't for React, Vue 3 wouldn't be shaping up to be so awesome, but I'd have a hard time recommending it for anything other than the fact that there are more React developers than anything else right now. IMO, picking something based on popularity isn't a good idea, though, unless the other option is so small its longevity is a concern.
Vue is more "batteries included", with stuff like Vue Router and Vuex offered "out of the box". This leads to much less debate and discussion about "how to do things" (even quite basic things, that is).
I would argue that this makes Vue (at least for beginners) much more approachable and less intimidating than React, with a smaller learning curve.
In contrast, the React world seems to be dominated way more by discussions about patterns and libraries, all of them with their fans and opponents. The debates surrounding Redux (with all of its variants - "Thunks", "Sagas" and so on), Context, HOCs, Render Props, Hooks etc are never ending.
What React has going for it is of course its dominant market share in terms of jobs, community and ecosystem - apart from that I'm definitely more sympathetic to the Vue approach.
P.S. I saw Svelte mentioned here in a few comments and I think it also absolutely deserves attention!
I had an option to choose when my previous company was paying for a course, I had a react course already purchased but vue kept popping up in my social. I tried both and ended up choosing vue because it was just more readable and I was able explain my frontend code even to my Team lead who is a traditional python dev and now I work as a professional vue dev and I can say I am pretty happy with my descision of moving ahead with it.
Considerations,
<template>tag a great idea? What about SFC as in Vue and Svelte? It actually makes it harder for IDE and TypeScript... But it enhances a great structure. But I think foldered component as in Angular might be a better idea not to compromise the IDE, and also add.spec.ts.I've dabbled with Vue a couple of times, but I've found it to be too complex for my liking, with more magic than I'd like and an uncomfortable amount of additional syntax to learn.
React is conceptually simpler, and thus I find it easier to understand what is going on. As I generally write only functional components nowadays, it's easy to understand a component as just a function that returns HTML. It also tends to encourage writing smaller components than Vue, making them easier to understand. There's also less special syntax, since apart from a few differences like
classNameandhtmlFor, the templates are mostly just Javascript. That does make the barrier to entry with React a bit higher, though.I really enjoy working with React, since I've always enjoyed writing Javascript and I feel like it embraces the language to a greater extent than Vue or Angular.
Some comments may only be visible to logged-in visitors. Sign in to view all comments.