In 2023 there’s no shortage of frontend frameworks to choose from. Vue.js and React are two of the most popular frontend JavaScript frameworks. React is an open source JavaScript library maintained by Facebook. Vue is an open source JavaScript framework created by Evan You.
Background
Frameworks like React and Vue are very popular, one of the reasons for this is because of their use of the Virtual DOM. Instead of re-rendering the entire web page as is the default behaviour with regular DOM, they update only the elements that have changed which saves considerable time and resources. They are both built on a component based development structure which creates reactivity, promotes code reuse and allows developers to develop applications faster.
For syntax React uses JSX function-like components to create their views. JSX is a syntax extension to JavaScript and it is what allows us to write HTML in React. Vue on the other hand uses a templating pattern which adds to its simplistic nature.
Flexibility & Learning curve
The biggest advantage that frameworks provide is flexibility, how easily can we, as developers, utilise that framework to develop applications.
So how do React and Vue compare in that way? Well for React, flexibility is one of its biggest advantages. Its flexibility stems from how easy it is to pick up. Being a library and not a full scale framework it is much easier to learn. It gives developers the freedom to add libraries based on necessity and preference and not have to work in a set pattern. This creates heavy dependency for React on libraries as developers are forced to be dependent on third party components for development. Learning React was a great learning experience due to how well supported the framework is and its well written documentation.
However, the biggest advantage of Vue is how simple the syntax is and how easy it is to learn especially in comparison to react. The syntax is composed of just HTML and ES5 Javascript. It consists of templates that are set up in a pattern that developers are already used to: HTML, JavaScript and CSS. It also allows JSX as an option if preferred.
Vue is supported by even better documentation and tools including the Vue CLI and the Vue UI. Vue was intended to have an easy learning curve as it is said to have picked out the good parts of Angular and React.
State Management
React handles its state management by using the setState hook to set the state of the component. More complex applications will use a separate package, Redux is a popular library used for this. React has the support of several packages including Redux and Mobx for state management.
For state, Vue uses a pattern known as a ‘store pattern’ for small applications but for large scale applications a separate state management library, called Vuex. This library is developed and managed by the Vue team which makes it completely tailored to Vue’s needs. It provides a Flux like architecture with a centralised store.
Ease of Integration
React and Vue exist in compact physical size which makes them easy to pull into existing applications. For reference React is about 100Kb and Vue.js is about 80Kb. They are both undoubtedly lightweight and both perform well and at a similar level carrying out the same load of operations.
Which Framework Should You Go With?
React and Vue are both great frameworks and both do well in their ideal use cases. React is widely supported by a large community which lends to all the resources and libraries readily available, which makes it a great contender for scaling into large scale applications, however the learning curve and the complexity it takes to implement a single functionality, especially in comparison to Vue, can make it overkill for smaller applications. Vue is newer than React and does not have the same scale of support that React has as yet but still has a good amount of support, with less coding required to accomplish similar tasks and has an overall simplicity templating style close to what developers are used to seeing, for a great learning experience, makes it ideal to spin up for smaller applications.
