Opinions & Debate: Vue.js vs. React.js

With so many new libraries and frameworks out there, it is pretty hard to keep up with all of them, and that is if you can even decide which ones are worth spending time on. Today we’ll compare people’s opinions on two of them, Vue.js and React, both of which have their own benefits.

Let’s check what people say:

“Working with Vue.JS was a great pleasure, I found the learning curve very shallow, however, that could purely be based on my experience, as mentioned before I have worked with a few in the past.

The default template structure feels very similar to how it was working with Angular, so developers coming from that background may pick it up a bit faster than they would with React. I cannot really go un-learn React to see if it influences how easy it was to pick up Vue.JS.“

Reme Le Hane

“I prefer Vue.js over React. Vue.js is the new kid in Javascript town. So I would like to say the simplicity of learning is probably number one. Simplicity is built into its design.

• Vue is simpler, it features a lot of concepts from Angular 1 and React. You can use it without any build system — just include it into HTML file.
• React is bigger and a little more complex (e.g. in terms of setting up).

So if you want to just want to learn a library, without a build system choose Vue. Vue.js is really approachable and provides a little more structure on how to take on various things. If you’re still in doubt try both. Also click here to read more on differences between ReactJS vs Vue.js vs AngularJS.“

Kathreen Riya

“To answer your main question, I would argue that Vue.js is an excellent way to understand React’s systems better . . .

Before you read my answer further, I highly encourage you to check out Vue’s framework comparison. It’s remarkably thoughtful and weighs in on many important considerations.

Which platform(s) do you want to develop for? Pick your poison.

• React is ideal for almost any platform. Whether it’s web or native development, React has you covered and is maturing in both directions. The benefit is being a flexible developer in any context when it comes to UI development. It’s even made its way into virtual reality.
• Vue 2.0 is moving towards native too. Evan and his team are working with Alibaba to create Weex, which will allow native rendering comparable to React Native. Vue 2.0 is primarily focused on web dev now, but was written to support other platforms moving forward. According to Evan’s latest Vue blog post, 2017’s going to be a big year for Weex.

How soon do you want to begin creating? Why not today, instead of weeks?

• React has a steep learning curve. Its documentation and terminology around certain concepts is a bit unconventional and messy, where Vue’s Guide, property names, setup process, etc. all feels very familiar and in line with broader HTML, CSS, and ES6 standards. Thankfully for both frameworks, their communities are thriving. You can find tons of resources to get started. (Resources: React / Vue)
• The biggest roadblock I faced for both was understanding the build toolchain: Webpack, JSX , plugins for my text editor, the list goes on.
• However, Vue doesn’t require Webpack, or anything else for that matter. You can write ES5 applications right away with a quick include of the library using your favorite package manager or CDN. This means you can play with Vue in CodePen and other code sharing environments right away.
• React has recently introduced create-react-app for getting started. You could compare this to Vue’s command-line tool.

In the professional world…

• Vue has been adopted by big names like GitLab, Laravel, PageKit, etc.
• Vue still feels like the new kid on the block in my development circle. However, many developers at my company (IHS Markit) have started adopting Vue, after considering Angular and React very heavily.
• React is very popular and it’s been around longer. It’s likely more businesses have used React. Keep that in mind if you’re in the market for a new job right now.
• In the past few months (Fall 2016), I’ve seen a lot of articles floating around saying: “Why we chose Vue.js over React and Angular…” Vue.js is gaining traction, and quick, as more people realize just how much easier it is to use.

Commence further Vue fanboyism…
State management and routing are included! You already know about Flux/Redux, so here’s what Vue has to offer:

• Vuex is Vue’s Flux/Redux/Elm-inspired implementation , specially tailored to use Vue’s reactivity system. Its system of mutations, getters, and actions is wonderfully coordinated and very easy to integrate with your components. Though, if you prefer to use Redux, Vue is cool with that too with Revue. Either way, knowing how to use state management systems is a valuable pattern to have on your belt.
• vue-router is damn simple and powerful if you need URL routing and params. Just check out the docs.

Other notable things…

• Vue’s documentation is a dream. I can’t tell enough people how great its Guide and API reference are. Evan You (the author and project leader) has a way with putting modern development in layman’s terms. Even for seasoned developers, it’s refreshing.
• Writing single-file Vue components feels so natural — I’ve never looked back since. This does require Webpack, but have no fear, Vue provides a really handy command-line tool to help you generate barebones projects with very little setup. If you like Browserify, it does that too. Hell, you can write your own CLI templates if you want! The provided templates are really flexible.
• Vue 2.0 supports server-side rendering, helping you with SEO, and makes your site viewable by people with Javascript disabled.

Last, what continually has me impressed and coming back for more with Vue.js is its outstanding community, the professionalism of Evan and his contributors, its ease of use, and its no-brainer alignment with the Web Components standard. I’m blown away by the success of this project, and how delightful it has been to create just about any front-end I could dream of in no time.“

Andy Merskin

