As of 2019, there are 3 technologies that dominate in the Front End battlefield – React, Vue and Angular. According to Bang State of JavaScript 2018, Reac React and Vue have the highest satisfaction rates. React is supported by Facebook and is currently used by Netflix, Airbnb, Instagram and many others. Vue is created and supported by Evan You and a small core group and used by Alibaba, Wizzair GitLab … In this article I will explore the basic differences between these two technologies.
Similarities
The biggest similarity between the two React and Vue technologies is that they both interact with the Virtual DOM (DOM is the abbreviation for the Document Object Model), which is a standard defined by the W3C for accessing. and manipulate HTML or XML code using scripting languages like Javascript. In addition, both React and Vue are very lightweight, using an architecture around components and lifecycle. Besides, both have a large support community, ready to help.
Difference
Let’s start with the most obvious difference: React is a library, while Vue is a framework.
React allows DOM manipulation, component architecture, and state management. All the rest is up to the community. This approach provides a lot of freedom for developers. Many React apps rely on third-party libraries, built and supported by the community, and the choice for the right one can be a challenge for beginners.
Vue , on the other hand, is more interested in and comes with lots of syntax lines, plugin systems, integration directives, transitions, etc. In addition, the development team has created companion libraries for defining Offline and status management along with other useful tools. Some examples of such companion libraries are Vue-routers, Vuex for state management and Vue CLI. Of course, users are not required to use these tools because there are several alternatives. The main benefit is that these are built and supported by the core team. The main focus of Vue, is simplicity and the team has taken care of these common concerns, allowing for faster setup and development. Vue is quickly catching up with React and the community has built a lot of third-party libraries, enriching its ecosystem.
1. Data management
For a web application to be highly interactive, the UI must constantly respond to data changes and this data is called a state . One of the biggest contrasts between React and Vue is the way they handle state changes. This greatly affects the mechanism behind UI updates, also known as re-rendering .
React is known for using Functional Programming (FP). It implements FP principles, such as higher order functions, invariants, pure functions, and so on. The philosophy behind React is that the state is usually immutable data. When trying to change state , the UI will not be re-rendering . To enable re-rendering , the setState method should be used.
In Vue , the state is represented in the data object. Unlike React, changing data objects will trigger UI re-rendering .
2. Template && Styling
React uses JSX (a syntax extension for JavaScript). Its syntax is similar to HTML with some significant differences. It provides a smoother developer experience, better debugging and code reading.
Vue takes a more cautious approach to template & styling – separately from logic. The markup is shown as templates that look like HTML. In fact, every valid HTML is also a valid Vue template. Inside the template , Vue provides a lot of syntax lines like conditionals, iterations, etc.
3. Scalability
Extending the Vue or React application with third-party libraries is quite simple. Most vendor libraries for React are simply components that enhance existing ones. For example, the React-Redux library is using the context API and displaying a higher-level component that makes the state accessible from all selected components. In Vue , many third party libraries are in plugin form, taking advantage of the integrated plugin system. Plugins can be added using the Vue.use method.
Above is the similarity and basic differences between React and Vue. If there is anything missing in the article, hope everyone can give me more ideas.
Article translated from https://mentormate.com/blog/react-vs-vue-the-core-differences/