A quick rundown of React vs Vue.
- Facebook developed React circa 2013 in order to solve the fundamental problem of building interactive UI components.
- React surpassed MVC frameworks by adopting a purely declarative approach to creating UI components, producing a more predictable UI behavior and producing code that is easier to debug.
- Most of Facebook’s customer facing products are implemented using React.
- Focuses on the view layer in the MVC architecture.
- UI components are written using a declarative markup called JSX, which can be considered as an abstraction layer on top of the DOM.
- React tracks state changes and intelligently re-renders only the parts of the UI that require syncing and updating with the new application state.
- Achieved by employing the concept of Virtual DOM, which is an in-memory representation of the actual DOM. The virtual DOM is the foundational pattern behind the React engine.
- Clear abstractions that decouple application state and UI behavior; allowing for easy component composition and reuse.
- React itself has been rewritten from the ground up in TypeScript.
- No major features are announced for the 2020 roadmap.
- React Hooks was the last major feature introduced into the React framework in late 2018.
PATTERNS AND ECOSYSTEMS
- Commonly used in tandem with a paraphernalia of state management frameworks that implement a Flux pattern, which is essentially a unidirectional data flow pattern, most notable of such frameworks is Redux.
- Another popular pattern is using a State-Machine-like mechanism to manage state changes.
- Other frameworks can also be used to manage multiple asynchronous updates to the application state, which could result with a fairly complex setup that requires careful and thorough understanding.
- Created and backed by the Open Source community and not developed by a major company (like Facebook with React)
- Intended to be an approachable and incremental framework
- Approachable, because it uses standard HTML syntax without introducing any additional layers of abstraction.
- Incremental, because an existing UI can, to varying degrees of success, be incrementally transformed into Vue.
- Reactivity is the key concept in Vue.
- Inspired by many preceding frameworks like Angular and Knockout.JS, Vue employs the Observer pattern as a way to track changes to application state and synchronizing the UI accordingly. Also, much like React, it focuses solely on the View layer in the MVC triad.
- Similar to React in strengths.
- Under the hood Vue uses a combination of virtual DOM and reactivity system to intelligently re-render only the updated components with minimal manipulation of the actual DOM.
- Work on Version 3 is slated for official release in Q2 2020.
- May include a full rewrite of core libraries in TypeScript and will most likely contain breaking backwards incompatible changes, which may pose some challenges upgrading from older Vue versions.
PATTERNS AND ECOSYSTEMS
- Most common implementations will include additional frameworks for managing state, Vuex is a flux-like implementation built by the Vue team and is the defacto state management solution for Vue.
- Generally less architecturally demanding than React, while not necessarily an advantage, if leveraged properly however, it can lead to simpler code implementations.
Adoption and community support
- Strongly backed by Facebook with a dedicated development team and international developer conferences.
- Bigger market share and total number of projects and companies using React.
- Vue is trailing right after React in popularity and in the near future the margin could become razor thin.
Maturity and stability
- Rewritten in TypeScript.
- Stable API, backward compatible changes.
- No major breaking features announced for 2020.
- Currently being rewritten in TypeScript as a major 3.0 release slated for late 2020.
- React is higher on the maturity and stability scale, as there are no major rewrites scheduled for React.
- Learning JSX can be considered an overhead.
- Requires deep understanding of component lifecycles and re-render mechanism.
- Smoother learning curve as Vue uses plain HTML for templating components (JSX can still be optionally used).
- Architecturally speaking, Reactivity and Observer/Proxy pattern may be more conceptually accessible to a wider developer audience than React concepts.
Command-line tooling and deployment
- New projects are created and built using a common and well supported tool create-react-app.
- Adequate for most projects without the need for external build tools.
- Richer standard tooling for development.
- Vue-cli is an extensible and configurable out-of-the-box tool that removes the need to eject any bootstrap scripts as is the case for React.
- Offers an intrinsic module, ReactDOMServer, for statically rendering React components server-side.
- Other popular open source frameworks include Next.js.
- Although React is a client-side framework, server-side rendering brings additional benefits such as better SEO and faster browser page renders.
- Follows suit and provides an analog to React’s capability for server-side rendering.
- Nuxt.js is a popular higher-order framework that facilitates building server-side rendered applications.
- Advantage is that developers learn React once and can implement it across devices.
- Does not offer any alternative that is as battle-tested as React Native.
- Vue community has built NativeScript-vue, which is a NativeScript plugin.
If you are looking to make major front end improvements to your product or stack, Admios can help. We have dozens of years experience in both React and Vue and can help talk through the right solution for your team.