An epic battle between Angular 2 and React

June 18, 2017

JavaScript popularity continues its rising and the number of web development frameworks and libraries based on it continue increasing. Today we will compare 2 of most used JS frameworks for building SPA applications – Angular 2 and React.

What is Angular 2?

Angular 2 is a framework that makes it easy to build applications with the web, supported by Google. It is is often referred as a MVC framework. Angular 2 combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. Angular 2 empowers developers to build applications that live on the web, mobile, or the desktop.

How Angular 2 works. Let see angular architecture:

What is React?

React is an open-source JavaScript library for building user interfaces. Maintaining by Facebook it is rapidly increasing in popularity. React allows developers to create large web applications that use data which can change over time, without reloading the page. Its main goal is to be fast, simple and scalable. React processes only user interfaces in applications. This corresponds to View in the Model-View-Controller (MVC) template, and can be used in combination with other JavaScript libraries or frameworks in MVC, such as AngularJS.

As React is just a library it does not provide any architecture itself. Most used architectures are Flux and Redux. How React works:

Trends:

What do Google Trends tell us?

(https://trends.google.com/trends/explore)

But what about the job trends?

(https://www.indeed.com/jobtrends/)

We can see that Angular is a winner in the 2 categories.

Learning Curve:

Angular 2: Angular 2 itself is a huge library that requires more time to learn. It has a steep learning curve because of its funky syntax and large scope. Also you should take in mind the fact that ng2* developers usually have to invest some extra time to learn TypeScript when they get started with their first Angular project

ReactJs: Compared to Angular 2, React has a way smaller API surface and less custom syntax to learn. React is just a small library, based on Javascript and you can learn it in 1 week. But it has a serious paradox of choice problem and it will take more time to learn the best practices, as there are a lot of ways in which you can do the same thing or go wrong.

Community:

Community is the prime factor to consider while selecting a framework. A large community means more questions answered, more third-party modules, more YouTube tutorials.

Angular 2: Angular 1 is definitely the most popular with largest number of community members. Also, it has the highest number of StackOverflow questions.

While the AngularJS 1 community is very large, the Angular 2 community is just gaining ground.

Angular 2 is just over 25k stars on Github. There are ~15 000 repositories on Github that contain "Angular 2" or "ng2" and are written in TypeScript

React: There’s a quickly growing community, but it isn't big enough to provide all solutions. Also the community is young, so it’s possible you’ll have to do a lot of “reinventing of the wheel” in order to get the specific features you’re looking for.

React is over 69K stars on Github. There are 95, 500 repositories containing the word "react" in them, roughly over nine times more than what Angular 2 has. Still, one of the big reasons for the large number of repositories is that React comes with just a few built-in functionalities and relies on its community to provide it with the needed tooling to develop full-scale applications.

(https://insights.stackoverflow.com/survey/2017#technology)

Performance:

So many people think that tech selections should be all about performance. In the performance battle between Angular 1 and React, React won easily due to Angular 1 dirty checking and digest cycles. But Angular 2 has cleaned up its act. It’s fast, thanks to its highly sophisticated change detection mechanisms.

Angular 2 doesn't do deep object comparison. If items are added/removed to/from an array, change detection won't detect it. The same for object properties as long as they are not directly bound from the view.

React is based on concept of diffing the DOM of the new state with the previous state, using Virtual DOM and only render the difference. Manipulating the DOM is slow. Manipulating the virtual DOM is much faster, because nothing gets drawn onscreen.

There’s not much of a difference between React and ng2, both are performance-wise.

Comparison:

	Angular 2	React
Type	Framework	Library
Company	Google	Facebook
Language used	TypeScript	JSX
Size prod	140KB	145KiB
Size dev	1,4MB	726KiB
Github stars	25,021	69,179
Code Design	JS into HTML	JS centric
DOM	Regular DOM	Virtual DOM
Learning Curve	Difficult	Easy
Unclosing Tags	No	Yes
Binding	Two-way	One-way
MVC	Yes	View layer only
Tooling	High (CLI)	High
Packaging	Medium	Strong
Rendering	Server-side	Server-side
3^rd party library compatibility	High	High
Cross-platform	Ionic 2/ NativeScript	React Native
Development Time	Medium	Low
Project Setup	Easy	Difficult
Churn*	Reduced	High
Flexibility	Inflexible (prescriptive)	Flexible

Stuff in Angular 2 You Won’t Find in React:

Layer V and C in MVC - In AngularJS the MVC pattern is implemented in JavaScript and HTML. The view is defined in HTML, while the model and controller are implemented in JavaScript.

TypeScript - The biggest selling point of TypeScript is tooling. It provides advanced autocompletion, navigation, and refactoring. Angular 2 with typescript generally has better IDE support. There is a bunch of hints and error messages flow in the Microsoft Visual Studio Code.

Dependency Injection - Angular has its own dependency injection framework, and you really can't build an Angular application without it. DI is a coding pattern in which a class receives its dependencies from external sources rather than creating them itself. For comparison React has not any concept of a DI. That is, instead of having a container that knows how to create objects and passing in dependencies, you pass them explicitly by passing props to the component when you instantiate it.

AOT compilation - Angular 2 + RxJS is pretty huge. Almost 800k minified. That’s about 4 times larger than React + Redux. But ng2 has the ability to do Ahead Of Time compiling (AOT) and tree-shaking. With a correctly configured production build, you can reduce the bundle size dramatically using only the features actually used in your app, which give the final bundle a much smaller footprint.

Stuff in React You Won’t Find in Angular 2:

JSX - Instead of templates, React has JSX, which compiles to JavaScript at compile time. In this way, errors can be cached at compile-time. It’s a Frankenstein hybrid of JavaScript APIs and markup. That means you have to learn its quirks, such as using `className` instead of `class`. For comparison Angular 2 relies on HTML templates, but you have to learn stuff like *ngIf and *ngFor. Also when you make a mistake, they fail at runtime. Fortunately with -aot compilation, we can catch template`s errors on Compile time.

React and Angular both are great technologies that give miscellaneous opportunities in development. Angular is really good at declarative solutions, but it lacks the freedom and simplicity of React.

Here is a useful list to help you make the decision:

For cooperation developers/larger projects/beginners, it’s a good idea to start with Angular 2 which simplify lots of specific problems and bring your architecture in order
if you are a start up, go with React
if you like simplicity and want something slimmer and less prescriptive, pick React
If you love the tech choices and you can live with the additional boilerplate overhead, pick Angular 2
if you prefer JavaScript, try out React
if you 💙 Typescript, use Angular 2

Finally there is no "silver bullet", you need to choose the right solution that will suit your challenges, goals, and long-term strategy.

*I’ll sometimes abbreviate Angular 2 “ng2” — a common practice in the community.

*When we use the word churn in the JavaScript community we are referring to the overwhelming rate at which JavaScript frameworks and libraries are created, adopted and then abandoned.