A quick rundown of React vs Vue.
React
BACKGROUND
- 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.
ARCHITECTURE
- 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.
STRENGTHS
- Clear abstractions that decouple application state and UI behavior; allowing for easy component composition and reuse.
- Embraces strongly typed JavaScript (i.e. TypeScript) which eliminates a whole class of defects due to type mismatch.
- React itself has been rewritten from the ground up in TypeScript.
ROADMAP
- 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.
Vue
BACKGROUND
- 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.
ARCHITECTURE
- 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.
STRENGTHS
- 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.
ROADMAP
- 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.
Comparative solutions
Adoption and community support
React
- 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
- Vue is trailing right after React in popularity and in the near future the margin could become razor thin.
Maturity and stability
React
- Rewritten in TypeScript.
- Stable API, backward compatible changes.
- No major breaking features announced for 2020.
Vue
- 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 curve
React
- Learning JSX can be considered an overhead.
- Requires deep understanding of component lifecycles and re-render mechanism.
Vue
- 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
React
- 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.
Vue
- 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.
Server-side rendering
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.
Vue
- 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.
Cross-platform
React
- React Native allows developers to write cross platform applications on iOS and Android using standard React and JavaScript that will ultimately be compiled into native code.
- Advantage is that developers learn React once and can implement it across devices.
Vue
- Does not offer any alternative that is as battle-tested as React Native.
- Vue community has built NativeScript-vue, which is a NativeScript plugin.
- The NativeScript framework (a separate open source initiative) also leverages JavaScript to build mobile applications; originally only compatible with Angular.
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.
Click here to schedule a quick 15 minute call with us or browse some of our case studies to see how we’ve helped others improve their front end frameworks.
