Today, most web applications are built with robust JavaScript frameworks. Two of the most popular of these are React and Angular. Both dynamically manage page content and interactivity, but React and Angular operate somewhat differently.
Angular is an older framework and has steadily been losing market share to React, but it remains a powerful presence in today’s developer frontend ecosystem. We’ll explore the whys around those dynamics, as well as the strengths and weaknesses of each framework to help you figure out what’s best for your project.
React is an open-source JavaScript library originally developed by Meta (then Facebook). Currently, React is maintained by Meta and a community of developers. React is declarative—developers craft views that respond to state data, and React updates and renders components as state changes.
React overview:
- Component-based architecture. React components are reusable, making it easy to build complex applications with similar views and subviews. Everything in a React app is a component, from the entire application down to an interactive button. This is made possible by the ease of embedding React’s components inside one another. And using props, data can be passed down components.
- Virtual DOM. One of React’s core differentiators is its virtual DOM for updating and rendering UI. The virtual DOM is then efficiently reconciled with the actual DOM; this tiered approach improves the efficiency of intrapage updates.
- Functional support. While React’s original design only allowed for class-based components, which were bulky, most contemporary React projects depend on functional components. Functional components are functions that accept props as arguments, but still support state using React’s useState function (known as a hook).
- Server components. Many React applications leverage server components—components that exclusively render on the frontend servers. Server components enable applications to render an application into HTML so the initial first paint loads faster.
- Unidirectional data flow. Data only flows down the component tree in React. A child component cannot update the data of a parent component by modifying it directly; instead, child components need to accept a mutation function as a prop that can be invoked to modify the data. This paradigm forces developers to be thoughtful about which data is able to be accessed and where it is modified.
- JSX. React supports JSX, an HTML-like syntax that allows for embedded JavaScript in between curly brace demarcators. With JSX, developers can use native JavaScript features like .map to create dynamic views.
There are various reasons why React is a popular choice among developers—here’s a handful of those:
- Easy to learn. React’s code often looks a lot like vanilla JavaScript. React is more of a library than a framework; it gives tools for building a responsive application but leans on vanilla JavaScript for a lot of subprocesses (for instance, printing out a list). And because functional components are just ordinary functions, the list of React features you need to learn to spin up a rudimentary application is short. To make things even easier, there are a lot of frameworks that expedite installing and organizing a React application. These include Create React App, Next.js, and Gatsby.
- Extremely fast. React’s virtual DOM technique makes page rerenders fast and lightweight. It minimizes how much of the DOM tree undergoes changes—e.g., the app’s navbar doesn’t re-render every time a modal changes.
- Open-ended code. For many developers, React’s un-opinionated approach on how to organize a codebase makes React flexible and easy for them to create complex applications with niche needs.
- Huge community. Being the largest framework, React developers have thousands of tools and libraries that plug seamlessly into React applications. For common UI features, like sliders, file-pickers, markdown editors, or time-pickers, there are plenty of options. Most third-party SDKs come with prebuilt React components alongside their vanilla JavaScript libraries. React’s community is so large that there are ample debates between various React frameworks, such as design frameworks like styled-components and emotion.
- Easier debugging. Because React is declarative, developers don’t need to track incremental renders when debugging, just incorrectly configured states or views.
- Faster first paint. With React’s server-side support, the first HTML paint could imitate a rendered React app, minimizing initial load.
An additional benefit of ReactJS is that there’s some reusability for mobile apps via React Native, a mobile app framework built on React. However, React and React Native code aren’t inherently interchangeable; they just follow similar design rules.
There are some disadvantages to React:
- Limited framework. React is just the “view” component of the MVC (model-view-controller) paradigm; React developers are tasked with building the models and controllers themselves. However, there are abundant third-party frameworks that’ll assist with this and plug directly into React. For instance, developers might use an ORM like TypeORM on the backend to define data models that are symmetrical with database tables; React has no opinions about how your data is handled on the backend or fetched on the frontend.
- Too much flexibility. React doesn’t espouse any explicit conventions on how code should be written. Because components can be both class-based and functional, and functional components have no predefined structure, React apps could look widely different from one another. Without the right internal guidance, this could result in developers writing wildly different code, leading to a messy codebase.
Both of these concerns with React, however, are addressed by third-party frameworks that establish how code should be structured. For instance, some teams use immer, which provides structure on how to deal with React’s immutable state (as a product of unidirectional data flow). React itself isn’t opinionated, but community projects scaffolding or plugging into React are.
Angular is an open-source JavaScript framework originally developed and actively maintained by Google. Angular is largely an imperative framework but has support for some declarative patterns.
Angular overview:
- Component-based architecture. Like React, Angular components are reusable, making it easy to build complex applications with repeated views and subviews.
- Templates. Templates are fragments of HTML that are called by components to render HTML. In Angular, these are separate things, while in React they’re just part of the same class or the return object of a functional component.
- Dependency injection. Dependency injection allows for services—but also primitives and functions—to be seamlessly accessible in a class.
- Directives. Directives are attributes that make it easy to manipulate elements based on data and logic. For instance, a directive could be used to decide which CSS class should be added to an element’s classList.
- Two-way data binding. Unlike React, data can be modified in subcomponents of components, with those changes bubbled upward.
These are a few reasons why developers opt for Angular:
- Complete solution. Angular is a full MVC solution with support for routing and testing. Angular is very prescriptive about how an application should be organized and structured, which can be limiting for some developers, but it’s seen as a strength for teams that want to enforce structure.
- Enforced type checking. Unlike React, the Angular framework is primarily a TypeScript-based language, which means most Angular projects have robust type checking. (Many React projects are also strongly typed, but it’s optional.)
- Flexibility on services. Angular’s services allow developers to access stateful features (like data kept in sync with the database) at any level of the component tree.
- Robust code sharing. Angular has a mobile framework known as NativeScript with strong support for sharing code between desktop and mobile applications. However, NativeScript isn’t as popular as React Native, which is multithreaded and more performant.
The disadvantages of Angular may have contributed to its general decline.
- Steep learning curve. Angular is tough to learn! Not only do developers need to be proficient in TypeScript, but they also need to learn Angular’s complex structure of separating components, templates, directives, and dependency injection. A good way of framing this is in contrast to React: a lot of React code is just vanilla JavaScript using React as a library, whereas most Angular code uses Angular functions and features.
- Uses real DOM. Angular rerenders the real DOM tree with application updates, which can lead to laggier applications and more intensive memory utilization.
- Verbose code. Angular templates don’t look a lot like native HTML, which can result in denser code. Additionally, Angular’s encouragement of dependency injections might give developers flexibility, but it can also lead to messier code.
- Messy data control. While Angular’s two-way data binding can be a positive for some, it often leads to more chaotic code since that data could be modified at many levels of an application. This makes applications harder to debug. Conversely, React’s one-way data binding makes debugging issues easier because it limits where data is being modified.
There are multiple big differences between Angular and React—while they’re both component-based JavaScript frameworks, they encourage very different building patterns.
- Opinions. React is quite the open-ended library of tools for building reactive user interfaces, while Angular is a prescriptive framework that is opinionated on how products should be built and organized.
- Data flow. Data passed down through React components is immutable. This consolidates data’s mutability strictly in the data’s originating component. In Angular, data is two-way bound and can be modified at any level. This split somewhat betrays the prior point; while React is a more open-ended framework, it’s stricter about data control. Angular is looser with data but is stricter about file organization and tooling.
- Visual DOM vs. real DOM. React uses a virtual DOM, only reconciling deltas between the virtual DOM and real DOM on rerenders. Angular meanwhile modifies the real DOM directly, which can lead to a slower experience.
React is fantastic for applications that want to take a more open-ended approach to development and have lots of interactivity. However, it’s becoming increasingly rare to use a stock implementation of React. Most developers use an existing React framework like Create React App or Next.js—this expedites the development process of implementing routing, building and testing, and compilation.
Angular is best suited for massive applications that require a complex framework and don’t boast a lot of interactivity per page. While Angular components do offer interactivity, complicated pages can feel sluggish with Angular. It’s great, however, for enforcing code standards at large companies that are building (also large) products.
A lot of guides will conclude that there is no clear winner—that it depends on the specific needs of a project. While that’s true, React is the answer in many scenarios. It has the largest developer share, is the least prescriptive, and has a gigantic community of frameworks, extensions, and SDKs that make developing easier. It’s also faster, easier to initially spin up, has fantastic server-side support, and has a more widely adopted mobile app framework.
Typically, Angular projects are legacy projects, or they’re developed by veteran developers who prefer Angular’s opinionated style. Angular projects might also be preferred for companies that want a complete MVC framework from the get-go.
Overall, both React and Angular frameworks have played important and impactful roles in frontend development history. React might be winning on multiple turfs, but Angular’s still holding a fifth of the market share!
Building with React? Check out Retool’s round up of React component libraries or our robust React component library. Figuring out the best tools for your scenario? Check out this exploration of React versus Retool, and which might serve you best when.
Reader
