Vue vs React — Again! 😏
How many times have you seen this topic and read articles that compare these 2 javascript ideas at war 🚁 I have read these articles too and most of them are non-conclusive. 😔
I am currently faced with choosing one of React or Vue and I soon realized its not a comparison between a Javascript library and a framework, but it really is a battle of opinions. 👊 I have to pick a side, make peace between 2 very opinionated sides and convince both parties to come to a decision and here are pointers that I feel are really important to consider.
Performance ⚡
Neither React nor Vue is a magic pill that is going to solve your performance problems. It is not like, by using one of these 2, you are bring down your page load time drastically. Look at the performance comparison between these 2 and some other popular frameworks/libraries form Stefan’s benchmarking tool. After you look at this comparison, you will realize that performance is not even a point of consideration. So, what next?
Adoption & Talent Pool 🤗
How well a framework or a library is adopted by the market and how quickly and how many quality engineers can be hired are key consideration points for any organization while choosing a tech stack.
React has been adopted by large organizations for large scale, customer facing applications. Companies like Walmart, Wayfair, Gap, Nordstrom, Target, Forever21 and several other are using React in production. Adoption of Vue is not so much. My research only brought up a few big names using Vue, which are Gitlab and Optimizely and a couple of lesser known e-commerce sites like The Souled Store.
With adoption, also comes talent. If a library or framework is hugely popular, a lot of developers are going to learn about them and then large companies will have a large talent pool to choose from. The following distribution based off of job openings in 2017 on Indeed.com nails the point. This distribution would definitely look different today!
Library vs Framework ⚛️
React is not a framework and just a UI rendering library. Because of its popularity, there is a huge eco-system around it, that lets you create a MVC framework using React and some third-party libraries. You have to spend time and efforts, identifying these libraries, which together are going to form your MVC framework.
Vue on the other hand is a full fledged framework complete with its own routing and state management capabilities. This takes a huge burden off your shoulders.
Application build size 🏋️
I was reading this article comparing Vue and React and the author has created the same To-do application in Vue and in React. When I checked the production build sizes; I was surprised. The difference in file after gzip is crazy!
Vue to-do on Git — https://github.com/sunil-sandhu/vue-todo
React to-do on Git — https://github.com/sunil-sandhu/vue-todo
Bear in mind these are “gziped” numbers and Vue js size is almost half of React and that is a huge plus for choosing Vue.
Javascript driven vs Template (HTML) driven 🏎️
React is very Javascript driven. Vue on the other hand is more HTML or template driven. I don’t see any harm in choosing either, it is just a matter of what you are more comfortable with.
CSS-in-JS
As you start writing complex React components you will see the need of CSS in JSX, but if you haven’t reached that point yet, read this beautiful article ❤️ on the topic by HackerNoon.
You need to introduce another third party library, like Radium or Styled-Components or one of the many others available, in your React eco-system. Vue on the other hand solves this problem beautifully.
Now come 2 very opinionated points of consideration, but I think most people would tend to agree with my observations, but you never know.
Learning curve ⛰️
This is another key factor when choosing a framework/library. If an organization chooses a library or framework that is extremely difficult to pick up, it becomes very difficult to onboard interns and junior developers on the team. The senior developers or leads would end up spending a lot of time coaching the newer members on the team, bringing down the velocity of the team.
React and Vue are both fairly easy to pick up, but if we have to really pick one, I would say React had a slightly shorter learning curve compared to Vue 🤷, but not too short. However, most of the people who have used both React and Vue often think Vue is easier to understand and grasp compared to React (see comments on this post!)
Spaghetti Code 🍝
I believe, when using React one can get away with bad code, while still making things work. When using Vue, it is slightly more difficult to write bad code. When using React you might end up with spaghetti code, not so much when using Vue.
Conclusion 😌
In conclusion, I think Vue is better than React and that Vue can be adopted by large organizations for large consumer facing applications. To summarize, lets tabulate the above points for quick comparison.
Hope this helps you in choosing the right framework/library for your next project and let me know your thoughts on the subject too.
Also, this is my first Medium post, so go easy folks 😊. I usually blog at The UI Dev ❤️ and also share my thoughts on Twitter as @shreerangp 🐦. Make sure you check out my open source project Nuggets. One crazy way of learning React I created — https://twitter.com/i/moments/1031801807989665792?s=13
