React vs Vue – The CTOs guide to Choose the Right Framework

Web Development
React vs Vue difference and comparison

React vs Vue – The CTOs guide to Choose the Right Framework


Here’s a case for your consideration! 

Rever Inc., a Silicon Valley company, migrated almost 10,000 lines of Angular js code to Vuejs before building their final MVP. 

Well, the release of the Angular version that they needed to use was unforeseenly delayed, and they could not afford to wait for it as it would waste time and resources. 

Enter React and Vue in the picture! 

To directly quote Luis Elizondo (Director of Engineering at Rever) —

“Before evaluating the right framework of choice for us, I had to get my hands dirty, so I gave both React and Vue.js a couple of days each to review each decision point that wasn’t going to be answered by Google. Since I knew nothing about any of them, at the end of two days, I would reevaluate how far I got into rewriting some parts of the actual project we were going to migrate”.

After evaluating both frameworks, Luis and his team decided to use Vue as they find it easier when compared to React. 

Now imagine yourself in a similar situation, where 1000s of hours of your hard work go in vain owing to no fault of your own.

Considering the tight deadline for their project, too many product managers and CTO’s fall into a common trap –– they choose a framework that gives them an easy start without considering the impact of the framework over time. However, they soon realize that it’s better to evaluate the use-case and choose a suitable framework beforehand so as to avoid any kind of problem. 

With this blog post, I’d like to walk you through some use cases and factors that could help you select the framework best suited to your needs. 

Before initiating an in-depth comparison, here are some sets of questions to ask yourself so as to gain a full perspective of the subject at hand.  These questions are nothing but factors that will help you evaluate the correct framework among React and Vue. 

React vs Vue: The comparison factors for CTOs and Project Managers

Table of Contents

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Now that you have questions, let’s dig into the meat of the matter by juxtaposing them with each framework so as to obtain a deep comparison for React vs Vue.

Code Quality in React vs Vue

How clean and intuitive the code is?

First thing first: The framework which gives you the ability to quickly navigate through the code of a big project should the ideal one to choose from.

Apparently, for many CTOs and Project Managers, it all boils down to “how quickly your code passes through the tests and how those tests are taking care of types”.

Mind you, there are still many things to consider that improve code quality. For instance, unit-testing, linting, and type checking are something that my team and I aggressively execute at Simform.

I won’t beat around the bush and mention all these practices here. Since I believe Type checking really improves code quality, let’s compare Reactjs vs Vuejs and check if they support Type checking in any way.

Static-Type checking in React

It’s true that React leverages the use of JavaScript ES6 fundamentals as code syntax, but does it supports something like type checking at compile-time?

Well, yes it does!

You can do static-type checking in React with Flow which is developed by Facebook developers as an alternative to TypeScript. These let you add types to your code and then remove them during build (compile) time to leave normal Javascript code. 

[Note: If you like TypeScript and still want to use React, then you are good to go as TypeScript has good support for JSX which is likely the reason why Microsoft has used it in the latest version of office]

Static Type-checking in Vue

Vue also leverages Javascript ES6 syntax for writing the code. However when it comes to static type-checking, it’s not that straightforward to use Typescript in Vue. There are some courses on how to use Typescript along with Vue but it’s still unclear if it would be worth considering in complex projects.

Thankfully, you can integrate flow with Vue and enable static type-checking.

Modularity in React vs Vue

Does the framework support Modularity?

According to the principle of Modularity, your application must be divided into separate modules with each module representing a single purpose or functionality. This principle is also known as the Single Responsibility principle.

“Do one thing and do it well“ — Unix philosophy

Let’s understand Modularity with a simple real-life use case:

Imagine your codebase contains a set of services specifically written for an API. Now if your client needs you to remove the entire API functionality from the app, it’s important for you to hold these services in a separate module so that it can be removed easily without disrupting the app. This is where you need Modularity in a framework. Modularity makes it easy to plug-in new features in case your application is large with more complex features that are supposed to iterate with every change of the version.

Modularity in React

In React, each and every part of your application deals with components.

An ideal way to support modularity in React is to ensure that every component of your application should ideally do one thing. Even if the component is growing, the better way would be to decompose it further into smaller sub-components.

