React vs Angular for Single Page Applications. Which one do you use?

Overview

Single Page Application (SPA) frameworks create a more natural experience in a web application. Eliminating full page reloads results in less wait time and blurs the traditional lines between the browser and host for the user. SPA’s are great for use cases that focus more on functionality and transactional capabilities than pure content consumption. Angular and React have dominated the Javascript framework space for some time now. Both are used widely and a great option for SPA’s. The basics are well documented, so we’ll try to focus on some key shared strengths and differentiators here.

Shared Strengths

First, a few shared strengths that set these 2 apart from the rest of the field:

Market Usage

React by Facebook and Angular by Google are both very popular and are used at scale for numerous applications by both large and small organizations. Their core repositories both have over 1,000 contributors and with well over 10,000 commits. These factors drive the developer community, both enhancing the platforms’ feature sets and providing supplemental tools and libraries to handle all sorts of functionality. This leads to thriving developer resources.

Developer Resources

The maturity and support level for Angular and React are top notch. Keys to success in both initial build and long term maintenance are development tools, framework documentation and resources for developers to get help. 

For development tools, both frameworks allow for robust IDE’s to build with. At Melon, we primarily use Visual Studio Code (works great on a mac) or Webstorm. Being able to debug code in real time has a big impact on reducing troubleshooting time.  There are also CLI (command line interface) tools for bootstrapping and setting up projects like create-react-app and ng-cli.

React and Angular have a wealth of documentation and developer sourced information available on the web. The frameworks’ reference materials are comprehensive and often include sample code to assist developers. Also, the volume of community shared knowledge available to handle all sorts of development tasks speeds up development time and reduces developer frustration.

Language

Melon advocates for the use of TypeScript in React and Angular applications. This was a differentiator as Angular was the first to support using it, but now React does as well. TypeScript makes the code simpler and easier to read, and also allows for static checking. This has saved us considerable troubleshooting time on projects.

Performance

Angular and React have reasonable application size, as well as a performant architecture. React’s virtual DOM is lightweight and some consider it superior to Angular’s use of the Regular DOM. Angular, however, has made many strides in speed and has a slightly smaller app size. Given that, performance difference between the 2 is negligible for most use cases.

Differentiators

Development platform

React is a JavaScript component library whereas Angular is a fully featured application framework. This gives React an edge when it comes to the learning curve, however, in practice it’s necessary to understand more supporting libraries like Redux for state management or React Router for declarative routing. Angular has plenty of supporting libraries as well. Due to this, don’t select React for it’s simplicity over Angular, it’s not a fair comparison when it comes to delivering an application. Bottom line, they both take years to master.

Application Structure

Angular and React are both built off the concept of reusable components. React components can be class based or functional (all functional in React 16) but are only really handling the UI. The rest of the application is built with additional packages, and largely up to the developers that are building it. Without an experienced team to direct the architecture, a React app can be hard to get started in the right direction. Angular has a rigid structure based on modules containing components to define views and use services injected in for other functionality. This makes Angular itself more complex than React, but also less opportunity for poor architectural decisions.

Dev Details

Dependency Injection

Angular makes heavy use of dependency injection to make components reusable. React doesn’t support DI, though it doesn’t need to as you can pass in a function as a parameter to a component, instead of a service.