Angular 2 versus React: There Will Be Blood

Two of the most prominent front-end JavaScript solutions are Angular 2, a comprehensive framework, and React, a focused view library. How do they compare and which one should you choose for your next project?

To answer those questions, let‘s take a deep dive into the philosophies, capabilities, and tradeoffs of these two leading contenders. By understanding their strengths and weaknesses, you can make an educated decision and pick the right tool for the job.

History and Background

Angular 1.x, originally released in 2009, was developed by Google to help developers build complex single-page applications. It provided a full-featured MVC framework with declarative templates, dependency injection, two-way data binding, and an assortment of other built-in services.

However, Angular 1.x apps often suffered from performance issues as they grew in size and complexity. The "scope soup" that resulted from complex chains of two-way data bindings made it difficult to optimize performance.

Angular 2 was a ground-up rewrite to address these issues. It moved to a component-based architecture more similar to React‘s, fully embraced TypeScript and decorators, and introduced a new change detection system inspired by React‘s virtual DOM.

React was initially released by Facebook in 2013 and has rapidly grown in popularity. Unlike the complex two-way data binding and dirty checking of Angular 1.x, React introduced a simpler model based on one-way data flow and a virtual DOM.

React‘s philosophy is to do one thing and do it well. It focuses on the view layer and leaves concerns like routing and state management to other libraries. You can pair it with libraries like React Router and Redux as needed.

Component Architecture

Both Angular 2 and React are built around the idea of modular, reusable components that encapsulate their own view and logic.

In Angular 2, a component is a TypeScript class decorated with @Component. The component decorator provides metadata like the associated template, styles, and selector:

import { Component } from ‘@angular/core‘;

@Component({
  selector: ‘my-app‘,
  template: ``
})
export class AppComponent {
  title = ‘Angular 2 App‘;
}

In React, a component is simply a JavaScript function or ES6 class that accepts props and returns a React element describing what should render:

import React from ‘react‘;

function App() {
  return ;
}

export default App;

Both Angular and React components can contain child components, but they differ in how the parent-child relationship is defined.

In Angular, you nest child components within the parent‘s template using the child‘s custom element selector:

<parent-component>
  <child-component></child-component>
</parent-component>

In React, components are not globally registered with custom element selectors. Instead, a component imports its children and renders them inside its own render method:

import ChildComponent from ‘./ChildComponent‘;

function ParentComponent() {
  return (
    <div>
      <ChildComponent />
    </div>
  );
}

This makes dependencies clearly visible in the source code rather than hidden in the template.

Templates and JSX

One of the most striking differences between Angular and React is how they define component templates.

By default, Angular templates are defined in a separate HTML file:

<!-- app.component.html -->

<ul>
  <li *ngFor="let item of items">{{item}}</li>
</ul>

Angular extends HTML with a custom template syntax including loops, conditionals, and other constructs.

In contrast, React combines the view markup with the component logic in a single file using an HTML-like syntax called JSX:

function App() {
  const title = ‘React App‘;
  const items = [‘Item 1‘, ‘Item 2‘, ‘Item 3‘];

  return (
    <div>

      <ul>
        {items.map(item => <li key={item}>{item}</li>}
      </ul>
    </div>;
  );
}

JSX lets you use the full power of JavaScript in your view. While Angular‘s template syntax has a learning curve, JSX is just syntactic sugar over plain JavaScript.

This exemplifies a fundamental difference: Angular extends HTML, while React extends JavaScript.

One downside of React‘s approach is that markup is less readable in very complex components where display logic is mixed with a lot of JavaScript expressions and control flow. Angular‘s separate template file keeps the markup cleaner.

However, React lets you seamlessly extract portions of a complex render into smaller, focused components. This cleans up the original component and keeps all the relevant code for a child component in one place.

Change Detection and DOM Updates

Another key difference between Angular 2 and React is how they update the DOM when the component‘s state changes.

Angular 2 uses a "push" change detection strategy. Every time data changes, it triggers the change detector to immediately update the view and any child components. Angular‘s change detector then traverses the component tree from top to bottom in one pass.

This one-way top-down change detection is much faster than Angular 1.x‘s approach. However, complex chains of components and bindings can still lead to performance issues if not carefully optimized.

React‘s change detection is "pull" based. Instead of immediately updating the DOM whenever state changes, React waits until the component is rendered again. React then computes a diff between the previous virtual DOM tree and the new one, and updates the real DOM with the minimal set of changes needed.

React‘s virtual DOM diffing is highly optimized, and the library can batch together multiple state updates into a single re-render and DOM update for better performance.

State Management

In Angular 2, each component can have its own internal state. Components can also share state with their children using input bindings, and children can send data back to their parent component using output event bindings:

<!-- parent-component.html -->
<child-component 
  [item]="currentItem"
  (deleteItem)="handleDeleteItem($event)">
</child-component>

While this works for simple cases, state management can become unwieldy in larger apps with complex interactions between components.

Many apps built with Angular 1.x used libraries like Redux to enforce a centralized, unidirectional data flow. Angular 2 is more flexible, but the complexity of two-way bindings and long chains of inputs and outputs can become difficult to reason about.

React takes a different approach. Instead of each component having its own internal state, React encourages you to centralize your app‘s state and top-down data flow. This makes it easier to understand how data changes flow through your app.

While React doesn‘t prescribe any specific state management solution, one common approach is to have a top-level container component that holds the state and passes it down to presentational components via props:

function ParentComponent() {
  const [items, setItems] = useState([]);

  function handleAddItem(newItem) {
    setItems([...items, newItem]);
  }

  return (
    <ChildComponent
      items={items}
      onAddItem={handleAddItem}
    />
  );
}

The child components are "pure" functions of their props, making them easier to understand, test, and reuse.

For more complex state management needs, many React apps use a library like Redux or MobX. These libraries let you define a centralized store to hold your app‘s state and provide rules for how that state can be updated. React components then subscribe to the parts of the store they depend on.

Learning Curve

There‘s no doubt that mastering Angular 2 and React both require time and effort. However, developers often find React is easier to get started with.

While Angular 2 simplified many aspects compared to Angular 1.x, it‘s still a large, opinionated framework with many concepts to learn: modules, decorators, services, templates, directives, pipes, dependency injection, and so on.

React has a simpler, more focused API. At its core, React is just a library for rendering views. It has a component model similar to Angular‘s, but with fewer concepts to learn.

However, building a complete app with React does require understanding the broader ecosystem. You‘ll likely want to learn complementary tools like React Router for client-side routing, Redux for state management, a testing framework like Jest, and so on.

This is part of React‘s philosophy of small, composable tools. You‘re in charge of selecting the libraries you need for your app, which provides flexibility but can also be overwhelming. Angular aims to provide a more complete, unified solution out of the box.

Adoption and Ecosystem

Both Angular and React have large and active communities. They‘re used in production by many major companies.

Angular has long been a popular choice for enterprise developers. It‘s a mature, comprehensive framework with built-in solutions for common needs like forms, i18n, and animations. It also has powerful CLI tooling and an official style guide.

However, React has rapidly gained mindshare and surpassed Angular in some metrics:

React‘s ecosystem is vibrant, with a huge variety of open source components, libraries, and tools. React Native, a separate library produced by Facebook, lets you apply your React skills to build native mobile apps. And libraries like Next.js and Gatsby extend React to support server-side rendering and static site generation.

While React currently has more momentum, both frameworks have large and healthy ecosystems. Your choice between them is unlikely to be limited by lack of community support or tooling options.

Performance Comparison

Both Angular and React are fast, especially compared to Angular 1.x. They can both handle complex, data-intensive apps when used correctly.

However, in benchmarks of rendering speed and memory allocation, React often has an edge. For example, here are results from a study that measured performance of a simple to-do list component:

React‘s virtual DOM, one-way data binding, and simpler change detection model tend to translate into better performance, especially in complex apps with large component trees.

That said, performance is highly dependent on how you structure your app and what performance optimizations you apply. Both frameworks have a variety of techniques for cutting down on unnecessary re-rendering: pure components, immutable data, lazy loading, and so on.

Bundle Size

If reducing the size of your app‘s JavaScript bundle is a priority, it‘s useful to compare the sizes of the frameworks themselves.

The Angular Hello World app, with all the necessary polyfills and dependencies, weighs in at about 500KB minified and compressed.

A minimal React app with ReactDOM and no other dependencies is about 40KB after minification and gzipping.

So while Angular packs more functionality out of the box, that comes with a bigger bundle size footprint. React‘s smaller API surface translates into a smaller bundle.

However, the framework is only one part of your total bundle size. As your app grows in size and adds dependencies, the difference between Angular and React‘s bundle sizes becomes less significant.

And both Angular and React support a variety of techniques for reducing bundle size, like code splitting, lazy loading, tree shaking, and ahead-of-time compilation. With some work, it‘s possible to make even large apps load and run efficiently.

Summing Up: Key Differences

There‘s a lot to consider when choosing between Angular and React. Here‘s a summary of the key differences we‘ve covered:

• Angular is a comprehensive framework, while React is a focused view library that can be expanded with other libraries as needed
• Angular templates use a custom syntax and are typically in separate HTML files, while React combines markup and logic in JSX
• Angular has two-way data binding and a restrictive model for components interacting, while React has one-way data flow and a centralized state model
• Angular has a steeper learning curve and requires understanding more concepts out of the box, while React has a simpler, more focused API
• React often outperforms Angular in rendering benchmarks, especially for complex UIs
• An Angular app tends to have a larger bundle size footprint than a comparable React app

Conclusion

There‘s no definitive winner in the debate between Angular and React. Both frameworks have their strengths and tradeoffs, and both can be used to build powerful, performant web apps.

Angular may be a better choice if you value a complete, opinionated solution, have a large or complex app, or are already proficient in Angular 1.x.

React may be a better fit if you value flexibility and simplicity, are focused on performance, or want an easier learning curve.

Ultimately, the right choice depends on your app‘s specific requirements and your team‘s skills and preferences. The good news is that whichever direction you choose, you‘ll be using a modern, full-featured tool that can help you deliver an excellent user experience.

The best way to decide is to try building a small app in each framework. Only by experiencing the developer ergonomics and evaluating the results firsthand can you make a truly informed decision.