By separating your code base into small, self-contained chunks, it makes React app development even more intuitive than Angular. You can develop and test modules individually, which makes it easier to add features and identify bugs.

Modularity in Vue

Vue leverages the concept of “single-file components”. This seems like a trade-off with regard to the separation of concerns  as your scripts,  templates, and styles will be in one file but in three different ordered sections.

Learning Curve – React and Vue

Will I and my colleagues be able to learn this tool with ease?

Learning curve with React

I have observed many developers claiming that the things they do in React would have been much better and easier with Vue. But all that claims doesn’t makes sense to me. To me, Vue looks like more of a plain JavaScript along with some new ideas, one-way data flow, components and an event-driven model.

Learning curve with Vue

When it comes to the learning Curve, Vue triumphed other Javascript frameworks. You simply needs some decent JS skills or good understanding of ES6 to play around Vue. Overall, it’s much easier to learn even with the documentation itself.

Speak to our Expert now about Building your full-scale Reactjs Team

Developer Friendliness and Ease-of-use

How easy is to get-started with the framework? 

A framework should be easier to start when it comes to the development. One way of comparing Reactjs vs Vuejs or any other framework is to identify how easy they are to get started whenever there is a project requirement.

To choose the right framework for your project, you need to figure out whether you and your team want to work on JSX or HTML. To give you an initial overview, I would emphasize that frameworks based on standard HTML templates and components are generally easy to structure and code reuse. However, there are more chances that new developers would find it hard to deal with JSX.

React : Developer friendliness and Ease of use

React wants you to build components instead of templates since components are most reusable and unit-test friendly. It relies on JSX which let you intermix your UI templates and JavaScript. But at the end of the day, you will feel like you are working on Javascript. Working with JSX gives you a big development boost because it allows React to show more useful error and warning messages.

Since your UI and JS Code can’t be separated in React, there is only one question regarding the use of styles.

When it comes to styles, you have multiple ways to start with:

  • Use webpack to extract your import ‘my.css’ statements into a stylesheet
  • or Use “CSS in JS” libraries

When it comes to a React project, it is more like the wild-west where you have a huge ecosystem of libraries and tools to complement your application. Personally, I really like that but it’s not always that easier for developers to make the right choice given they have plenty of options to choose from. Moreover, there are no defined rules or regulations with React. You got to choose something different every-time your application’s architecture is bound to change. This makes the scope of things going wrong very easily.

Vue : Developer friendliness and Ease of use

There is a reason why Vue is called as “the progressive web framework” because there are different features which affects the size of the application being developed. Vue also offers a CLI and packages that integrate with build tools like webpack. The most preferred way to write components in this environment is the single-file component a file with a template, a script and a style tag.

I have worked with few companies in past and the reasons they give when being asked about the reason for the selection of Vue was only that their developers found it easier to learn. Vue lessens the gap between junior and senior developers thereby making them well collaborate over the projects. It’s even good for the project as it gets completed with fewer bugs and better time to market.

Testing and Debugging

How good are testing and debugging aspects of the framework?

Testing and Debugging in React

Testing: Facebook recommends Jest to test the React code. Here is a comparison between Jest and Mocha — and there is an article on how to use Enzyme with Mocha. Enzyme is a JavaScript testing utility used at Airbnb (in conjunction with Jest, Karma and other test runners). If you want to read more, there are some older articles on testing in React (here and here).

Testing and Debugging in Vue

Testing: At present, Vue lacks any significant guidance on testing, but Evan wrote in his 2017 preview that the team plans to work on this. They recommend using Karma. Vue works together with Jest, and there’s also Vue test Utils.

Debugging: Debugging in Vue is made easier in the same way you debug any other web application. You can leverage developer tools, breakpoints, debugger statements etc. to debug your application source code. There is also this Vue.js devtools so that you can debug Vue applications with ease.

Server-Side Rendering support in React vs Vue

Does the framework supports server-side rendering?

Server-side Rendering is an essential requirement if high search engine optimisation is the goal for the web application. As any Multi-page Application can can be comprised of several smaller SPAs, it is an important criteria for the frameworks to have this option.

