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.
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:
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.
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:
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.
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.
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.
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.
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:
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:
After the learning process, coding and testing, it’s time to share with my insights (release the drum roll!):
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:
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:
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.
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.
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.
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.
Based on the project developed, I learned that:
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:
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!
I'm a Web developer passionate about frameworks that make life easier. Commonly seen forgetting that you probably don't need semicolons anymore.
People who read this post, also found these interesting:
.png)
