Vue vs React
Vue and React are two of the hottest options for UI development. While React is a UI component library backed by Facebook, Vue is a progressive UI framework used by companies like Alibaba and Baidu. In this article, we discuss the key similarities and differences between Vue and React.
What is Vue?
Vue is a progressive web framework for building UIs. It was developed by Evan You, a former Google employee seeking to improve on the pitfalls of Angular.js. Vue combines traditional web technologies (HTML, CSS) with progressive concepts (reactive component, virtual DOM) to achieve a lightweight, easy to learn framework for UI development.
What is React?
Created and maintained by Facebook, React is one of today's most popular libraries for rendering cross-platform UI components. By leveraging the power of a full programming language (JavaScript) to generate views, React offers a unique and efficient approach to building reusable UI components. For more on the benefits of React, check out our introduction to React.
Vue vs React: Key Similarities
Virtual DOM
Vue and React both utilize a virtual DOM to efficiently manage updating UI components. The virtual DOM is essentially a JavaScript object that is compared to the real DOM after changes to the app's state. Through a "diffing" process, the virtual DOM more efficiently recognizes what components need to be redrawn. This offers a huge performance advantage as it minimizes the amount of redrawing that needs to take place (an expensive operation for browsers and other rendering engines).
Performance
Through their implementation of the virtual DOM, both React and Vue share a superior performance advantage to more traditional libraries like jQuery and frameworks like Angular 1.
Reactive and Reusable Components
Both React and Vue share the idea of reactive components. Components are self-contained pieces of functionality that can be reused to make development easier. These components represent and "react" to underlying data models represented as JavaScript objects.
Focus
Both React and Vue maintain a focus on the development of the core library. Things like routing and state management are handled by companion libraries.
CLI tooling
React and Vue both offer CLI tools for quickly generating projects.
Vue vs React: Key Differences
Virtual DOM
While React and Vue both implement a virtual DOM, Vue takes a more intuitive and efficient approach to re-rendering. By default, React re-renders a component's entire sub-tree. Only by specifying shouldComponentUpdate can you manually control when sub-components should and shouldn't re-render. Vue automatically handles this and updates a component's dependencies when necessary. This takes the concern off the developer and maximizes the efficiency of virtual DOM diffing.
Ecosystem
React has a richer ecosystem than Vue. While Vue is gaining traction quickly, it has a ways to go before it will be as popular as Facebook's React.
Templates
With React, everything is expressed as JavaScript. HTML is expressed as JSX and CSS is typically managed within a JavaScript context as well. Vue takes a more traditional approach as regular HTML can be considered a valid Vue template. Additionally, Vue allows for single-file components where CSS, functioanlity, and templates are all combined in a single file. This can be more convenient and easier to undertand with everything in one place.
Learning Curve
While React effectively leverages JavaScript to create reusable components, it requires a steeper learning curve than Vue. This is largely because Vue leverages more traditional web technologies whereas React encourages the use of JSX, ES6, and build systems like Webpack. While it's not required to use these supporting technologies with React, it's accepted as the industry standard to use JSX and ES6. Most of the examples and documentation found online uses these technologies. This is far more complicated than using Vue which allows you to get started by simply referencing the library in a <script> tag.
Conclusion
While React is arguably the most popular UI library used today, Vue is quickly becoming a formidable opponent. This is because Vue brings the same performance benefits to the table without all the extra bells and whistles (most notably build systems, JSX, and ES6). Vue is more lightweight and is easier for junior developers or those more familiar with traditional web technologies to pick up.
React still wins with a rich community and superior native rendering, but Vue is catching up with projects like Weex. It should also be noted that Vue supports JSX, Redux, and other popular React technologies. This leaves little reason to not at least explore Vue as a more lightweight option for UI rendering.
