Drinking game with JS library names

To make things easier, our R&D team prepared a detailed comparison between Vue and React, the 3rd and 4th most starred repositories on Github as of December 2018. So make yourself comfortable and read the whole guide or jump straight to the part you’re most interested in:

React vs Vue: Meet the contestants

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

React interacts with HTML documents via the so-called virtual DOM and follows a declarative style of programming. Its component-based approach gives you more speed and flexibility when building complex applications.

It utilizes a Flux architecture with a single-direction data flow:

  1. Actions initiate the data flow by transferring data to a Dispatcher.
  2. Dispatcher receives an action and passes data to all stores.
  3. Stores contain the app’s state and update it after receiving a relevant action.
  4. Views receive data from a store and re-render components.

Flux data flow

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

It’s a lean framework that 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: HTML templating vs JSX

Another difference between the two frameworks is the way they handle templates.

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.

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.

The declarative syntaxes 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. JSX also supports sophisticated IDE features like autocomplete, type checking, or linting.

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 2: State Management

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

State management is essential for React apps. There is 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.

Vue comes with its own solution called 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 the state modifications are methods that commit mutations.

 

Round 3: Popularity

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.

 

Round 4: Support

React JS community and support

React is a clear winner in this category. Its huge community translates into more tutorials, online courses, articles and 4+ 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.

As of 2017, React core team had 12 developers. The library is used on multiple Facebook projects and each team can update the library. There seems to be no official roadmap for the library 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, React Discus, Reactiflux chat on Discord, and Reddit.

Vue.js community and support

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

Vue has support from all major IDEs (not as extensive 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 5: Talent Availability

With React being the most popular front-end library, there’s more experienced engineers available for hire. According to 2018’s front-end tools survey, more than 40% of developers can use React at a comfortable level (vs 17% 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 tops the list of technologies programmers would like to learn in 2018.

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 6: Documentation

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.

Unlike 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.

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.

 

Round 7: 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 for routing and state management.

State refers to the data shared between all UI components. As your system gets bigger, it gets harder to manager this data without causing unpleasant side effects. There is a number of frameworks like Flux/Redux that can help you with massive states.

By offering a single way to modify the state, they 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 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 for state management and vue-router for routing.

Vuex state management

Source: Vuex. vuejs. org

Round 8: 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 (i.e. a copy of the real DOM with all nodes represented as JavaScript objects). As modifying 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 9: Scalability

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

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 3, 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.

React is lightweight enough to be used in traditional 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.

 

Round 10: 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 11: Ease of Deployment

Once you take care of development, it’s time to deploy and optimize your app.

React is a bit easier in this regard, although you’ll still have to use an optimization workflow (e.g. lazy loading).

As your app is written entirely in JS, there’s no need for compilation and HTML optimization.

Vue apps are a bit harder to deploy. With simpler projects, dropping an import is enough. With larger apps, you’ll most likely have to use Vue CLI that does most optimizations automatically.

Since in most cases you’ll use HTML templates, you can pre-compile them and lazily load Vue components.

 

Round 12: 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.

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 there’s 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.

Unfortunately, its community comes mainly from China and docs aren’t fully translated into English.

Weex comparison

Weex UI looks the same across all platforms. Source: hackernoon

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 3, 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)

And now we’d like to hear what you think on React vs Vue. So head down to the comments and cast your vote for you favorite tech.

  •  
    15
    Shares
  • 15
  •  
  •  
  •