Here’s what development team at AirBnB has to say about Server-side rendering:

First and foremost, server-side rendering is a better user experience compared to just client-side rendering. The user gets the content faster, the webpage is more accessible when JS fails or is disabled, and search engines have an easier time indexing it.

Server-side Rendering in React

At present, React lacks an official documentation on SSR. The React API supports an object called ReactDOMServer which comes handy when you want to display the components in the form of a HTML code. Moreover, it’s important to learn how to use libraries such as React Router and Redux in order for the server-side rendering to be performed without any problems. The React team announced that official support will soon be released. There is also a Framework that can be used to create a React SSR application, called Next.js. Accordingly, React enables SSR, but without official support, and with the use of additional third-party packages.

Server-side rendering in Vue

There is also an officially released Vue.js guide for building Vue application rendered on the server. The guide is placed on a special domain, separate from Vue documentation. It is very detailed and it assumes that the user is already familiar with Vue and that he has a decent knowledge of Node.js and Webpack. Also, the documentation refers to Nuxt.js, a framework issued by the community and which is presented as a higher degree solution for SSR in Vue. It offers certain additional features, however, it limits the developer’s direct control over the application structure.

Code maintainability in Reactjs vs Vuejs

Over the span of 5-10+ years counting from the start of the project, will the code cause me more trouble than it’s worth? 

A few years back, one of my clients required to move to a framework so that the team of developers, present and future, can work around the code. It was immediately obvious how critical it was for them to have a framework of high maintainability. Here’s why code maintainability should be one of the biggest aspects when comparing frameworks.

That said, let’s now compare how React and Vue stand together when it comes to code maintainability.

Maintainability in React

Where React is concerned, whilst the road to the 0.14 series was also quite bumpy, Facebook began to focus on making breaking changes in a more responsible manner starting with React version 15. Upcoming breaking changes now issue deprecation warnings in your application and give you time to migrate to the newer APIs.

The current stable release (version 16) has changed some core lifecycle methods, but also officially stabilised some long-used ‘experimental’ APIs, meaning future updates should be easier after reaching this point.

Due to React being lighter on tooling, whilst some breaking updates can be automated, not everything always can be. This means some updates can be more painful than others, although the improvements in the core library are usually worth it.

One notable annoyance with React has been the removal of older release documentation, making maintenance of existing (and potentially future) projects harder unless you keep up to date.

Maintainability in Vue

Considering the pace at which Vue is growing, it would be the thing of the future to decide whether Vue can be used as a framework for the longer run. I won’t go in length about this aspect but there is an interesting article on the maintainability factor of Vue and how it stands against React.

React vs Vue – Performance and Memory Consumption

How the framework stands out from others in terms of Performance?

When it comes to performance, I would like to rest my case with this simple one-liner:

“Performance evaluation of every framework is important and it should definitely be an important prerequisite metric in evaluating a framework. “

If you still wants to know how these frameworks stands out in performance-related aspects, then you can go through this comprehensive study which was done to benchmark the performance and memory consumption of Reactjs vs Vue on the basis of DOM manipulation. The study was performed using a benchmark tool which measures the time for a number of DOM manipulation events to complete using these frameworks.

Benchmarking performance for React vs Vue

The DOM manipulations included in the benchmarking study was based on studying the performance of these frameworks on manipulating the rows of a table. The manipulations done on the row are:

  • Adding 10 rows to the table,
  • Adding 1000 rows to the table,
  • Updating every 10th row in the table,
  • Selecting a row in the table, and
  • Deleting a row from the table

React vs Vue performanceWhen it comes to Memory evaluation of React vs Vue, the study leverage the use of the Chrome Profiler which lets you take snapshots of the JavaScript heap of a web page.

Two snapshots were taken to demonstrate the memory usage at the time of:

  • Loading of the page before any action is performed
  • After performing  5 Add 10, 5 Add 1000 and 5 Update actions on the table

Given below are the results of the study:

React vs Vue memoryReact performance and Memory consumption

Performance: As shown in Figure, React’s Virtual DOM seemed to pay off when DOM updates gets larger and more data needs to be updated. That’s where most performance issues in React comes into the picture. React performs best at both the Delete and Add 1000 metrics.

