Whether you are a technical leader deciding on the stack for your next application or a developer scoping out modern web development, this article aims to provide some answers for both high-level decision makers and the low-level technical drudge.

First, we have some good news - both React and Vue are great choices for a modern web stack and you can't go wrong either way, even though their approach to application development differs.

These differences are in their design philosophies, programming style and built-in features, but both are capable of handling even the most complex apps and web projects, from simple static websites and eCommerce to rich content and 3D.

Most of the meaningful differences are strictly of a technical nature. If that is of no concern, the choice between the two can be simplified to mere availability of talent. In Europe and the US, this would certainly favor React by the nature of being more widespread. But if you can get your hands on good Vue developers, you might just end up with a great app faster.

React

React, created by Facebook in 2013, quickly outcompeted its contemporary rival Angular and forever changed the way web applications are created, especially in Europe and the US.

React solved the performance issues of good old Angular with a feature called the "Virtual DOM" - a data structure that mirrors the node hierarchy of the DOM, making it significantly faster at finding differences and propagating state changes to HTML.

React itself doesn't have many features - you could say it's a good candidate for the UNIX philosophy of "Do One Thing and Do It Well." That one thing is rendering a user interface using a component-based declarative architecture with a JavaScript-friendly syntax extension called JSX, and passing data between these components using "props."

A project cannot realistically be based on React alone (it has no styling solution, no routing, no app state etc.), which is where its giant community comes to the rescue. A typical React app is therefore a Lego structure of different libraries that reflect the preferences of its developers.

This gives React great flexibility, but also raises the barrier of entry - writing well-architected React apps takes some experience. It is common to look at your previous React projects with some degree of melancholy, because now you know better. A perpetual rewrite beckons, in an endless quest for perfection.

Over time, both React and important community projects around it have evolved enough to make its choice often a no-brainer, especially for those coming from a purely programming background and/or interested in the beauty of functional programming. The relatively recent advent of React hooks, for example, is an excellent example of the latter.

React tends to be a trend-setter, popularizing innovative features and powering some of the most demanding apps in the world, like Facebook itself.

React Pros

• Build your own stack
• Declarative and functionally elegant
• Friendly towards Node/JavaScript developers
• More developers to hire in EU/US
• Huge community

React Cons

• Few features, usable only thanks to said community
• May end up a hot mess without an experienced team
• Verbose and complex in some cases
• Often slower development speed

Interesting React Projects

• NextJS - Popular React framework for building websites and applications
• Gatsby - Popular static site generator for React
• ReactUse - Collection of essential React hooks
• Framer Motion - The one good animation library for React
• React Three Fiber - React renderer for Three.js

Companies using React

Facebook, Twitter, Netflix, Airbnb, PayPal

Vue

Created by Evan You during his work in Google Creative Labs (2014), Vue was conceptualized as a framework that can handle advanced user interfaces with an answer for even the edgiest of edge cases. Since that time, the community around it has grown dramatically and today it is by far the most popular framework in Asia, while consistently gaining traction in the West.

First, let's address a concern I have seen repeatedly in one form or another. Will the Chinese government spy on you through Vue? No, don't be silly. It's open source (and thus subject to Linus Torvald's proverbial multitude of eyeballs) and not even Chinese.

One could say Vue walks the fine line between too little (React) and too much (modern Angular). Still very much full-featured, Vue is often praised by its community for unparalleled developer experience and the simplicity of getting something done. Vue tends to be easy, obvious, readable and friendly to newcomers.

Vue is most well-known for its Single File Component (SFC) format - one component per file with a .vue extension that is split into three separate blocks - the template (a superset of HTML), the script (logic passed to said template) and the styles. Without arguing for separation of concerns, it tends to make things very readable, familiar and has the potential to simplify cooperation between full-stack and UI developers, if that's your team composition.

Vue is also flexible, but in a manner that is different from React. You can write its template either in the default format, you can use Jade/Pug, or extend the parser with whatever comes around in the future. You can write the logic with JavaScript, CoffeeScript, TypeScript or any other language that compiles into JavaScript. You can write styles with classic CSS, Sass, Less or Stylus - all by simply installing the appropriate loader. It is equally friendly towards front-end libraries not specifically written for Vue.

Going even further, you can also write components as render functions and use React's JSX. It is tempting to say at this point that Vue can do everything that React can, but also much more. It has a state-of-the-art animation system (fully compatible with its router and external animation libraries), slots for advanced component architectures, computed properties for performance, an open directive system (custom attributes with logic), a custom event mechanism, a simple plugin system, and much more.

Vue projects also tend to look quite similar to one another as there is not as much need to supplement the core framework with third-party libraries. Many of the core modules like router or Vuex are official releases, and its modules tend to have more features than the ones commonly available for React.

To also shine some negative light on the project, the SCF format of Vue is often criticized for losing its readability when a component gets too complicated. React classes had a similar problem in components that needed local state, but it was elegantly solved with React hooks while preserving the fundamental functional nature of React components. The most recent version, Vue 3, has followed suit with what is called the "Composition API," which keeps the Vue "magic" but allows for a more functional approach that is similar to React hooks.

Vue Pros

• Great feature balance
• Friendly towards front-end/UI developers
• Easy to pick up with excellent documentation
• Easy to achieve highly polished UIs and animations
• Fast development speed

Vue Cons

• More opinionated (subjectively positive or negative)
• Older Options API can become harder to read in complex components
• Fewer developers to hire in EU/US

Interesting Vue Projects

• Nuxt.js - One of the most popular core projects around Vue, Nuxt is a full-featured stack suitable for both web applications and websites (static and SSR)
• VitePress - Static site generator
• VueUse - A collection of useful utilities for Vue 3 Composition API
• TroisJS - ThreeJS abstraction library based on Vue and Vite

Companies using Vue

Nintendo, Gitlab, BMW, Alibaba, Behance, Vice, 9Gag, Pornhub

Size & Performance

Both React and Vue 3 reach as low as 10kB minified and offer great performance. Vue exposes some tools that further help caching (computed properties), and its automatic dependency tracking simplifies optimization to a large degree. Those optimizations are also achievable with React (e.g. via the  useMemo hook), albeit with more verbosity and manual effort. Surprisingly, Vue tends to slightly outperform React in most startup speed, memory allocation, and DOM manipulation metrics in the latest Chromium distribution.

Documentation

React documentation is good enough, if a little austere in places, but more importantly the React community is truly massive and I have yet to encounter a problem that hasn't already been discussed on Stack Overflow, GitHub or various developer blogs.

Vue documentation is possibly the best in class, with excellent examples and detailed use cases for all its features.

UI Libraries

Unless you have a project with custom design, you might be tempted to use some of the widespread design systems, UI kits and libraries. Luckily, both React and Vue have very mature support for the commonly used Material Design (material-ui.com, vuetifyjs.com), the old dog Bootstrap (react-bootstrap.github.io, bootstrap-vue.org) and even the recently trending atomic-based utility framework Tailwind.

Summary

To a large degree, React vs. Vue is a question of personal preference - one isn't objectively better than the other in spite of their differences. Both are mature, performant projects that can drive applications of any complexity. React is certainly more popular in the EU/US and it doesn't look like that popularity will change any time soon. At the same time, Vue has managed to cut out enough space for itself to be a fair contender and its ease of use might just be a better fit for your project.