- I’ve created two nearly identical sample applications, one in Vue and one in React, if you’d like to give either framework a shot in the context of the samples in this article.
- Both React and Vue are focused solely on the UI layer, and leave functionality such as routing and state handling to companion frameworks.
- In Vue there’s no need to call a state management function like , as the data parameter on the Vue object acts as the holder for application data.
@ReactAmsterdam: Vue vs React: Battle of the Javacript Frameworks
So which framework rocks and which framework is the new prototype.js.? Let’s find out.
I’ve created two nearly identical sample applications, one in Vue and one in React, if you’d like to give either framework a shot in the context of the samples in this article.
Usage of a Virtual DOM
Ahh, the oft spoken-about Virtual DOM.
For example let’s take this list in HTML:
Vue is reported to be able to diff changes to the Virtual DOM more quickly as it keeps track of each component’s dependencies during render, not needing to re-render a whole component’s sub-tree.
lifecycle method, but Vue handles this kind of optimization by default.
Note: Using a Virtual DOM is only a good idea if you’ve got a large application making many updates to the UI. If you’re only updating elements infrequently it’s probably overkill and could very likely be slower than updating the DOM directly.
Both React and Vue encourage a component based architecture. This essentially means separating your application into distinct chunks of related functionality with a defined way for each chunk to ‘talk’ to each other. A good explanation of what a component is can be found in this Medium article:
In Vue, you can use single file components that follow this principle.
files, but it’s an option.
As in the above example, both React and Vue have a concept of ‘props’, which is short for properties. These are special attributes on an element that allow for the passing of data from parent to child.
In React this is necessary as it relies on a local ‘state’ (more on that later) that acts as a ‘single source of truth’.
In Vue, props are slightly different. They’re defined on a component in the same way, but since Vue relies on a template syntax, how you pass in data is a little more tricky and you have to use the built-in template loop functions.
It’s a little more on the ‘templatey’ side of things, but it gets the job done and I find it about as complex as the React version.
Both React and Vue have bootstrap applications that get you up and running quickly with your development environment. In React this is Create React App (CRA) and in Vue it’s vue-cli. In both cases you get a project template set up according to the latest best practices.
With CRA you’re a little more handcuffed as far as options. It’s an opinionated tool, forcing you to use Webpack and Babel out of the box. With vue-cli, you have options in the form of templates which makes it a little more flexible.
In reality though, both bootstrap tools are awesome and give you a solid and modern starting point to get you coding. Anything that doesn’t make you configure Webpack is a win in my (and Jeff’s) book.
Both React and Vue also have awesome Chrome extensions to help in debugging. They let you inspect your application as you would any other website, but they allow you to see the Vue or React version of the markup. You’re also able to see application state data and see updates happen in real time.
React devtools in action:
Vue devtools in action:
One last similarity (and difference) between these two frameworks is how they handle companion frameworks. Both React and Vue are focused solely on the UI layer, and leave functionality such as routing and state handling to companion frameworks.
The difference between Vue and React is how they relate to their respective companion frameworks. The Vue core team maintains the vue-router and vuex frameworks and keeps them under the main Vue umbrella. React’s react-router and react-redux are maintained by community members and aren’t ‘officially’ under the Facebook/React umbrella.
While Vue and React have a lot in common, there are some major differences.
The biggest difference between React and Vue is how templating is done. In Vue, you’re encouraged to use regular-old-HTML for templating. This approach leverages custom attributes on standard HTML elements.
Vue encourages the use of HTML to render things, while it uses a familiar Angular-style method for outputting dynamic content with Mustache-style syntax. For this reason, Vue is arguably easier to integrate into existing applications as you can very simply incorporate Vue templates into existing templates without too much overhead. This also reportedly makes it easier for newcomers to adapt to this syntax.
The counter argument is that Vue’s template syntax removes the temptation to pile additional logic into your views/components, maintaining a separation of concerns.
It should also be mentioned that Vue does technically support render functions and JSX, like React, but they’re not the default approach.
method to modify anything in the local state.
With Vue a local state object isn’t required, and data is managed via the data property on the Vue object.
, as the data parameter on the Vue object acts as the holder for application data.
On the topic of state management for large scale applications, Evan You, creator of Vue.js, has said that these kind of solutions are suitable for small scale applications, but are not scalable for larger applications.
With that in mind, arguing about how state is managed in your application is most likely a premature optimization, and, as with most things, it’s a matter of personal preference. Besides, you might not even need to worry about it.
React Native vs. ?
So who wins the battle?
What are your thoughts on Vue and/or React? Let us know if the comments!
The counter to this is that a number of the frameworks share concepts that are broadly applicable. Understanding what a component is applies to React, Vue, Angular and others. The knowledge transfers, even if the specific implementations are different between them, so there isn’t a reason to avoid learning one. Understanding React makes learning Vue easier, and gives you a better sense of what trade-offs are made when choosing one over the other.
First, this is an _awesome_ comparison piece, thanks for contributing it!
I keep reading these and the more I talk to people (all over WCEU) my opinion becomes firmer that Vue is the better choice, but that neither is bad choice. In which case a quick decision is probably better for the project than a slow one.
Personally, my JS novice brain finds Vue way more accessible and easy to understand as I read it. Vue also seems much easier to integrate with WordPress’ historic methodologies, and it really just makes more sense to me out of the box. As I talk to people it’s clear Vue has a _lot_ of vocal supporters, whereas React has a lot of quiet supporters.
While the “powers that be” do seam to be sincerely entertaining Vue, it does seem a foregone conclusion it’s going to be React from those “deciders”.
I haven’t heard many arguments for React beyond “it’s what we know”, “it’s more mature” and “react native is awesome”. None of those seem key to me. Vue is easy to learn, honestly pretty mature on it’s own, and “native” doesn’t really matter to WordPress.
The thing that bothers me is hearing that the decision core makes isn’t going to affect or limit plugin and theme developers… it absolutely does in a huge way.
I get that a bunch of important core people already jumped on the React bandwagon (Automatticians, Yoast, Human Made and some others). However, I still feel like _that_ isn’t an important factor. Learning and training is easy compared to deprecating and changing things WP. Decisions should be weighed on what is best for everyone over the next 10 years.