When it comes to developing apps, you have a lot of choices for creating the frontend, but the two that often stand out the most are React and Vue. Both are increasingly popular and dominating the tech landscape, but which do you choose?
Here’s our guide to the ins and outs of each, as well as the key differences, which should help you make the best decision at the start of every project!
What is React JS?
Specifically, React JS was designed for the creation of user interfaces - more specifically, the view layer for both web and mobile applications in the Model View Layer (MVC) framework. It is often used for Single Page Applications and even Progress Web Apps. As a library, it provides reusable UI components, which is of great use to the aforementioned SPA and PWA projects.
Originally developed by Jordan Walke but supported by Facebook, React is open-source, so it also has a large community of developers and other interested organizations, aiding its long term success.
Advantages of React JS
Fast rendering. Thanks to a fast virtual DOM, React stays fast when other, older libraries would slow down with scale. The real DOM is updated, but not used for every instance. We’ll discuss the DOM’s later on, as Vue also uses this.
Code stability. React ensures that developers can’t impact parents by changing child structures because it only uses downward data flow. Developers have to modify the state before various components aren’t updated. While this removes a ‘quick fix’ approach, it also ensures mistakes can’t happen - particularly mistakes that impact code stability and the app’s very performance.
SEO friendly. Because it's used in the frontend of websites, search engine optimization (SEO) is also important. React runs on the server, returning components via the aforementioned virtual DOM, which keeps pages as readable as possible.
Reusable Components. React was designed to reuse components easily, saving development time and, as mentioned already, keeping the code stable while doing so.
Frequent Updates. React is well supported, so updates and patches to known problems are always right around the corner.
Disadvantages of React JS
Larger size. React is a little on the large side at roughly 100 KB which means that, even from the start, it’s slower to implement and run in the final app. This difference is minimal, but notable regardless.
View layer only. React is a library for UI only - it is just focused on the View layer. That said, while other, older frameworks exist, React offers reusable components, scalability, and performance that these alternatives typically do not have.
Frequent Updates. While we just said this was a benefit, it also has its downsides. Such updates mean developers have to keep up with the pace, especially as certain methods become obsolete or replaced.
Examples of React JS
Facebook. Needless to say, Facebook still uses its own React JS (with React Native now, too) to power the frontend of its many apps. This doesn’t just include Facebook itself, but also I’s other properties: such as Instagram and WhatsApp.
Codecademy.A popular platform for coding classes, Codecademy has long enjoyed the benefits of React JS, using it to test UI components in isolation (and without disturbing the wider website/app). It’s also given them great SEO benefits as well.
What is Vue JS?
It is designed to help developers with frontend development, focusing on the View layer of the MVC framework. It is built with progression in mind and, as such, is often used in Single Page Applications and Progressive Web Apps, although it can also be used in more traditional websites or apps.
Although originally developed by You, who used to work at Google, Vue is also open source and is actively supported by numerous developers and wider organizations, aiding its growth and popularity.
Advantages of Vue JS
Small size. At around 80 KB, Vue JS is one of the smallest libraries available (without being a particular niche in use). This makes it faster to load, easier to set-up, and quick to utilize.
Fast rendering. Just like React, Vue JS uses a virtual DOM for fast loading and high performance.
Two-way Data Binding. In Vue JS, data changes are reflected in the UI. In other words, changes made in the model or view are made in both. This is very different to React, which only offers one-way communication but, as stated, React does this for code stability reasons. However, Vue’s approach makes it highly effective for managing HTML blocks in a fast and fluid manner.
Reusable Components. As with React, Vue JS is built with reusable components in mind - it’s why it also focuses purely on the View layer. This means that Vue JS can also save time and costs with frontend development.
Code Stability. Between the two-way data binding and reusable components, Vue JS is very stable in terms of code. While it still allows for some human error when compared to React, it nonetheless offers a reusable, reactive approach that keeps code consistent in its way.
Disadvantages of Vue JS
Flexibility. While being flexible is always a good thing, you also need to be careful. With React, developers have fewer options, so they do things the ‘React’ way. With Vue, different developers can use different options, which makes it difficult to work on each other’s code.
Resources and size. Vue JS is smaller than React. While this is a huge benefit, it also means there's simply less to offer. This, combined with React’s official support, means that React typically has more resources.
Non-English community. This might not even be a problem, depending on where you are, but Vue’s extensive popularity in Asia has meant that large portions of the community, and their assets, fixes, and guides, aren’t available in English. Translations can solve most issues, but it’s a vital factor that limits the community, compared to React, which is supported by the US giant Facebook.
Examples of Vue JS
BuzzFeed. As one of the most popular websites around, BuzzFeed’s tech stack needs to perform at scale. Because it's more lightweight than other options, they chose Vue JS for a number of subsites.
Grammarly. Offering a simplistic and smooth experience, Grammarly fully used Vue JS to power its editor service.
Nintendo. While it’s not used in their games, Nintendo makes heavy use of Vue JS on their website, helping to provide a smoother experience.
Trustpilot. Another example of a website with high demand, as well as a need for unique experiences to each user, Trustpilot used Vue JS to enable a fluid, responsive design.
React vs Vue: How Are They Different?
React vs Vue Popularity
According to Stackflow’s 2019 survey, both React and Vue are the most loved web frameworks, praised by 74.5% and 73.6% of respondents, respectively.
Both were also the most wanted, with React (21.5%) having a little demand over Vue (16.1%).
They were also the least dreaded, at 26.4% (Vue) and 25.5% (React).
Both frameworks are also moving ahead of other options, which is a good sign for the future. In terms of demand, the difference here is minimal - these marginal leads can easily change between React and Vue in the years to come.
So, why does this matter? The popularity of a framework is a strong indicator of how well it will be supported in the future. Developers and companies alike prefer to use React and Vue, so they will continue to be improved and supported for years to come. It will also make it easier for companies to find respective developers as well.
React vs Vue Ongoing Support
Both React and Vue are open source projects, as well as popular frameworks, so is there any difference in terms of further support?
Realistically, both React and Vue will continue to belong supported. However, this is one difference that needs to be stated: React has dedicated support from Facebook,while Vue is not officially backed by any company.
The latter is handled by an ex-member of Google, but this company has never officially been involved in Vue’s ongoing future.
That said, while React’s support makes it more ‘official’, it will also be guided towards Facebook’s own needs first and foremost, with developers and companies elsewhere filling in the gaps as they need. Vue’s open community, however, can apply it to their own needs.
React vs Vue Learning Curves and Barriers To Entry
Both have official documentation - including guides for getting started - but is this enough?
According to a survey by StateofJS, we can see some interesting facts:
More developers said they had heard of - and would like to use - Vue (46.6%) than React (19.1%).
However, when it comes to those that are aware of - but do not want to use - Vue (20.5%) also had a stronger response than React (9.2%).
When it came to those that have used React or Vue - and would choose to do so again - more said yes to React (64.8%) than Vue (28.8%).
On the other hand, more recommended to not use React (6.7%) again than Vue (2.8%).
So, what does this mean? It’s not always clear, but it looks as if Vue has a slightly difficult barrier to entry, but we should also remember it’s not officially supported by a company, whereas React has Facebook’s official support.
That said, Vue has a substantial growing interest that will likely change these figures in the near future.
React vs Vue Performance & Dom
Both React and Vue perform fairly similar, except in one area: the DOM. Short for Domain Object Mapping, this defines the hierarchy tree-mapping for finding objects within a larger document. In other words, it impacts how the final app finds and recalls objects - needless to say, this in turn highly impacts performance.
React uses a Virtual Dom that is able to implement partial refreshes. By not doing a full refresh, React stays light and speedy, leading to faster performance. It’s also not browser-specific, giving it greater cross-compatibility.
Vue also uses a Virtual DOM, but has streamlined this even further than React. It is noted by many as being faster as a result. If speed and performance are of the highest concern, this is a critical difference to keep in mind.
React vs Vue Framework Size
On a similar note to performance, the size of each framework also impacts performance - a smaller framework will naturally lend itself to lightweight projects.
While both are quite small, Vue is smaller and about 80% of React’s size, coming in at 80 KB and 100 KB, respectively. While this is no guarantee for the future, it’s clear Vue’s dedicated focus on being small and quick lends itself well in certain specific situations.
TL;DR - React vs Vue