Tech 101: React JS vs Angular—What’s the Difference?

When you look at web developer job listings, you’ll see employers asking for skills like JavaScript, JavaScript libraries, JavaScript frameworks, and even specific platforms like React JS or Angular. But what does that all mean?

In a sentence: JavaScript (aka JS) is a programming language for building websites and applications, and JavaScript libraries and frameworks are tools for making it easier to code with JavaScript.

Meanwhile, React JS (a library) and Angular (a framework) are two specific JavaScript tools. But they aren’t just any JavaScript tools. A quick search of “React vs Angular popularity 2018” will lead you to this State of JS survey that shows React vs Angular vs Vue (another JavaScript platform) standing tall as the three most used JS platforms last year. This popularity is a direct contributor to the fact that thousands of companies are currently hiring developers who can use platforms like React.

Because React JS and Angular are two of the most popular JavaScript tools on the market they often get compared to each other. But how similar are they really? Is React JS better than Angular (or vice versa)? And which one should you choose? Let’s take a deeper look, and figure out which platform makes the best starting point.

Table of Contents

1. What is React JS?
2. What is Angular?
3. React JS vs Angular—What’s the Difference and Which One is Better?
4. Which Platform Should You Learn First?

What is React JS?

You can read a much deeper definition of React JS in our Tech 101: What is React JS guide, but here’s the TLDR:

• React JS is an open source JavaScript library used in web development to build interactive website elements (things like animated graphics, photo slideshows, and interactive forms).
• JavaScript libraries (like React JS) are tools for writing JavaScript code without having to rewrite repetitive
• JavaScript functions (e.g. stock animation effects or autocomplete search bar features) every time they’re needed in a project.

There are plenty of JavaScript libraries on the market, but React JS stands out due to its effectiveness for building user interfaces, or UIs. UIs are the collection of menus, search bars, buttons, and anything else people use on screen to interact with a digital product. React JS was created in 2011 by Jordan Walke (a Facebook engineer) specifically to improve UI development, and React has since grown into a widely used tool for front end developers (web developers who work primarily with the user-facing, onscreen features of websites and apps).

(back to top)

What is Angular ?

Now, the TLDR on Angular:

• Angular (not to be confused with its predecessor AngularJS) is a JavaScript framework that Google created in 2016 to use for building websites and web applications.
• Like React JS, Angular is used for front end development (including building UIs), but unlike React, Angular is a JavaScript framework (versus a JavaScript library), meaning there are differences in scale and scope (more on this in the next section).

Just like JavaScript libraries, there’s no shortage of JavaScript frameworks to choose from, but many developers like Angular because it’s both open source but also supported by Google. As an open source framework, Angular can be used and modified for free by anyone, while at the same time it’s officially updated and maintained by Google. This means Angular enjoys the best of both worlds when it comes to community and corporate support. Have your cake and eat it, too.

(back to top)

React JS vs Angular—What’s the Difference and Which One is Better?

According to Jesse DeOms, JavaScript Developer and the JS subject matter expert on our curriculum team, React JS and Angular are both great tools for writing custom JavaScript code and generating user interfaces. Still, in his opinion, one manages to edge out the other as a starter tool for building UIs (spoiler alert: it’s React). To understand why, let’s look at some of the differences between the platforms.

Thanks to Virtual DOM, React is Slightly Faster

Most websites are made up of HTML documents. When you visit a site, your web browser reads these documents and turns them into web pages on your computer, tablet, or phone. Part of this process involves browsers creating something called a Document Object Model (DOM), a representational tree of how the web page’s HTML documents are arranged. Developers add dynamic content to websites by modifying the DOM with languages like JavaScript (and by using libraries and frameworks like React JS and Angular).

When it’s time for your dynamic page content to change based on a user action (let’s say a user enters a comment in a blog post form and pushes the “Comment” button) the entire DOM needs to reload to reflect this change. This is exactly what happens if you’ve created your interface through Angular, since Angular uses a traditional DOM model. React JS takes a different approach though, using something called a Virtual DOM.

Virtual DOMs (like the name implies) are copies of a site’s DOM that are created when you build a UI with React. React JS uses this copy to see what parts of the actual DOM need to change when an event happens (like that user clicking the “Comment” button). After scanning the Virtual DOM and locating the necessary changes, React is able to selectively update those sections of the actual DOM (bypassing the need to reload the entire thing).

What does this mean for React vs Angular performance? In isolated instances, reloading a DOM or using a Virtual DOM won’t make an appreciable difference, and Angular creates perfectly high performing UIs even with the traditional DOM model. That being said, when you start dealing with hundreds (or more!) content refresh requests on a single page, the loading time saved through React’s Virtual DOM approach adds up to a significant site performance boost (and a better experience for your users). Because of this, React JS gets the slight nod in terms of React vs Angular performance.

