Drinking game with JS library names

To make things easier, our R&D team prepared a detailed Vue vs React comparison.

Table of contents:

React vs Vue: Meet the contestants

If you’re at least somewhat familiar with front-end development, you’ve probably heard about React.

It interacts with HTML documents via the so-called virtual DOM (i.e. a copy of the real DOM with all nodes represented as JavaScript objects) and follows a declarative style of programming. Its component-based approach gives you more speed and flexibility when building complex applications.

Vue.js is another popular open-source framework for building complex UI.

It improves on many concepts found in Angular and React.

Vue is advertised as a progressive framework meaning you can migrate your existing projects one feature at a time. Depending on your needs, Vue scales between a lightweight library and a full-fledged framework.

Like React, it uses components, two-way data binding, and virtual DOM.
Over the last couple of years, Vue became extremely popular among developers and gained official support from Laravel.

Round 1: Popularity & Support

Vue.js vs React: what famous apps use them

A library’s popularity affects the number of developers available for hire and the quality of third-party libraries. But most importantly, it means that somebody out there has already solved the problems you might encounter while developing your project.

React

React is a clear winner in this category. Its huge community translates into more tutorials, online courses, articles and 3+ times more questions on Stackoverflow.

A bigger community means a huge ecosystem of third-party libraries, packages, tools, and extensions as well as support from all major IDEs.

Moreover, the library is developed and maintained by Facebook which pretty much guarantees its long-term support. It’s used on multiple FB projects and each team can update the library. There seems to be no official roadmap as updates are based on requests for comments.

Unfortunately, React’s community is a bit more fragmented than Vue’s and you often have to spend more time searching for solutions to common issues.

Where to find help: DEV’s React community, Hashnode’s React community, Reactiflux chat on Discord, and Reddit.

Vue

Vue has a smaller market share yet its community is constantly growing. It has fewer resources, packages and third-party libraries that React (many of which have no English localization) with more tools available right out of the box.

Vue has support from all major IDEs, just not as extensive as React.

It is maintained by Evan You and a team of 24 developers financed via crowdfunding. You can see its high-level roadmap on GitHub.

Where to find help: Vue forum, Discord (perhaps the most active community at the moment), and Reddit.

Round 2: Talent Availability

With React being the most popular front-end library, there’s more experienced engineers available for hire. According to 2019’s front-end tools survey, more than 48% of developers can use React at a comfortable level (vs 23% for Vue).

Developer Skills report by HackerRank mentions that 33.2% of companies need React developers while only 19% of engineers have the required skills.

For Vue, the shortage is even higher (10% vs 5.1%).

Although it gained traction only a few years ago, Vue comes fourth in the list of technologies programmers would like to learn in 2020.

Its incredible ease of learning means the number of Vue developers is likely to go up in the future.

Supply and demand graph about Vue.js and React developers

Source: Hackerrank research

Round 3: Documentation

React’s documentation pales in comparison with Vue’s. It goes through the basics of React development and includes some advanced concepts but the presentation isn’t as accessible or well-structured.

What’s more, it doesn’t include the detailed overview of React ecosystem like in Vue’s docs.

Vue has wonderful docs and its API references are one of the best in the industry. They’re well-written, clear and accessible dealing with pretty much everything you need to know to create Vue applications.

Just like React, the docs are translated in several languages in addition to English.

For better or worse, Vue is more opinionated than React with many issues having a clear answer in the docs.

Round 4: HTML templating vs JSX

One of the key differences between the two frameworks is the way they handle templates.

React uses JSX where both HTML and CSS are expressed via JavaScript with XML syntax. This allows you to build standalone GUI components which contain all the rendering instructions.

function formatName(user) {
return user.firstName + ' ' + user.lastName;
}

const user = {
firstName: 'Harper',
lastName: 'Perez'
};

const element = (
<h1>
Hello, {formatName(user)}!
</h1>
);

ReactDOM.render(
element,
document.getElementById('root')
);

