Posted on 4th February, 2022
React and Vue are two of the most popular frontend modern frameworks/libraries in Javascript/Typescript today for developing frontend applications. They form something called the "Big 3" in the category of popular libraries/frameworks created in Javascript with "Angular" being the another member of the club. In this article I'd be sharing my experiences working with these frameworks and would draw comparisons between the two about which one you should bet on depending on your use case. Hopefully, this article would be useful to you while you are in a conflicting situation about which framework to choose while building a modern frontend application.
Note that I'd be using terms "Framework" and "Library" interchangeably here in this post but there exists subtle difference between the two. "Frameworks" in general are more customizable than "Libraries" and often force you to follow certain defined design patterns. Libraries have built in functions written which you can invoke depending on your use case. For drawing comparisons I'd be segregating this post into following six categories.
React (also known as React.js or ReactJS) is a free and open-source front-end JavaScript library for building user interfaces based on UI components. It is maintained by Meta (formerly Facebook) and a community of individual developers and companies. As far as history of React is concerned, it came into existence because of Jordan Walke, a software engineer at Facebook in 2011. It was used in Facebook and Instagram in 2012.
Vue.js is an open-source model–view–viewmodel front end JavaScript framework for building user interfaces and single-page applications. It was created by Evan You, a Google Engineer, and is maintained by him and the rest of the active core team members. Unlike React and Angular Vue does not have a tech giant to constantly back it up. Vue is currently in version 3, but version 2 is also very popular and is significantly different than version in certain facets like composition API and has a richer support for Typescript than it's earlier version.
It is a general consensus among the developer community that Vue and React have easier learning curves compared to Angular. Most people from the community would say Vue is easier than React especially the long term support version '2' of Vue. Vue has adopted best of both worlds approach by incorporating best features from both the rivals 'Angular' and 'React'. In my opinion Vue 3 has a slightly bumpier learning curve compared to its earlier version.
React is considered to have a generous learning curve as well. A constant exposure to working with React apps would make you a better Javascript developer in general so, with your Javascript fundamentals strong, you should have a smooth ride with React. Though, this might be opinion based in general. There might be people who would find "Angular" to be easier than "React/Vue". But, in general for a newbie, the learning curve order is something like this Angular >> React > Vue
On a high level Vue and React have significantly different file structure to organise project files. I have included the discussion of the structure of the framework in this section. Vue files are better structured in my opinion. With files ending in .vue extension you can include your view, Javascript imports and custom CSS all within a single file. React allows .jsx file extension aside from pure Javascript files. React has multiple design patters for file organization, you can have a folder based approach like in Angular where you have small reusable components housed inside a folder along with their style and test files.
In this section we would be using Github parameters like number of stars, forks and contributors. Vue has 193k stars, 32k forks and 404 contributors at the time of writing this post. React has 182k stars, 37k forks and 1538 contributors. But, React is also 2-3 years older than Vue and has been backend by Facebook ever since inception.
Vue has one of the best documentation available among all the popular frontend and backend frameworks. Documentation is easily one of the best resources for a newbie learning Vue. I can't claim the same for React as there are loop-holes in the doc for a beginner. I often had to refer other Youtube videos, tutorials and blog posts to wrap my head around some of the concepts in React like React-hooks. But, that could just be me. But, yes to sum it up Vue has a better documentation than React.
Both of these frameworks are used by a lot of big companies in building their enterprise level applications which have millions of users. But, personally I'd recommend choosing React if you believe your application could become humongous in future handling a large pull of users. Reason is that React has already built in and maintainable third-party packages included which would serve various functional requirements in your ever so increasing scalable app, more on this would be discussed in "plugins" section. For now, I'd quickly list some of the big companies which are using React and Vue in their applications.
According to Stackshare, there are around 10K+ companies using React in building their applications. Some of the corporate giants using React are Facebook, Shopify, Amazon, Uber, Udemy, Netflix, Instagram, Airbnb and more
Vue is the new player around 3-4 years younger than React and does not have tech giant backing it in development and maintenance process. Still, it has penetrated significantly into the market and compelled tech giants to use it in building their applications. Some of these companies which use Vue are Apple, Nintendo, Alibaba, BMW, Behance, Dribbble and more
Most of the frameworks and programming languages have a huge collection of third-party packages which are used to extend the functionality of your application. Many of these packages have been proven to effectively solve an identified generic problem. They encourage "do not re-invent the wheel" principle in Software development. Most of these packages are rigorously tested and provide customization options for your use case. For instance, there are packages for implementing cross-browser compatible aesthetic user interface designs in your application, there are packages to integrate different modes of payment in your full stack application. Most of these packages are open sourced for others to use and contribute in development. Most of the times developers would feel reusing these plugins in their applications compared to write their own from scratch.
React and Vue have significant number of packages written for various use cases which you can use with slight modification in your existing apps. One such use case could be to implement drag and drop functionality for which you have Vuedraggable in Vue and React DnD in ReactJS. React has a larger collection of packages compared to Vue since it is older and has a large community base actively maintaining third-party packages and resolving bugs/issues. Having a better "community support" is one of the reasons I mentioned earlier that I'd prefer React over Vue for and enterprise level application likely to serve millions of customers in future.
Since React has been in existence for 3-4 years when compared to Vue, in most cases libraries for a specific use case are first implemented in React before the corresponding Vue version is developed. This is not a rule but general observation but exceptions do exist. One example is this library called "react-query" which is used to handle API data with caching on browser side. "React-query" has been in existence for quite some time now, but recently a version for this has been in development for Vue 3. React libraries are likely to have less issues in general and are being updated regularly. In general popular plugins for both React and Vue are mostly error free, but for some lesser known packages might have bigger community support for extended duration of time in React.
React has a clear edge in this segment because of React Native and the extend with which this has been used in the industry for a while now. Though there are alternatives in Vue for making native mobile friendly applications like Vue Native, Ionic and others. Their share in app development market is considerably lesser than React Native.
Multi-page applications are traditional applications which have multiple pages and routes written in server side programming language. Before 2010 almost all the websites were traditional multi-page applications which extensively used Jquery or Vanilla Javascript for integrating scripts on specific pages. That might still be requirement in some cases though these days modern applications are bundled as SPA (Single page applications) which serve optimized bundled assets in form of Javascript and CSS files.
Both React and Vue can be integrated with multi-page applications. Vue is comparatively easier to integrate and is preferred because of it's smaller bundle size which is around 80KB almost 20KB smaller than React. Vue has replaced Jquery in many of such applications. Probably the easiest way to integrate is to use a content delivery network (CDN) and include the path for Vue/React in the header section of the HTML page you want to integrate with.
To conclude I think it's safe to assume that there is no Clear Winner in this face-off. It would totally depend on what kind of app you're building, your personal taste, people you're working with, future app requirements and more. The result of the key-points discussed in the above section is concisely described in the table below.
# | Parameter | Preferred Framework |
---|---|---|
1 | Learning Curve | Vue |
2 | Community Support | Vue |
3 | Scalability | React |
4 | Industrial Use | React |
5 | Company Support | React |
6 | Github Stars/Forks | Vue |
7 | Documentation | Vue |
8 | Plugin Support | React |
9 | Mobile App Development | React |
10 | Multipage Website Integration | Vue |
This post does not contain any images.
Have something to share ? Please post it in the comments section.
You must be logged in through your Google account to post comments
No comments available for this post