Memory Consumption: The initial memory footprint in the case of React is quite similar to that of Angular. With 8.3 MB memory consumption at the initial state to the 15.1 MB consumption after the DOM operations, you can figure out that React DOM manipulation operations are quite computational expensive but they are still okay.

Vue performance and memory consumption

Performance: Vue performance is as good as React in most cases like Add 10, Update and Select metrics which is likely to be that way since Vue also leverages Virtual DOM for manipulating the operations.

The only difference where Vue lags behind React in terms of performance is Add 1000 metrics which is because of the increase in the number of DOM manipulation operations.

Memory Consumption: Vue’s memory footprint at the time of initial state is 7.6 which is quite better than both React and Angular considering that it’s pure JavaScript based language. However once DOM manipulations operations are performed, the value increased to 16.1 which is more than both React and Angular.

Scalability – Reactjs vs Vue

Is the framework mature enough to build scalable applications?

When it comes to scalability, the only thing that matters is how your solution will deal with the cumulative number of requests and what will be its significant behaviour at the sudden peak of loads. Since most JavaScript based web apps are designed for large numbers of users, evaluating whether your chosen solution is scalable or not makes lots of sense. Having said that, let’s see if React and Vue meets the scalability expectations or not. 

React for building scalable web apps

React is simply a library for creating and rendering reusable components on a page – you’ll still need to gather a bunch of other libraries to bring it all together (routing, HTTP requests, etc.).

The scalability problem in web apps mainly comes down to how well organized the code is, the amount of technical debt, and how the web application is architected as a whole.

In my personal experience in dealing with thousands of clients, I’ve found that a framework like Angular is definitely a scalable one as developers tend to follow that design pattern right from the start.

Don’t get me wrong, I love React, but if a react application is not well thought out from the start, it can get out of control quickly (e.g. lots of spaghetti code). I’ve had one client that actually wrote a custom module-like feature for React and their code has been a pleasure to navigate.

That said, React can still be used to build scalable web applications but considered only when you have scalability in mind from the start.

Vue for building scalable web apps

Vue being the light weighed JavaScript library is only good for smaller applications. It’s not well applicable in building scalable applications.

React vs Vue: Application Size

Are the Frameworks Suitable for Light-weight or Heavyweight Applications?

When it comes to choosing a framework for large applications, what matters most are consistency and architectural decision making. In large-size applications, it is pivotal to choose a framework wisely. Otherwise, it would be a big pain to switch. 

So let’s explore the framework size of React and Vue and their size impact on the software development projects of your business. 

React

The size of frameworks/libraries can have a significant impact on software development projects. React is about 100 KB in size and ideal for lightweight applications. Additionally, React needs support from other libraries for specific tasks, and one of these tasks is routing. Its small size makes a perfect match for lightweight applications.

Vue

Vue is the smallest of other frameworks and libraries. It is approximately 80 KB in size. It is even smaller than React. Vue is extremely suitable for the development of lightweight applications. In case if you need a library that is smaller than Vue, then you should choose Preact

React vs Vue – Where to use what?

What are the top utilities of these frameworks and when is the right choice to use them?

Now that we have evaluated almost every necessary factor, let’s explore the top use case of React and Vue for your projects. It will help you to choose the right one, thereby avoiding unnecessary costs. 

React

I see React as the best fit for building static websites. All you need to do is to render components using renderToStaticMarkup and send the rendered payload to the client. 

Moreover, choosing to React for small & simple apps might not be overkill because it was created for large-scale web projects. Although React requires a lot of boilerplate code to set up a working project, it’s architecture pays off in the long run. 

JSX gives the full power of JavaScript like flow control and advanced IDE features such as autocompletion in the component view templates. 

React vs Vue : The table of comparison

React vs Vue difference

Reactjs vs Vue:  Experts views on choosing the right framework

I did a quick outreach to few Javascript experts and CTO’s for their views on choosing a framework among React and Vue. I thank @KentCDodds, and @TomGoldenberg for their valuable contribution to the blog post.

We asked some questions to them and here is a quick review of what they think on the debate:

Thomas Goldenberg, CTO at Commandiv

