Posted on March 19, 2019 by: Riley Adair, Front-End Developer
React and Vue use declarative programming and a Virtual DOM to keep the user interface and the state of the application in sync. The two handle data/state changes differently under the hood, but the development concept is the same.
Both tools can be used with centralized state management. As an application increases in size, it gets harder to manage and to share data across components without causing unpleasant side effects. By offering a single way to modify the state, they simplify debugging.
Both can easily be plugged in to any existing web application, even if it’s not a single-page application. This is the case with the Gutenberg editor, which is built with React and was recently implemented in the WordPress ecosystem. The case is similar with GitLab, where their jQuery codebase is being gradually replaced with Vue.
React and Vue also share the same core programming paradigms: component-based architecture, props, and lifecycle methods. If a developer is already comfortable with React, they will be able to pick up Vue with ease.
React and Vue are lightweight, and their performance is fairly similar. This image shows where React and Vue line up in terms of size:
Source: Daily JS
Several technologies have also emerged utilizing the library, such as the popular static site generator Gatsby.js and mobile native rendering with React Native. React provides the advantage of learning one library and utilizing the code across multiple platforms.
Vue has a smaller market share, yet its community is constantly growing. It has fewer third-party libraries than React, but has more tools available right out of the box.
To generate static pages or implement server-side rendering with Vue, Nuxt.js is the most popular and production-ready solution. Currently, Vue does not have a widely adopted way to develop native apps. However, this could change in the future with native frameworks NativeScript and Weex.
Below are two examples of a simple List component iterating over an array of items:
React – JSX
Vue – Single File Component
The Vue framework offers a great degree of customization, allowing you to:
- Choose a template language like Pug
- Drop templates in favor of JSX or render functions
- Scope your CSS or SCSS to the component
When it comes to writing highly reusable components, there are specific cases where Vue templates are not the ideal solution and the power of JSX or render functions is needed for your Vue component.
Both technologies use component lifecycles or methods that offer a way of hooking to specific events in the “life” of a component. Vue’s take on lifecycles is a little more straightforward and more intuitive than React. Being a younger framework, Vue seems to have taken the better things from React and Angular and addressed some of their problems.
Initially, JSX could be a bit of a learning curve for a typical developer. Although JSX is a different approach, it is very similar to HTML, and a developer should be able to grasp it with some practice.
Vue does use its own specific syntax with bindings and directives. These are designed to make developers more productive and keep code clean. On the flip side, this means developers have a larger API to learn.
Learning new APIs can introduce cognitive overhead and is a valid concern. However, I would argue React introduces significant cognitive overhead itself for the exact opposite reason. React’s smaller API means we need to use relatively complex patterns to achieve certain things, and this is where we start to meet React’s higher learning curve.
When writing more advanced components, e.g., components wrapping others and giving them additional behavior, you will start to see noticeable differences. With React, you will need to make use of one or more Higher-Order Components, Render Props, or the Function as a Child Component pattern. These patterns provide great solutions to real problems, but they add significant cognitive overhead (more so than learning new syntax does) as they are relatively complex patterns.
In Vue, these patterns are mostly unnecessary due to the larger API exposing a number of methods of passing data around. For example, Scoped Slots (slot-scope attribute) is Vue’s solution to Render Props in React. At the end of the day, learning functional programming patterns in React will make you a better developer, but you have to ask yourself: Do you want to learn patterns and code these yourself in React, or do you want to learn Vue’s syntax and let its code handle solutions for you?
React’s community is indeed much more significant, but has the disadvantage of being more fragmented than Vue’s. It can be harder to find straightforward answers to common problems. Given that Vue is more tightly defined than React, it is noticeable that in Vue many questions are answered straight in the documentation itself, without needing to search too much in other places.
It’s also worth noting that Vue has wonderful documentation and its API references are some of the best in the industry. They’re well-written, clear, and accessible. React documentation is fine. It goes through the basics of React development and includes some advanced concepts, but the presentation isn’t as accessible or well-structured.
All in all, developers will be able to get up to speed faster with Vue than React.
Both are powerful tools with their own advantages, and anything you can do with one, you can do with the other (for the most part).
Vue as a framework provides more built-in features and companion libraries from the core team, which eventually makes the development experience smoother.
Router integration is a prime example. Vue has conveniently exposed route navigation hooks (beforeRouteEnter, beforeRouteUpdate, and beforeRouteLeave) inside route components where you can easily execute page transition logic.
Vue gets us closer to the actual DOM representation when working with event handlers. I have come across pain points when programming interactions in React, as having access to all properties of an event is not as straightforward.
Vue also provides the option to emit events or pass callbacks (like you would in React).
Finally, being able to quickly write Single File Components and switch to JSX on the fly shows Vue’s flexibility as a tool and progressiveness.
As a developer choosing between the two, I tend to learn toward the one that offers more integrated solutions, is easier to use, and is faster to develop in. You know what I’m saying.
Again, anything you can do with one, you can pretty much do with the other: component libraries, small to large applications, simple to complex applications, server-side rendering, and generating static pages. However, based on their different natures, I would recommend…
Choose React if:
- You are looking to build complex applications where specific third-party libraries are needed.
- You are potentially going to code a native mobile version of your website and code sharing is important – some React code can be shared with React Native.
Choose Vue if:
- You need a quick turnaround.
- You are building highly interactive applications with custom animations, page transitions, etc.
- Your developers prefer HTML templates.
If you are curious to try React or Vue, Brad Traversy has a fantastic, free one-hour crash course on each tool: