When you think of JavaScript frameworks, you’ll probably end up stuck between Vue.js and React, as they happen to be the most popular within the JavaScript Ecosystem. So how can you decide which one is the most suitable for the project you’re about to code or manage? Should you look first to the framework itself and consider its learning curve or analyze instead the project’s size and complexity to make an accurate decision?
If any of these questions crossed your mind lately, whether if you’re a front-end developer or managing a team, continue reading: I put my hands down to work and built an app on both frameworks. Its main goal was allowing us, at Imaginary Cloud, to vote internally on which games we would prefer to buy for the PlayStation 4 we have in our office - the ex libris of our lunch breaks!
In this blog post, I’ll share my insights, based on the experience I had with Vue.js and React. From its popularity over time, struggles, community support and other related topics, I’ll clear it all up so you can have a better idea of each framework and what problems they solve.
Table of contents
A short story
Why are Vue and React so popular?
What we’ve done exactly
Which one is easier to learn: Vue or React?
Which one is easier to use?
➤ Which libraries to use in a Vue.js application?
➤ Which libraries to use in a React application?
Which one is better: Vue or React?
Which one is more fun: Vue or React?
When to use Vue vs React
Final thoughts
A short story first
React is backed up by the tech giant Facebook, providing the stability and long-term support that a tech giant can provide. React became open source in May 2013, that allowed its community to create countless third-party libraries to help you achieve your desired goal.
Alternatively, Vue.js was created by Evan You, a former Google employee who worked in their Angular team. Evan had the vision to create a framework that combined the best of React, Ember and Angular, to provide additional features and improve coding performance. However, since Vue.js is not backed up by a tech giant, it relies on its active community to push it forward.
Why are Vue and React so popular?
The rise in popularity of both these frameworks takes credit for the innovative tools that both Vue.js and React offer to the Front-end Developer. For instance:
-
Virtual DOM: if this expression is new to you, I need to take a step back and explain first what DOM (Document Object Model) means. HTML is a document with nested elements of text (e.g. a list is inside the body and has list items nested in it). This can be represented as a graph, which is called DOM. Front-end developers spend their time manipulating the DOM with JavaScript (e.g. show a warning when the user submits a form with errors, suggest text when the user is filling a search box, etc). Those manipulations are costly in terms of computing power and coding effort. Front-developers need to be careful not to waste these precious resources. React and Vue.js use a Virtual DOM to make these operations easier. Instead of changing the DOM, the framework performs operations in a copy of the DOM instead, saving resources and time. This way, only the fragments that need to be updated are indeed updated.
-
Component-based structure: Vue.js and React both use this structure to take advantage of its modularity. This enables Front-end Developers to reuse components and to refactor code, improving the developer’s productivity and accelerating the whole development process.
-
Official Component library to build mobile apps: both Vue.js and React offer a component library for building mobile apps. While React offers ReactNative,Vue.js offers VueNative. However, VueNative is a wrapper around ReactNative APIs, which allows you to use Vue.js to develop mobile apps closer to the native implementation.
According to StackOverflow, Vue.js popularity as well as React's, has been rising over the years, while front-end development industry gains more and more relevance worldwide.
To have a clearer picture, I checked both frameworks' activity considering the number of questions currently active in StackOverflow. Here’s what I found: while Vue.js has about 50.000 questions, Reactjs tag has nearly 180 000 questions. Huge difference, right?
Another key indicator I dare you to look at is the npm (Node Package Manager) downloads.
On this topic, comparing React vs Vue.js, you can see that React still leads by a considerable margin over Vue.js. In spite of its downloads, Vue.js has been slowly rising over the years.
However, the main advantage Vue.js has over React is seen on Github stars. Take a look at the graphic below:
Vue.js surpassed React in mid-2018 and still continues in the lead.
This is clearly a sign of a supportive community built around active Vue.js developers, devoted to continually push it forward.
What we’ve done exactly
The challenge? We have a new PlayStation 4 in the office and everyone was arguing about which games to buy and play. As an intern, I came to rescue and built an app that allowed people to vote on the most popular games and decide what to buy next. And because two is better than one, I built the application twice - first in Vue.js and then in React.
The back-end services were made available by an API capable of handling JSON requests. I had only a basic knowledge of how to write basic HTML and JavaScript (I'm an intern), so yes, the experiment was to dive deep into React and Vue.js, learning from scratch.
Concerning the requirements to accomplish, I had the following:
- Authorization endpoints (we decided to use session authentication)
- CRUD operations over all types of data
- Listing and filtering on all types of data
- User operations such as email confirmation, login, logout, register and change password.
Which one is easier to learn?
You know the feeling: at first, it may seem overwhelming and you start wondering if it’s a good idea at all to go through it. Same happened to me, but when I began to grasp into the component base structure, it became simpler and easier to understand. I went through the tutorials, fiddled around with properties and guessed which result we would have based on the documentation we read.
Is Vue easy to learn?
While going through this process, I noticed that the support documentation of Vue.js is way more “developer-friendly” than React’s. Also, I decided to go first with Vue.js due to my background knowledge in HTML. This turned out to improve the ramp-up of my proficiency and influenced the project’s total duration time.
Is React easy to learn?
React documentation is slightly harder to read, which resulted in a slow ramp-up in comparison with Vue.js, mostly based on the extra effort to learn JSX.
In summary, both are quite similar in their structure, but Vue.js is slightly easier to learn as it allows HTML and JSX.
Which one is easier to use?
Just like experienced developers do, I had to analyze and select which external libraries to use. Libraries can be particularly relevant when addressing core tasks because they improve the quality of the product and reduce development effort.
Which libraries to use in a Vue.js application?
For Vue.js I wanted to create complex UI elements but native implementation would consume a lot of time, therefore I used Vuetify which has a rich documentation and a simple set up. Installing and importing the library was all it was needed and it was ready to be used.
Dealing with application state and ensuring the application adapts to its state in Vue.js is complex and time-consuming. I decided to use Vuex to manage application state. This was also simple to install and easy to use.
I also needed to connect with the server and make authenticated REST requests. To solve this problem I followed the Vue.js tutorial and as advised, I used axios, a library that handles REST requests and makes authorization easier to handle.
Finally, I used the Vue Router to update and refresh User Interface when the URL changes, something that is very hard to achieve without a library.
In summary, we used the following libraries with Vue.js:
- Vuetify: to create complex UI elements
- Vuex: to manage application state
- Axios: to integrate with the REST API
- Vue Router: to update the UI when the URL changes
Which libraries to use in a React application?
For React I also wanted to create complex UI elements, but this is not simple to achieve out of the box. Therefore I used Material UI, as it makes it easy to build complex UI elements.
I also used Styled components to configure the look and feel of the user interface, as doing that with vanilla React is quite complex. This is something that I struggled with in Vue.js, as I wasn't able to find a good library for this purpose.
Redux came to the rescue when I needed to manage the application state. This is the most popular library for this purpose in the React realm. It's a bit more complex than the Vue.Js alternative, but as it's well documented, I didn't spend too much time looking for a better alternative.
To address the REST requests we continued with axios because I was already familiar with the library. It provided a good solution, similar to what I've got in the Vue.js application.
Finally, I solved the routing problem with React Routing. Like the Vue.js counterpart, this library makes the entire operation easier to manage.
In summary, I used the following libraries with React:
- Material UI: to create complex UI elements
- Styled Components: to change the look & feel of the UI elements
- Redux: to manage application state
- Axios: to integrate with the REST API
- React Routing: to update the UI when the URL changes
Which one is better: Vue or React?
After the learning process, coding and testing, it’s time to share with my insights (release the drum roll!):
-
Vue.js development took about 9 days (approximately 72 hours)
-
React development lasted about 13 days (approximately 104 hours)
Based on the above data, I can tell that programming in React took us about 30% longer than with Vue.js.
So why did I prefer Vue.js instead of React?
Well, I was able to point out a few reasons:
-
Low complexity of tutorials and great quality of documentation: Vue.js tutorial was more complete than React’s. While Vue.js included Vuex in its official beginner tutorial, React’s tutorial did not include Redux. Vuex documentation was also slightly better than Redux;
-
Background knowledge in HTML: which influenced my ramp up and consequently my performance.
Based on my personal experience I can now state that it would take way less time to develop the same or similar size project since I already have:
- the knowledge to manipulate store state;
- a better understanding of each framework and its tools;
- knowledge of third party libraries that facilitate work and improve the developing performance once you figure out to fiddle with them.
During the first development stage, I found both communities while searching for a few clarifications. To my surprise, I was able to get all the answers to all the questions I had online. This truly was a game-changer. Both communities are very active, with thousands of members that frequently post their struggles in platforms like StackOverflow and help other users with similar questions.
Which one is more fun: Vue or React?
If you share the same passion for coding as I do, then you probably agree with me when I say that the choice of a framework affects your motivation and the project results. So, yes, it’s important to understand if you’re deciding for a technology that will fight with you or challenge you in a good way.
Is Vue fun to work with?
From my experience with each of these frameworks, Vue.js has an excellent programming style and pattern, good documentation and a smoother learning curve to get things rolling faster. It also has a very complete getting-started-tutorial that incorporates routing and store management. This is definitely a great initial boost for new developers.
Is React fun to work with?
Besides its ** well-built system of packages from third parties** (like ReduxandReact Routing), its large community is a big plus as it has almost 50 thousands npm packages to help you achieve your project’s goal. This is achievable because of the freedom given to developers to create and adjust their needs according to their goals.
From a career perspective and due to the ever-changing nature of the tech industry, it’s important to know if your preferred frameworks have a career and market potential to grow. While Vue.js has an easier learning curve, which makes it faster for you to master it, there are a lot more React developers in the market. If you’re looking for Vue.js vs React jobs, you’ll certainly have more competition in React than in Vue.js.
In terms of salary, according to 2019 statistics comparing the annual job paying, React developers can earn slightly more in a long term perspective than Vue.js developers.
When to use Vue vs React
Based on the project developed, I learned that:
- Vue.js has an easier learning curve, so it may suit better if you want something that can be learned “fast” to finish your project quicker;
- Vue.js is a better fit for smaller projects than React;
- React has thousands of packages that can facilitate your project tremendously;
- React overcomes Vue.js for projects that by nature are larger and with higher complexity.
Considering my findings, I conclude that Vue.js was a better fit than React for less complex projects like this one. This is mainly because:
-
Quickstart in development: with background knowledge in HTML, I was able to start developing right after completing the tutorial and reading all the necessary documentation;
-
The clarity of HTML over JSX: I consider HTML way clearer and easier when it comes to communication, which really makes a difference when you’re working as a team;
-
Better tutorial: provides a tutorial that includes the use of official packages, such as how to handle routing and store management.
Final thoughts
Selecting a framework to work with can be quite a challenge as each project has its own needs and features. This leads me to believe that instead of diving first in the plethora of information available on the web to quickly answer the question: Which framework is better?, one should focus instead in figuring out which framework adjusts and fits the project’s needs better.
Also, variables like your project size, complexity and goals, have a considerable weight in your final decision. Both frameworks have their own specifications and your background as a developer plays an important part in this, as it may influence the way you deal with those particularities to benefit your project.
In this article, I talked about Vue.js vs React based on a project I developed from scratch using both frameworks.
If you’re looking for help in building a mobile application in Vue.js or React, we have highly skilled developers ready to make it happen! Get in touch!
Found this article interesting? You might like these ones too!