Long gone are the days when front-end developers must tediously craft every single component and interaction of their websites with plain old HTML, CSS, and Javascript. Today, countless frameworks abstract away and simplify the process, allowing artisans to showcase the best of their UI and UX capabilities with prebuilt components. One might even say that this is the best of times, and the worst of times, with so many options and so little time.
Two of the top contenders for front-end development are React and Vue, both of which saw nearly 90% of developers indicating that they would continue using the framework in the future according to a 2017 survey. Both are beloved for strong performance in rendering, reusable components, and strong backing in open-source communities, but there are key differences to keep in mind for business practitioners thinking about leveraging the latest web development technologies to elevate their online presence.
About React
React is a Javascript library created by a Facebook engineer in 2011 and open-sourced in 2013. It is most famous for its reusable user-interface (UI) components and for presenting data that changes over time. As a result, React is widely used as the View layer in the Model View Controller (MVC) software design pattern, but it is also occasionally used with Node.js for server-side rendering. React is not the same as React Native, which was created in 2015 for building native mobile applications. React powers a large portion of the web, most notably Facebook and the WordPress editor Gutenburg (it is estimated that 30% of all websites in 2021 are powered by WordPress).
About Vue
Vue was created in 2013 by a former Google engineer who wanted to create a lightweight framework with the best features of Angular.js, and the first release was made in 2014. To this day, Vue remains an open-source project with no major company backing it. Although the core library for Vue focuses on the view layer, its officially maintained supporting libraries packages can handle routing, state management, and build tooling. Vue extends HTML components and promotes code reuse via encapsulation, supports HTML templating, CSS transitions, and provides additional functionalities to single-page applications.
Shared Strengths
It is not uncommon for front end developers to express dismay at the myriad implementations for different components using CSS, each of which has unique nuances and leading to a feeling of exasperation. React and Vue alleviate this learning process by not only having components with well-defined interactions, but also allowing the developer to visually see the effects of changing each line of code. This is possible thanks to the Virtual DOM (Document Object Model), and leads to performance improvements for the end user as well - because individual components’ states can change without needing to refresh the entire page. Traditionally, changes to a DOM would only take effect in the user’s view when a new DOM is loaded; with the Virtual DOM in both React and Vue, only portions of the DOM that change need to be updated.
Another benefit to using React or Vue comes from the fact that both are superbly suited for use with event-driven web frameworks, like Redux or Laravel. Modern apps increasingly use an event-driven approach, with a focus on interacting with user input and customizing the application flow to the user’s needs. Combining a responsive user interface (courtesy of the virtual DOM mentioned above) with an event-driven framework for managing application state results in a highly flexible, responsive, and scalable application capable of supporting large numbers of users.
Hiring Considerations
React has been around longer than Vue, and while traditional accredited universities typically teach fundamentals of computer science data structures and algorithms and are generally language/framework agnostic, the same cannot be said for companies and bootcamps. In places like India, React is much more common on account of being the older framework. What this means for business owners is that it may be easier to hire a developer experienced with React than with Vue, though great developers ought to be able to pick up any framework relatively quickly.
Impact on SEO (Search Engine Optimization) - Pitfalls to Avoid (Shared Weaknesses)
People often focus on keyword density and quality of content when it comes to SEO. This isn’t wrong, but makes an important assumption - that the search engine’s web crawlers will be able to find, index, and crawl through all the carefully crafted content on your site. From a web development perspective, ensuring that even a web crawling bot can see all the content rendered as it was originally intended (for a human consumer) is the paramount priority.
Since React and Vue make extensive use of the virtual DOM, developers must take special care to ensure that their websites are single page applications, but not single URI applications. The distinction is very important: a single page application developed with React or Vue can dynamically change the content displayed to the user, without changing the site URL - but for users wishing to share specific portions of that content, and search engines trying to index all your website has to offer, this is a nightmare (only the homepage will be indexed). To alleviate this, React developers should look to the open-source React Router; Vue developers are more fortunate, as Vue comes with deep integrations for Vue Router, its official routing framework.
Furthermore, out-of-the-box React will not support adding unique page titles and descriptions to meta tags, thus necessitating the use of
React has a slight upper hand when it comes to improving SEO. This is largely due to JSX (Javascript XML), a special tag syntax that creates React ‘elements’ that can be directly rendered in the DOM. This means HTML can be written directly within your React Javascript file, and with server-side rendering, ensures that search engines’ web crawlers can easily index all the important content on your website.
However, JSX can also be used with Vue. The main thing to keep in mind is that JSX was originally created for React, and Vue was originally intended for use with templating systems instead.
Documentation and Learning Curve
Vue, despite being the newer framework and not having the backing of a major company like React (backed by Facebook) or Angular (backed by Google), is generally acknowledged as having better documentation than React. This is in part a reflection of the strength of the open-source community that favors development with Vue, but also of the steeper learning curve associated with React.
React boasts of more tutorials and a larger open source community, but counterintuitively has worse documentation, with topics occasionally presented in a confusingly unorganized fashion. This is a side effect of new features being constantly added, although this has generally improved in recent years with the core React API syntax and features having reached maturity.
In light of the above, those who learn best by following a centralized development guide will likely prefer Vue, while those who like to follow tutorial videos and articles can find more examples for React.
Furthermore, React’s flexibility with regards to state management and routing means it can be used with a wide variety of third party libraries, but also means it’s yet another topic for new React developers to learn. With Vue, there is no need for learning to use a third party library, as it comes with Vuex for state management, and handles server-side rendering and routing right out of the box.
The Javascript XML (JSX) mentioned above in the SEO section, a key selling point of React, is also a detriment when it comes to ease of learning. Unlike Vue, which uses syntax immediately recognizable to traditional Javascript developers, the JSX syntax and component lifecycle management techniques must be specifically learned, even by experienced web developers.
Compatibility with legacy software
As websites introduce more interactive features, the average size of a webpage has ballooned from about 700 kilobytes (kb) in 2010 to over 2300 kb in 2016. This leads to higher load times and is detrimental to users with limited data connections, or slower internet speeds. It is generally acknowledged that a major contributing factor to large webpage size is the inclusion of larger script files and related libraries - fortunately, both React and Vue are relatively lightweight, coming in at 139kb (including React DOM and Redux, the application state manager library for React) and 58.8kb, respectively.
As touched upon above in earlier sections, fully taking advantage of the features offered by React means using JSX instead of traditional HTML templating, and reworking component lifecycle paradigms. This could mean significant technical debt and time spent reworking existing codebases instead of developing new features for teams that have long used other web frameworks, and is something to consider before transitioning to React.
Of course, it is possible to use React without JSX, but it’s likely better to use Vue or another web framework if there is no need for JSX.
Cross-platform Code Reuse
The past five years has seen an exponential increase in prioritizing mobile users. No longer is it acceptable to offer a great desktop browsing experience, or even just present an acceptable, mobile-friendly version of a webpage. Instead, modern websites are often designed and built with mobile users in mind, and for good reason - in 2019, mobile browsing constituted over 50% of all web traffic, and this figure is only expected to increase with widespread adoption of 5G and other wireless standards. Thus, it is important for businesses considering a switch to either React or Vue (or another web framework) to take into account how such frameworks interact with mobile operating systems and devices.
As it turns out, both React and Vue have ‘native’ versions for developing mobile applications with Javascript. Of the two, React Native is doubtlessly more famous, and can be used on its own. As for Vue, there are three options for mobile app development.
There is Vue Native, a wrapper library that relies on the React Native APIs to allow developers to use Vue while creating decadent mobile user interfaces. Then there’s also weex, a framework that is similar to React Native but offers a DOM-like API and flexible render backends. Neither of these have gained sufficient traction to be household names in developer circles, although weex is widely used by the ecommerce company Alibaba. Finally, there is beginning to be early support for Vue with NativeScript, the mobile solution for Angular, another popular web framework.
Although Vue Native simplifies the learning process for development of native mobile apps, it requires transpilation into React Native. This means apps built using Vue Native must also load the libraries for React Native, and will thus always be slightly less memory efficient.
Weex, being primarily used in China by Alibaba, currently lacks well-organized documentation in any language other than Chinese. This may change in the future, especially since it recently became an Apache Incubator project, but for the time being it will be difficult for English-speaking developers to learn.
Using Vue with NativeScript is rather popular, even preferred to development with React Native in some circles. This is because React Native relies heavily on plugins, and forces developers to fork the plugins they wish to modify with Objective C or Java. With NativeScript, it is possible to directly interact with native objects and APIs from Javascript.
Licensing
When it comes to software, licensing is important because it dictates when and how software can be used free of charge, without infringing on various stakeholders’ rights. Fortunately, both React and Vue use the MIT License, which is one of the most permissible licenses available, and allows for relicensing under copyleft licenses, reuse within proprietary software, and generally has very few restrictions on distribution and reuse.
The bottom line
Both React and Vue are beloved front-end development frameworks that enable developers to craft responsive websites, for mobile and desktop. React and React Native offer greater flexibility and a larger developer community, but both have a steeper learning curve and necessitate learning special syntax patterns to fully take advantage of their features. Vue arguably has better documentation, is more lightweight, and enables developers to create apps of their own without needing to worry about routing and state management with third party libraries. Short of a revolution that threatens to upend how customers consume digital content, it’s unlikely developers can go wrong by choosing one of these two powerful and reliable frameworks.
