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!

Join the conversation...

Posted by r8119787
October 31, 2017

Vue.js become a Spring MVC. It's similar to AngularJS.
And also, everyone abandon Struts2.
I can't imagine any advantage for React user moving to Vue.js.
Posted by TomCumming3
October 26, 2017

Why companies should use Angular over React.JS

I (Gordon T Cumming) have been into AngularJS (Angular 1.x) since 2012 and then Angular from the start – 2014 when Angular 2 was in its many alpha releases and have lived and breathed it ever since, with it now (Oct 2017-rc.6) almost at 5.0.0 - Although I’m from a .NET C# background.

Angular is a complete mobile first, opinionated framework – created by Google, meaning it has everything a company needs to create a fully featured application – which can run on the Web, mobile devices (iOS and Android) and Desktop - compared to React which is just a library.
Angular – originally Angular 2 (Sept 2016), then Angular 4 (April 2017) and now Angular 5(Oct 2017)
It is a more complex framework to learn, which entails,
being written in TypeScript language (based on EcmaScript stds) using the Webpack (Module loader), RxJS (Reactive Extensions for JavaScript) and Observables.
It has lots of features but these provide you with an application which is
very responsive, fast, scalable, understandable|maintainable, testable and small (usually Kbs)
(unit|integration|end to end)

Angular is a Component based framework with a component tree hierarchy with the AppComponent as its root, but also has Modules normally 1 AppModule which holds all the Components, but then as the application grows, it lets you create other feature modules – each with its own set of Components and hence forming a module hierarchy. These feature modules allow for an Angular feature called Lazy Loading whereby – we only load the module which we want to initially use and then lazy load the rest. These can be loaded in the background (aided by Pre-rendering) so these modules can then be loaded quickly when eventually needed.
Angular also can use AoT (Ahead of Time) Compilation – whereby the app’n is compiled offline and then the Compiler is removed from the code (50% size reduction) This also means security is better.
Server side rendering (SSR) via Angular Universal means we can initially load only HTML + CSS and then load the Angular (JavaScript) in the background) – which means a lightning fast load.

Although Angular is complex, it makes getting started very easy - especially due to the Angular-CLI – with ng new myProject creating a complete Angular application.
- which includes Components| Modules| Bootstrapping |Styling but also routing, testing (unit|E2E)
It has simple commands to add Components| Directives| Pipes| Modules| Services| Guards |

Angular is normally written in TypeScript which although a bit more complex to learn, it makes writing application code much easier than JavaScript and this code is much simpler to understand and maintain. It provides strong static typing, interfaces, classes and inheritance. Hence this makes it look like a high level language for other developers. It is based on EcmaScript – the modern JavaScript and so lets you write code using modern JS features like (x)=> (x+1) instead of function(x){ return x+1;} This means when modern browsers implement these ES stds – it will be much faster.

Webpack utilizes tree-shaking – a way to remove unused code from modules to minimize the size of applications and produce a set of small JS bundles as the final output code.

The original AngularJS used Promises – for asynchronous code, but Angular uses Observables and RxJS (Reactive Extensions for JavaScript) which helps make Angular very responsive. Observables have advantages of being chainable, cancellable but also can be converted to Promises if required.

Angular has more and more features coming out with each release (a new major release + 6months) with the Angular-CLI being modified to include Schematics to manipulate File systems and utilize Object Models. These features help to speed it up, make it more responsive, faster, more testable and reduce its size. It also has features coming to allow for testing – force SOLID principles.

ReactJS is just a library and requires many other libraries to implement a complete application.
It is a UI library which has extremely fast change detection – due to its virtual DOM and was created by Facebook to compete and be faster than AngularJS (Angular 1.x).
It is smaller and easier to learn but does not have the features of Angular built in to it – It requires many other 3rd party libraries to be added to create anywhere near the functionality of Angular.
React is written in JSX which although relatively simple, it is JavaScript based language but does not cater for the modern JS (EcmaScript) features.
React applications normally use Flux (more likely Redux) for large scale applications – this uni-directional store with Actions and Reducers – is also used by Angular for large scale applications but Angular normally uses ngrx.

Many companies started using ReactJS when they realized the problems with AngularJS (Angular 1) with its lower speed and change detection problems of $digest cycle and $scope.apply() - and also due to Google taking 2 years to finalize the Angular 2.0 (Sept 2016). These companies may feal they are stuck with React, but for new companies or companies that have recently started using ReactJS, Angular is definitely the better more professional way to go. Especially for large scale, enterprise applications, then Angular has lots more advantages and features built into it rather than the liquorous allsorts, cocktail, concoction of ReactJS.
React although fast has a problem with its GC (Garbage Collection) meaning that the more the application runs, the slower it gets!
Posted by nodecotics
October 21, 2017

I will add that jquery is part of React. This means you can still use the classic jquery .ajax method to easily do Ajax requests without Axios etc. not to say that Axios still makes things a lot easier.
Posted by srk289
October 11, 2017

Update: Facebook has since updated its licence to MIT
Posted by Mobilunity
October 10, 2017

Your comparison is great, very insightful. It's always a matter of some requirement, isn't it? It's not that hard to choose between these great technologies when you have particular requirements to follow. After all, each of them is better than the other in different cases. Anyway, if you gather all the differences in one table you would get something like this:
https://mobilunity.com/blog/a-react-vs-angularjs-developer-ways-to-hire-a-right-person/
Posted by ManPan45533575
August 31, 2017

React's JSX is very easy to learn, compared to Angular it's very straight forward. However it's only a UI Javascript library, so you need additional libraries to complement it for:
- form validation
- routing
- localization