ReactJS and AngularJS are two very popular ways to build interactive websites. Neither one is clearly superior to the other. Each has a distinctive approach, which will appeal to developers or not depending on their preferred styles. If you understand how they address the task, you’re in a better position to decide which one will work for your team.
ReactJS
Facebook developed the ReactJS library for its own use, then made it available as open-source code. It takes a reactive approach to building user interfaces; that is, components update themselves when their underlying data changes. Each component manages its own state, so the DOM isn’t cluttered with state information.
React works with a virtual DOM. Changing it is much faster than changing the real DOM, since it isn’t tied to the display. After making changes, React compares the virtual DOM to the real DOM and updates only the parts of the DOM where there are corresponding changes.
It’s possible to build React components either with straight JavaScript or with JSX. JSX is a syntactic extension to JavaScript which allows inline declaration of HTML elements and expressions within the HTML. In effect, templates go right into the code. JSX code compiles to JavaScript.
AngularJS
Google maintains AngularJS, a framework for Web applications. It uses HTML custom tags as directives to bind page elements to JavaScript variables. Its preferred approach is to create a tree of components representing the application. Each component has its own controller.
Angular comes with about 30 services, supporting functions such as asynchronous HTTP and timing. Developers can create additional services.
The framework has gone through three revisions; it’s now at Angular 4, having skipped over version 3. It’s built with the TypeScript language, which is a superset of JavaScript that allows static typing. It’s possible to write code for Angular in TypeScript and compile it to JavaScript.
Basic Similarities and Differences
Both React and Angular encourage a declarative approach to user interfaces. Creating dynamic elements with procedural code is painful and error-prone, and both of these systems make it unnecessary. They treat the user interface as a set of components, and they separate the management of a component from its appearance.
Beyond that, there are a lot of differences. The most basic is that React is a library, while Angular is a full-blown application framework. React deals only with the View portion of the application, while Angular provides everything necessary for an MVC Web application. Since Angular covers more ground, it takes more effort to learn it.
The React approach is centered in JavaScript (with or without JSX). You can easily define elements within the code and add or clone them as needed. Angular starts with the HTML page, where custom tags trigger the activation of directives. Directives can also trigger on attributes or CSS.
Architectural Philosophy
Angular applications most often use the traditional MVC architecture. They can also use the Model-View-ViewModel (MVVM) architecture, where the ViewModel expands on the Controller’s role by holding state information and isolating the View from the Model.
React, being concerned just with the View portion, can fit into a variety of architectures. One approach is to treat the Web application as just the View, talking to server-side business logic through an API. The MERN stack (MongoDB, Express, React, Node.js) is a popular choice. Express runs under Node.js to provide an application framework.
Facebook encourages using React with the Flux architectural model rather than MVC. With Flux, communication between the major divisions of the architecture goes in a one-way loop, from action to dispatcher to store to view and back to action. Several implementations are available. Many developers use the Redux state container to implement a Flux-like architecture.
Angular has a corresponding stack, the MEAN stack (Angular instead of React). Because Angular is a full framework, there’s more flexibility about putting business logic in the browser or on the back end. It’s also possible to use Angular with a simple back end and have virtually the entire application in the browser.
The Developer’s Viewpoint
These differences in design lead to many differences in coding practice. The respective approaches to data binding are an example.
Angular implements two-way data binding between the model and the view. It uses watchers to check for changes in either one; when triggered, they take actions to keep the two in sync. React uses one-way data binding, or perhaps it would be more precise to say that it doesn’t have a distinct controller. When something happens in the HTML, such as clicking a button, it triggers an event which notifies the component. The component updates the virtual DOM, which React will propagate to the real DOM. It’s possible to do two-way binding in React with some extra effort.
What’s the practical difference? On the one hand, two-way binding is more prone to conflicts, since it involves two data sources. With one-way binding, the component is always in control. On the other hand, one-way binding requires setting up event handlers for user input, so more coding is typically needed, but it can be simpler to understand in the end.
React developers who use JSX benefit from compile-time checking, since dynamic HTML elements are part of the code. Angular “compiles” the HTML to extract custom elements and attach directives to them. Both approaches provide error checking, but React relies less on run-time checking. Changes to the page are less likely to break the application logic with React.
AngularJS provides dependency injection, using a declarative approach to loosen the coupling between a component and its data sources. React doesn’t have an equivalent, largely because it favors immutability. The React philosophy is that you don’t change the content of a component’s state; you replace it with a new value (which may be built from the old one). This reduces the chance of errors when comparing state values, but it’s inconsistent with the idea of updating a state by injection.
A Question of Style?
For all the programming details, the most persuasive difference between React and Angular may be whether developers prefer to build on a single framework or to put software components together as they like.
Angular provides everything needed to build an application. React needs to work with other libraries or on top of a framework. There are many choices. It’s even possible to use both together, with Angular providing the framework for React.
Another stylistic difference is whether developers like to work with HTML templates or put the templates inside the JavaScript. Angular’s custom elements go into the Web page, which has to be compiled before the browser can use it (much like a PHP page). Developers who like to work on the back end are often more comfortable with this approach. With React, the JavaScript code contains the elements, usually compiled down from JSX.
Both Angular and React are well-supported, widely used ways to create interactive Web applications that are much easier to maintain than bare JavaScript. Developers will have to consider many factors to decide which suits their needs better.