Tom Goldenberg on React vs VueWhat do you feel about the famous “React vs Angular vs Vue” debate?

I have used React and Angular, not Vue. But I wouldn’t invest heavily in it, as I feel like it doesn’t have as broad adoption as the other two. Out of React and Angular, I definitely feel like React is more intuitive to code in. That said, Angular has been making progress, and TypeScript has been getting a lot of support.

Given the opportunity to build a Social web app, which framework (or language) would you prefer?

Social implies lots of connections, which would make React – GraphQL a great combination. This would help prepare all of the connection data.

Given the opportunity to build an enterprise-based e-commerce web app (with possibilities of future iterations), which framework (or language) would you prefer? Any reasons for a particular preference?

I would go with Next.js for an e-commerce web app because server-side rendering is important for a lot of e-commerce websites, where every listing has to be indexable and searchable. Next is awesome, and the team at Zeit is really impressive.

Given the opportunity to build a content-based platform where site structure is not supposed to change, which framework (or language) would you prefer?

I Would also go with Next.js here as content-based platforms require to have good SEO and indexing.

Kent C. Dodds, Software Engineer at PayPal, Javascript/ React Expert

Kent c Dodds on React vs Vue

What aspects would you consider while selecting a right framework (or language) among React, Angular or Vue (or several others)?

All these frameworks are very similar in terms of capabilities and performance. There’s a reason I prefer React over the others and that reason is I believe that it is conceptually simpler than the other frameworks which lead to applications that are more maintainable and easier to test. More than any other reason though, the most important consideration is how effective I would be with a given framework and React is definitely the best one for me.

Given the opportunity to build a Social web app, which framework (or language) would you prefer?

If I had a bunch of time to learn, I would probably try ReasonML as the language and ReasonReact as the framework. If I needed to get it done quickly, then I would definitely go with JavaScript (plus Flow for static typing) and React for the framework.

Given the opportunity to build an enterprise-based e-commerce web app (with possibilities of future iterations), which framework (or language) would you prefer? Any reasons for a particular preference?

I would still prefer ReasonML as the language and ReasonReact as the framework if I had the bunch of time to learn. If the time of experimenting and learning is less, i would prefer Javascript (plus Flow for static type checking) and React as the framework.

If the situation prevails where you have a team of developers that are not well-versed with Javascript, which framework (or language) would you prefer?

 I would definitely go with React. The reason being that I believe a team of developers not well-versed with JavaScript but building a web application should definitely learn JavaScript and the framework that can teach them JavaScript the best is React. The other frameworks do a fairly good job of hiding JavaScript and you wind up writing more framework code than JavaScript which may seem like the right way to go at first, but in the long term the team will be better off learning JavaScript well.

Conclusion

React or Vue or any other Javascript based solutions all are pretty cool in terms of their own use-cases. There is no best solution I would say. It’d be better for you to determine your use-case and map it to the aspects of these frameworks.

In order to make things easier for you, I have boiled down the use-cases and the recommended (not always) solution between React and Vue:

  • If you are someone who likes to play around lots and lots of libraries, tools or ecosystem – Choose React
  • If you are a big “JS fan” and hates separating your UI and code – Choose React
  • If you love writing clean and easier code – Choose Vue
  • If you want to get started on your project as soon as possible – Choose Vue
  • If you are a lone developer without any team – Choose Vue (or React)
  • If you want to develop scalable applications without any hassle for Testing and Debugging – Choose React
  • If you want to have better separation of concerns in your project – Choose Vue
  • If you love playing with Javascript and embrace the concept of change in the states of an app – Choose React (or Vue)
  • If you are to build any complex app with better time-to-market – Choose React 

So what’s your opinion on React vs Vue comparison, let me know in the comments?

eCommerce React app

Optimizing React performance issues

Working from last 8 years into consumer and enterprise mobility, Hardik leads large scale mobility programs covering platforms, solutions, governance, standardization and best practices.

Your email address will not be published. Required fields are marked *

Join 12000+ Readers who gain insights on Reactjs technology 🚀

Follow the latest web application development trends and learn practical skills on Reactjs by signing up for our newsletter.

You have Successfully Subscribed!