“I’ll chime in here as well.
I spent about a year working with React. I recently switched to Vue in the past few months and I haven’t looked back since. A few things about Vue got me hooked over React, namely:

• **JSX ** — I hate JSX with a passion. It literally always took me a few seconds, if not minutes every time I opened the project to come to terms with the fact that the Javascript I was looking at for a component consisted of styles, traditional javascript methods and UI elements all smashed together into one componentized beast. It got old pretty quickly.
• **Renaming of traditional html attributes — ** Traditional HTML has classes and styles as attributes on the elements. Oh well, React can do that too, all you have to do is ensure that all your class attributes are called className and style attributes don’t have string values anymore. Imagine trying to create a website based on an existing theme that you purchased. Changing it over to React literally felt like sticking a knife through your eyeballs. With Vue, existing HTML just works. You want to “reactify” it? Go ahead, but it’s not required like in React.
• **Bundlers required ** — So React is just the UI layer huh? They are correct; you don’t even need webpack or any other bundler. But try building anything substantial without it. You’d have a hard time. You start pulling in packages left and right that enables functionality and all the guides for those packages assume you have webpack. If you’re shipping ‘Hello World’ then using only React is fine. Anything else, start reading up on all your bundlers.“

josullivan

“I used Angular 1 for a little over a year then switched to React. I’ve taken a look at Vue a couple of times but never really built anything with it, that being said I’ve heard nothing but great things about it and from the looks of it, it is pretty easy to pick up.

I’m going to go with React for 3 reasons:

1. It’s the most popular right now: That counts for a lot, most popular means it has the most resources online, better job opportunities and more likely to have long term success (unless they do what google did with Angular 1).
2. It’s universal: There are libraries that allow you to use React to write mobile and even desktop applications (although I haven’t personally tried building desktop apps). Vue is also going to come out with its own hybrid mobile framework but even when it does come out I seriously doubt that it will catch up with React Native anytime soon considering how much of a head start RN has and the size of its community.
3. It’s complex and hard to learn: I’m going to disagree with most of the people here and say that this is not only a good reason to learn React, but actually one of the things I love about React. Learning React will make you a better javascript developer. React is difficult because:
4. it uses a lot of intermediate-advanced JS concepts. Things like a thorough understanding of objects, the “this” keyword and some functional programming concepts are needed to work with React efficiently (the last one is more relevant if you’re using Redux). It will also more than likely force you into learning ES6 if you haven’t already.
5. It’s only 1 piece of the tool set you need, so you have to rely on other libraries like Redux. This can be painful when starting out but it teaches you how to mix, match and connect different libraries together. It also gives you the advantage of being able to customize your tools as you see fit or even drop React into an Angular/Vue application if you only want to use it in a certain part of your application.
6. It’s usually used with build tools like webpack (it doesn’t actually need them though). Vue is much easier to setup without build tools but pretty much any real world application is going to end up using build tools anyway, so this is only an advantage if you’re still learning and just want to skip the hassle and get to the building quicker. Even if that was the case you can still do that with React by using project generators like create-react-app to skip all the configurations and get straight to building.

The problem with front-end development is that the JS ecosystem can be very volatile, frameworks are constantly changing. So I would argue that instead of looking for the easiest/ most powerful/ most popular framework out there it might be more useful to learn something useful to you long-term as a developer (although React also has the most popular thing covered). Even if React eventually becomes outdated I’m not going to have any regrets about learning it because I walked away knowing way more than I knew about Javascript when I started.”

Ahmed Wagdi

“I do very little web these days, mostly working on back-end data processing, network I/O and distributed comms.

A bit over a year ago, I wanted a real-time web UI to visualize some of the data I had on server-side, which I was trying to do using SignalR. I went back through some of the popular frameworks, with a pretty simple mindset of “Can I read the ‘getting started’, and get something basic working in about 15 minutes?”.

I ended up choosing Vue, mainly because it used simple objects for models and I could literally just pass stuff I got from SignalR directly into it and have it show up. Almost everything else I tried had some type of wrapper/proxy around the data, which meant you had to run through some mapping exercise to get models working. I was close to deciding on Mithril, but when I found Vue it just clicked with me way more. I actually really wanted to do React, but Vue was just so much more approachable that I couldn’t justify spending the extra time learning React.

The real test, however, came months later, when I went to modify and add more functionality to my simple debug UI. I was able to pick it up nearly instantly and even made some fairly substantial changes.

Contrast to my experience with say, Ember. We have a big app written in Ember, and every time I try to do even what I think should be a simple change (after not touching it for months), it takes me 5 times longer than I thought, and I end up spending most of the time fighting with it before realizing I forgot one of the 5 places you have to modify to reference an additional dependency or some other equally trivial but infuriating detail.

You can learn the basics of Vue in minutes, and be quite adept within hours of it. That’s something not a lot of frameworks can claim, and it’s a seriously underrated benefit.“

Gregmac

Folks, what do you think? Feel free to jump in this debate and don’t forget to share so others can find out about this.

This post was originally published on the Bootstrapbay Blog.