The declarative syntax makes it easier to understand the function of a particular component.

JSX gives you the versatility of a full programming language with temporary variables, flow controls, and referencing JS values directly in scope. It also supports sophisticated IDE features like autocomplete, type checking, or linting.

Vue has a more traditional approach with Single File Components and distinct blocks for HTML templates, styles, and JS. This separation of concerns is immediately familiar to any front-end developer making the framework easy to learn.

Any valid HTML can be a Vue template. You can add JS functionality with bindings and custom directives (attributes). Templates allow you to gradually migrate your project to Vue.

The framework has a great degree of customization allowing you to:

  • Use SCSS or CSS scoping instead of CSS;
  • Write your code in preprocessors like Pug; or
  • Drop templates in favour of render functions or JSX.

In the end, the choice between JSX and templates comes down to personal preference. JSX can feel more powerful and flexible while templates offer a clear separation of concerns preventing you from injecting too much logic into views.

Finally, designers and HTML developers are seldom used to JSX which makes collaboration a bit of a problem for UI/UX-heavy teams.

Round 5: State Management

State refers to the data shared between all UI components. As your system gets bigger, it gets harder to manage this data without unpleasant side effects.

State management is essential for React apps. There are a number of frameworks like Redux that can help you with massive states. They offer a single way to modify the state which makes debugging simpler.

In Vue, there’s no need for local state as you can modify data using the data property of a Vue object. For larger apps, however, you’ll need an external library for state management (e.g. Vuex).

Like Redux, it has a “single source of truth” in the form of application’s store. The only way to alter the state is by using handler functions called mutations. However, the actions that describe state modifications are methods that commit mutations.

Round 6: Ecosystem

One of the biggest differences between the two technologies is that Vue is a standalone framework and React has to be used together with other libraries.

React relies on external solutions like Flux/Redux for routing and state management.

By offering a single way to modify the state, these frameworks simplify debugging.

Facebook leaves managing react-redux and react-router to the community resulting in a more fragmented ecosystem.

Redux Data Flow Scheme

Source: Smashing Magazine

Vue has fewer companion libraries. However, the functionality that requires you to use a library in React (e.g. props check) is already bundled in Vue. There’s no need for the local state as you can modify data using the data property of a Vue object.

For larger apps, however, you’ll need an external library for state management (e.g. Vuex). Like Redux, it has only one way to alter the state by using handler functions called mutations.

The team behind Vue maintains and supports the core frameworks like vuex and vue-router for routing.

Vuex state management

Source: Vuex. vuejs. org

Round 7: Performance

There are two main metrics that determine the speed of an app: start-up time and runtime performance.

Both libraries have tiny bundle sizes which speeds up the initial load (31 KB for Vue/84.4 KB uncompressed and 32.5/101.2KB for React).

For runtime performance, you check this benchmark which compares startup times, memory allocation and the duration of operations for popular JS frameworks and libraries.

Both libraries have excellent performance. Vue is slightly better in memory allocation and startup times while React is a bit faster at runtime.

You shouldn’t, however, judge a library’s performance based on benchmarks alone. The speed may vary greatly depending on application size and your optimization efforts.

Out of the box, both libraries have:

  • server-side rendering (SSR);
  • tree shaking; and
  • bundling.

They also use a virtual DOM. As modifying the real DOM is a resource-intensive task, the updates are first applied to the virtual DOM.

In React, modifying a component state will re-render all its child components.

To improve performance, you can use PureComponent, shouldComponentUpdate or immutable data structures. However, in those rare cases when the render output for child components isn’t controlled by the component’s props, this technique can cause inconsistencies in the DOM state.

Vue, on the other hand, tracks dependencies preventing unnecessary renders of child components.

Read more: how to improve SPA performance.

Round 8: Scalability

With front-end frameworks, scalability comes in two flavors: expanding a single-page application (SPA) and adding more pages to a traditional MPA.

