Angular 4 vs. React

Since the release of Angular 2, the similarities between Angular and React have greatly increased. While React clearly beats Angular 1 from a performance standpoint, Angular 2 addresses virtually all of the issues experienced with its predecessor. With the most recent release of Angular 4, the decisions to use React vs Angular has become largely a matter of personal preference.

In this article, we discuss the key differences between Angular and React. We'll explore the debate as to which one is "better" as well as best use cases for each and why.

Preface: Angular 1 is NOT Dead

React easily beats Angular 1. Few will argue this. This article assumes Angular v2+ for all comparisons to React. It is worth mentioning that Angular 1 is still widely used and even actively maintained by Google. There are still plenty of companies happily using Angular 1 today. while Angular 1 is far from dead, Angular 2 is a complete rewrite and addresses most of the major pitfalls experienced with Angular 1. For these reasons, the debate surrounding Angular and React assumes we are talking about Angular 2+.

But what about Angular 4?

It turns out there are only a few differences between Angular 2 and 4. Unlike Angular 2, Angular 4 is not a complete rewrite of the Angular framework, but rather the latest version of "Angular 2" For more on Angular 4, see Angular 4 vs Angular 2.

Angular vs React: Which is Better?

Like all other comparisons online, the answer is "it depends". In fact, the notion of one being "better" or "worse" is an inaccurate assessment. Both have comparable strengths and weaknesses. Both can be used for the same reasons.

Which to use and why

Choosing Angular vs React really boils down to what your needs are as a development team. When deciding whether to use React or Angular, ask yourself these questions.

Framework or library?

React and Angular are fundamentally different. React is a UI component library whereas Angular is a full fledged development framework.

The difference? A framework is a highly opinionated set of features that dictate a certain implementation or approach to software. It's largely based on the idea of inversion of control and dependency injection. When you work with a framework, you are essentially configuring an existing implementation to fit your app's custom needs.

A library is simply a collection of functions that you can call within your own code. It's something you include within your own implementation. You include a library. A library does not include you!

The benefits of working with a framework like Angular is that many of the things you want to use are already built in. For example, routing and Ajax HTTP requests are built into Angular. With React, you have to import additional libraries to do the same things.

The main benefit of using a library like React is that you have a lot more freedom from a design standpoint. Since React is simply a library, you have the choice as to how you handle routing, testing, etc.

Learning curve?

Both Angular and React have steep learning curves. Angular is written in TypeScript, a superset of JavaScript that brings type checking to JS. Since TypeScript is heavily based on .Net and Java syntax, it can be confusing for developers experienced with dynamically typed, interpreted languages (traditional JavaScript). Although you can technically use Angular 2 without TypeScript, it's almost more of a headache dodging the TypeScript bullet than working with it.

As a framework, Angular also relies heavily on dependency injection (DI). This can take some getting used to as Angular introduces a lot of magical boilerplate code that's confusing and hard to pick up. Things like annotations, providers, decorators can be hard to understand with Angular 2.

React takes some getting used to as well. It uses JSX for rendering DOM templates. While JSX allows developers to construct templates directly in JavaScript code, it doesn't exactly match up with classic HTML. JSX syntax can take some getting used to even if your an experienced web developer.

Additionally, React relies heavily on third party libraries to supplement it's core functionality. For example, you need an external library for AJAX calls (Axios) and routing. While this provides developers with more architectural design freedom, it also makes things harder to standardize with React. This can drastically increase learning curves and the ability for new developers to "jump in" to an existing React code base.

Both React and Angular require preprocessing or "transpiling" of assets. While bundlers like Webpack make configuration easier, it's equally challenging to set up development environments for React and Angular for first timers. Unlike jQuery or other JavaScript libraries, you can't just throw in a CDN reference and start programming with Angular or React (this is not the case for Angular 1, so there's one thing the original still has going for it!).

How well is it supported?

React is backed by Facebook. Angular by Google. Next topic.

All jokes aside, both have great ecosystems with a plethora of supporting documentation online. While Angular's official documentation is a bit lacking, there are plenty of tutorials and forums online for working with both React and Angular.

The competing strength of these ecosystems keeps both competitive. While Angular has TypeScript, React has Flow for type checking. While Angular has a great CLI, React has create-react-app. React has React Native. Angular has Ionic. Angular Universal allows for server side rendering, but so does React's next.js.

The point is that these competitors have strong communities backing them. Each one seems to answer any deficiencies with their own solutions. For these reasons, choosing React vs Angular is largely a personal preference.

Performance?

Ever since Angular 2 abandoned the idea of bidirectional data flow and the digest cycle, the difference between Angular and React performance is negligible. Both React and Angular leverage unidirectional data flow and the virtual DOM to improve rendering. While React may have a slight edge in some circumstances, basing your decision around performance is silly with React and Angular.

Other considerations...

Angular 2 is open source while React comes with a patent clause. This hasn't stopped major companies like Netflix from using React, but something to consider when choosing React vs Angular.

Conclusion

You may be frustrated with another "it depends" article on Angular vs React, but this discussion highlights the reasons why one isn't "better" or "worse" than the other. Deciding which to use really boils down to your needs as a development team. Both Angular and React have strong communities backing them and aren't going anywhere anytime soon!