React vs. Angular vs. Vue: How to Choose
By: Intertech
Tags: Vue, Web Development, React, Angular

by Tom Helvick

In the world of web development, you’d be hard pressed to find a modern website that’s not using some type of reactive JavaScript to dynamically render pages. Indeed, it’s increasingly common for web applications to live on only a single page. As you click through the views, the page never reloads. Everything is rendered dynamically in JavaScript.

Significantly, these dynamic web applications have become more complicated over time. As a result, web developers need new ways to manage the state of the application, reuse application components, and render changes to the DOM. Therefore, frontend JavaScript frameworks and libraries have arisen to make building dynamic web applications easier.

On the whole, three major competitors have risen to the challenge. Angular, the first on the scene, comes from Google and includes a full-featured framework and ecosystem. React, currently the most popular option, is from Facebook is a library that offers greater flexibility in exchange for sacrificing some stronger features of Angular. Finally, Vue the simplest and easiest to learn option, is a great open source option for many projects that don’t need the big overhead of React or Angular.

Unsurprisingly, the React vs. Angular vs. Vue debate has consumed the web development community. Indeed, it seems like every web developer has their own preference of frontend framework. In this post, we won’t pick any favorites. Instead, we’ll take a look at the strengths and weaknesses of each project to choose the best option for your use case.

Modern JavaScript Frameworks

The basic task of these frontend frameworks is updating the Document Object Model (DOM) so that the user sees dynamic information on the screen as they interact with the application.

Of course, JavaScript developers can make changes directly to the DOM without the need for a framework. Provided that those changes are simple and fairly constrained, it may make sense to write the whole application in vanilla JavaScript. However, modern applications often involve multiple changing variables and moving parts that make writing raw JavaScript cumbersome and error-prone.

Each of these frameworks introduces a learning curve but ultimately makes managing the state of your application simpler. They all do so by introducing the concept of a component in your web page. In general, components can have their own state. Additionally, they can be nested so a parent component can change, create, and destroy child components as needed. Unquestionably, the reusable stateful component model is the key innovation of all these frameworks.

React

React comes from Facebook, and it was open sourced in 2013. In particular, React introduces the concept of a virtual DOM. When React components need to make changes to the state of the application, those changes get reflected in a virtual version of the DOM. If multiple changes conflict or converge, those conflicts get resolved in the virtual DOM before being rendered on the page. React’s event loop regularly compares the state of the virtual DOM to the real DOM and only re-renders components that have changed.

As a result, we call React a UI library, rather than a true web framework. Indeed, React components can be deployed inside HTML pages as needed. However, React comes with some setup challenges as React’s JSX syntax needs to be Babel compiled to JavaScript. As such, you’ll need Webpack module bundling to get React apps working. Of course, React provides a standard out-of-the-box implementation via create-react-app. Nevertheless, if you need custom configuration, you’ll have to write your own webpack setup, which can be a challenge.

React’s flexibility, community, and Facebook-backed pedigree has catapulted it to being the most-popular of all JavaScript frameworks. It’s also fairly easy to learn the basics of React. However, things can quickly become more complicated in large applications.

Angular

AngularJS was the first popular JavaScript framework on the scene in 2010. Developers at Google wanted a framework that would allow them to build powerful applications without manipulating the DOM directly. Instead, Angular applications involve models (data) and views (UIs) that have bi-directional data binding. As a result, Angular monitors changes in both and updates the other when a change is detected.

As of Angular 2, Google completely rewrote Angular to be a more comprehensive web framework for building entire applications. In addition, Angular 2+ required developers write the application in TypeScript, a superset of JavaScript. Currently, Angular is version 7.

Overall, the architecture of an Angular application revolves around Services and Components. For example, services provide data and functions to components. When a Service has new information, it injects that new information into the component and that triggers a property binding change to the view that the user sees. On the other hand, when a user interacts with the view/UI, an event binding triggers a change in the component.

Angular is a complete web framework for building complex sites. As a result, it’s more often used in enterprise. Additionally, it has a steeper learning curve and longer startup time than its competitors. However, it makes up for that startup time in fuller features for complex applications.

Vue

Vue is the simplest option of this list, but that doesn’t mean it’s not powerful. In fact, it combines many of the best lessons learned from both React and Angular. It’s flexible and portable similar to React, but it can also provide fuller framework-like features of Angular.

Additionally, Vue has the shortest learning curve. That said, it’s far less popular than React and Angular for large-scale applications. While Vue can work well in certain applications, most projects will choose React or Angular for their pedigree, community, and extensive resources.

React vs. Angular vs. Vue: Making Your Choice

Trying to build something flexible and fast? Try React or Vue.

Security, complexity, and enterprise-level use are a concern? Pick Angular.

Want to inject some dynamic JavaScript into an otherwise static page? Vue or just vanilla JS are your best choices

Looking for the industry leader with a lot of developers who know the framework? React is the best, followed closely by Angular

Need help making the choice? Intertech has developers experienced in all the above frameworks. Get in touch today, and we’ll help you choose.

About Intertech

Founded in 1991, Intertech delivers software development consulting and IT training to Fortune 500, Government and Leading Technology institutions. Learn more about us. Whether you are a developer interested in working for a company that invests in its employees or a company looking to partner with a team of technology leaders who provide solutions, mentor staff and add true business value, we’d like to meet you.

…

Originally published at Intertech Blog.