React is lightweight enough to be used in multi-page applications (Facebook does this on most of its pages).

You can import the library and start adding JS features with React components.

The library is also well-suited for large SPAs (just look at Facebook’s ads console).

To kickstart your project, you’ll need third-party form packages and routing solutions (e.g Flux and Redux). You can use a scaffolding tool called create-react-app to start building your project, set up a local development server, check your code for errors and run e2e/unit tests.

However it’s a bit inferior to Vue CLI, as there’s little customization when creating a project.

It has only one project template, an SPA (Vue CLI has a great range of templates for all occasions). There’s also no option to import your own and community-created templates.

Vue is excellent for creating interactive multi-page apps. It allows you to quickly import the core library and inject Vue into the existing pages. You don’t even need to use components for simpler features.

With Vue CLI 4, you can start building a new project in no time. It provides scaffolding that can be used with build systems like Webpack or Browserify (or no build system at all).

You need to install additional packages for routing and form validation. Installing project dependencies as plugins increases flexibility down the road. Even if some of the standards change, you can simply update a plugin and not bother with changing and configuring the stacks.

Although Vue is well-suited for developing large SPAs, it wasn’t created for this purpose. As your project grows, reusing HTML templates becomes a pain compared to JSX syntax.

Round 9: Server-Side Rendering

As Google can now properly crawl JavaScript content, server-side rendering isn’t as important for SEO as before. Other search engines, however, still can’t index JS:

JS framework comparison

How search engines crawl sites built on various JS frameworks. Source: moz.com

SSR is also great for user experience. It allows you to quickly load an interactable template and populate it with content later. Without this, users might be forced to stare at an empty page while the content is loaded and rendered by the device.

Moreover, social networks often can’t properly display content shared from client-rendered sites.

Social sharing from SSR and client-site rendered apps

Source: freecodecamp

Vue is ahead of React with its in-built SSR capabilities and a detailed guide right in the documentation. React, on the other hand, needs third-party libraries like Next.js to render pages on the server.

Round 10: Mobile

React Native is the undisputed king of cross-platform development. It allows you to reuse up to 99% of JS code between Android and iOS with React-like components.

You can create 100% native widgets that control their own style. The framework handles the view layer as a pure state output making it easy to create companion apps for iOS/Android with native look and performance.

Further reading: pros and cons of React Native for mobile development

Although Vue lags behind React, it offers several solutions for mobile development.

First, you have NativeScript that allows you to write Vue applications and compile them to native iOS/Android apps.

Then comes Vue Native. The framework combines the advantages of Vue and RN ecosystems, declarative rendering, two-way binding, and a set of basic components for creating a cross-platform native app.

Another option is the Weex platform that’s actively developed by Alibaba. Its component-based architecture allows you to write code that can be rendered on web, iOS and Android.

Most of its community, however, comes from China.

Finally, you can use Quasar to build hybrid mobile apps.

Verdict

Both libraries are an excellent choice for a modern web application.

React is the battle-tested leader with support from corporations and a huge open-source community. The library scales better allowing you to create complex enterprise-grade applications.

There is no shortage of qualified React developers. Its huge ecosystem means you can find a solution for almost any problem you might encounter on your project.

Finally, React Native is hands down the best cross-platform solution on the market.

Vue is the rising star of front-end development. It’s easy to learn and a pleasure to work with. It has a more traditional syntax allowing you to gradually migrate existing projects to Vue.

Its documentation is the best in class and performance is even better than with React.

Vue offers more tools out of the box with support from the core team. With Vue CLI 4, you can quickly set up a project and deliver a market-ready solution within a few weeks.

But like with most technologies, the choice often comes down to your particular case:

Vue vs React comparison table (Javascript libraries)

I hope this settles the Vue vs React debate for your business case. And if you still have some questions about the technologies or need a team of experienced developers to realize your project, you can always rely on MindK.

So drop us a line!

 

  •  
    38
    Shares
  • 38
  •  
  •