React is Great for Specializing, Angular is More Like a Swiss Army Knife

If you’re trying to compare React JS vs Angular, one of the things you need to consider is the scope and scale of each tool. Even though React and Angular are often mentioned together, React JS is a JavaScript library, while Angular is a JavaScript framework.

To understand what this means, DeOms says to think of JavaScript frameworks as a “Swiss Army knife”—a complete set of tools to build a UI. On the other hand, DeOms describes JS libraries as more of a chef’s knife—a specialized tool to be used for a very specific purpose. As far as how this relates to React JS vs Angular, DeOms says:

“Although React and Angular are both open source JavaScript tools used to build User Interfaces, Angular is very prescriptive about how the full UI should be built, and that’s why it’s considered a UI Framework. React is much more specialized in how it helps developers build UIs—React doesn’t try to be a one-stop-shop or provide a complete recipe for developers to construct a UI.”

DeOms says there are pros and cons to both of these approaches. When DeOms calls Angular “prescriptive,” he’s talking about the fact that frameworks not only provide developers with a streamlined way of implementing JavaScript code, they also provide a template for how a website’s code should be written and organized. While JavaScript library code can be patched into a project as needed, frameworks create a structure for your entire site or app. This is helpful in the sense that Angular is an all-in-one tool for building a website or application from the ground up, but it also means Angular might be more than your project actually needs.

Using a smaller, more specialized tool like React, DeOms says, makes room for more versatility when your focus is building a UI. React JS allows you to use the library as much or as little as your project calls for, and React code can be arranged in multiple ways (vs Angular’s prescriptive format)—of course this requires a closer eye on whether you’re putting that code in the right places and in ways that follow best practices.

Meanwhile, React’s smaller scale means it won’t have all the same features out of the box that you’ll find with Angular—React can’t be used for some functions, like handling AJAX calls—but React JS library add-ons are usually a quick Google search or visit to the official React website away (in the case of AJAX calls, for instance, the React site has clear documentation on where to find the library extension you’re looking for).

It’s hard to pick a clear winner here, because it really depends on the specific needs of each web development project, but—unless you’re building a project from start to finish with Angular as your framework—React’s versatility will probably be easier to work with than Angular’s more template-based approach. And there’s also the learning curve to consider…

React Has Less of a Learning Curve

Since both React JS and Angular are effective tools for building UIs, it’s fair to ask: is one easier to use or learn than the other? DeOms says yes, and it’s the difference in learning curve that ultimately makes React a better starting point if you haven’t worked with either platform. So what’s the difference between both learning curves?

JavaScript is the common thread between React JS and Angular, since they’re both tools for using JavaScript code. This means no matter which platform you use, you’ll need some kind of foundation with JavaScript itself. DeOms points out that React JS is written in JavaScript, so learning JavaScript fundamentals is a must before working with the library. He recommends React users should be comfortable with:

• JavaScript variables
• Functions
• Strings
• Numbers
• Arrays
• Objects
• Loops
• If/else conditional logic

before writing and reading React code. Of course, that’s just a starting point. The more you learn about JavaScript, the more you’ll get out of a library like React.

Angular raises the bar a bit higher when it comes to how much JavaScript you need to know before working with the framework. DeOms says that Angular uses a generally more advanced level of JavaScript for its operation, and that it’s common for Angular developers to wrestle with things like state management bugs and performance issues that aren’t as common with React. Further, Angular development requires learning an Angular-specific language called TypeScript (a JavaScript variant used for implementing Angular code)—not a huge deal if you already know JavaScript, but it’s an extra step that makes the learning curve steeper.

(back to top)

So Which Platform Should YOU Start With?

While DeOms says that neither platform is a bad choice, React JS is his recommendation as a starting point for building UIs:

“React is a great place to start when learning JS libraries, because it’s a very powerful, in-demand technology with a tremendous amount of community support. The React team provides excellent documentation for your reference both as a learner and as an experienced developer. Because of its simplicity and reliability, React has shown steady growth since its initial 2013 release and will continue to be my top recommendation for building most custom, dynamic user interfaces.”

Add React’s performance perks and its significantly easier learning curve vs Angular, and you can see why it makes a great first JavaScript library. And remember: just because you start with one library or framework doesn’t mean you can’t learn more down the road. In fact, after you learn one it’ll only be easier to learn more of JavaScript tools moving forward.

(back to top)

Ready to build your own JavaScript and React JS foundation? Check out our Skillcrush Front End Developer + React JavaScript Course. This online class is designed to be completed in four months by spending just an hour a day on the materials, and it will teach you everything you need to know to start working with HTML, CSS, JavaScript, React JS, and more.