Angular vs. React: An epic battle for developer mind share

Two of the hottest open source web dev tools butt heads over your next project

Comments

When the boss says it’s time to pour data into the screens of a bazillion visitors to your website, you have dozens of options for getting up and running fast. In the old days, most work was done on the server, but today much of the heavy lifting has been pushed to the client, making for a zippier, more interactive experience, because the client often has cycles to spare.

There are a number of tools for client-side code that shoulder the job of laying out the data and interacting with the user. Two of the latest leading contenders are Angular and React, a pair of open source projects from Google and Facebook, respectively. Angular and React are great tools for delivering complex, data-driven web apps and websites. But they offer distinct approaches, the kind of differences that generate long philosophical debates between coders.

Is Angular the right choice for your team? Or is React the perfect fit for your next project? Here is a breakdown of where each tool wins to help you decide.

Where Angular wins: Being a full framework

When you launch a project with Angular, much of the CRUD work has already been done for you. Most mechanisms for creating, updating, and deleting data objects are baked in. All you have to do is give the objects and their respective fields proper names, then fiddle with the CSS rules for displaying them. The structure is already in place for creating and manipulating data in these fields. In other words, Angular is a full framework, an empty vessel awaiting your brilliance.

Where React wins: Being “just” a library

Many React detractors say it’s just a library—merely a collection of routines for popping data onto the screen. But isn’t that true of every JavaScript file that makes its way to a browser? What they really mean is that React is more a set of tools with fewer assumptions of how you’re going to structure your page. React doesn’t offer a complete vision but provides the means for you to build your own vision quickly and efficiently. There’s power in that flexibility. And for those who don’t need a prepackaged vision, only a little help with the heavy lifting, being “just a library” makes React a great tool.

Where Angular wins: The structure to customize from the top down

Another way of looking at the difference is to understand that Angular already comes with much of the structure already in place. Your job is to dig down and customize it. Angular programmers start with the big picture and fill in the details. If you want the standard Angular structure, you’re in luck because it’s already been built for you.

Where React wins: The flexibility to build from the bottom up

React programmers often consider themselves as building up using React as their support. This metaphor is a bit strained because there are no ups and downs in code space, but it illustrates how one might consider the differences between Angular and React. React programmers add and add until they’ve completed their app. And if you want something out of the ordinary, with React, you can build it up without bumping into the preconceived structure of a framework like Angular.

Where Angular wins: TypeScript

Angular uses a variant of JavaScript called TypeScript, so named because it mixes strong type checking with JavaScript’s general structure and approach. It’s like adding suspenders to your pants. The definitions of variable types get stripped away when the TypeScript is compiled into JavaScript for deployment. Any mistakes are caught and flagged long before runtime. Of course, you don’t need to use TypeScript, but many developers do, and that makes it more of a tradition than a rule. Still, it adds a structure that keeps the code a bit cleaner and safer.

Where React wins: Standard JavaScript

React is built with standard JavaScript, and you will probably use it with standard JavaScript. There are some, though, that mix in TypeScript because they want to. It all still works because TypeScript compiles to JavaScript. It’s your choice.

Where Angular wins: HTML, with some JavaScript mixed in

The first thing an Angular developer usually creates is HTML. The parts of your pages are spelled out with tags and later created with Angular code. Developers like to say that Angular is mainly HTML with some JavaScript mixed in when necessary. This often makes it more accessible for designers and others who grok HTML tags but get put off by the complexity of JavaScript. They can think in HTML and stick their toe in the JavaScript deep end only when they need to go there. If you’re a web developer who tends to consider HTML first, Angular allows you the comfort of considering your page as a collection of HTML tags, with JavaScript as a bunch of little elves that magically do the chores in the background.

Where React wins: JavaScript, with some HTML mixed in

The center of a React app is a JavaScript program that spits out the HTML that defines what you see. If you need to specify any HTML, you give it to the JavaScript and the JavaScript will emit the HTML scraps when it’s good and ready. This means that JavaScript-loving developers will feel more at home. You’re writing a program, not markup. If you think like a programmer, creating an app with React feels natural. You write functions and pass around data structures. The magic HTML goes out the back end to the browser. It’s exactly like writing a program in your first class.

Where Angular wins: Declarative programming

Some programming language experts like to say that a “declarative” language lets the programmer express what needs to happen and the language does the rest. In the case of HTML, that means the programmer specifies the parts of the document (headlines, lists, paragraphs) using tags (<h1>, <ul>, <p>) and the browser does the work of figuring out how to lay them out, so the information looks good on the screen.

Where React wins: Imperative programming

Many of the now classic languages like C, Java, and JavaScript are said to be imperative languages. That is, we tell the computer which basic instructions to execute and in what order to execute them. It’s much lower-level than declarative programming, although the definition is subject to debate. With React’s JavaScript foundation, it's familiar to anyone who codes in the classic tradition.

Where Angular wins: HTML extras

HTML is nice in the way that a factory standard Honda Civic is. But if you want a bit more beyond the stock unit, Angular has you covered, adding enhancements to HTML like a Civic owner might add tanks of nitrous oxide or fatter tires. Angular includes extra attributes for HTML tags that are eventually parsed by Angular to define your app. You don’t really write a loop; you add the ng-repeat directive to a tag and Angular does the rest. You’re building something new, so why not use a few extras?

Where React wins: Pure JavaScript

React programmers like to brag that their code is pure JavaScript. There are no extra keywords or special features to confuse anyone who looks at it. This means that newbies simply need to learn the standard function names and data structures of JavaScript. There are no new features to use (and confuse), and that also makes it a bit easier to strip out parts of the code and reuse it elsewhere.

Where Angular wins: A new path

Learning Angular often feels like a rebirth or fresh start. It offers a pure, new world where you can create wonderful apps using the Angular method. Even if you know HTML and JavaScript through and through, you have to learn how to use Angular’s directives the right way. For some this may be a turnoff, but for many, exercising new neural pathways keeps the work fresh.

Where React wins: Tradition

React is more a continuation than a new path. If you know JavaScript, you can start threading together code by writing more JavaScript. It’s not “new.” Sure, you have to learn the React API and the right way to pass data to it, but the whole process is a familiar friend to JavaScript programmers, with a slightly different look, thanks to new function calls and the API.

The big picture: Why not both?

Angular and React are both solid choices—so why bother choosing? Yes, they approach the problem of putting together webpages differently, but they aren’t matter and antimatter. They can co-exist without a world-destroying explosion; ng-React is only one example of how a bit of coding can make it possible to use a React component in Angular. If you follow this path, you can pick and choose the best for each corner of your app.

In the end, many of the distinctions between Angular and React are small. The real challenge is in designing your web app, planning the layouts, and deciding what happens to each click. The hard work is imagining your app and finding a good way to communicate with your user. Both Angular and React do a great job of putting components on the screen, collecting input and sending it back to the server. The real job is up to you.