Angular vs React. Or is the new Angular really shit?

Hi All,

I want to talk about the most popular JavaScript frameworks. In my opinion, there are a bunch of useless comparison articles out there. Although they contain really interesting insights, there is no much use of it.

Lots of people say you can’t compare them because Angular is a framework and React is a library. On the other side, most react developers (the ones i know) add some libraries and turn it into a complete framework.

Wait, Maybe something else?

I am really curious about Angular and would choose it for small and medium applications, but for really big ones, undoubtedly, i would hack with React. But there there are a lot of other options. And some of them are doing really good, for example VueJS or EmberJs look really good. But i think the main competitive advantage for Angular and React is developer community. The only lib that can keep up with their popularity is jQuery, but let’s not consider jQuery as a competitor to those two.

So let’s get it started. Which is better, Angular or React ?

State management

I think, the biggest difference between Angular and React is state management. Angular comes with data-binding bundled in whereas React usually can’t live a long life without Redux which provides unidirectional data flow and work with immutable data. This brings to many discussions, which is better ? Data binding or immutable/unidirectional binding ? It surely depends on many aspects.

Templating

I think it is really worth it to mention how easy Angular works with templates. Having a simple UI for your data, Angular allows you to get desired result with the more logical approach to the user interface that demands less code and seems to be more obvious.

React requires functions to handle data representation. It means that you should define the way your that your data is displayed before it will be inserted into the DOM.

Sizes and Performance

As we know, Angular file size is much bigger than Reacts.

Angular 2 + Rx = 766K
React 0.14.5 + React DOM + Redux = 139K

GZipped versions

Angular 2 + Rx = 143K
React 0.14.5 + React DOM + Redux = 42K

But when you start including a lot of third-party libraries with React, the bundle size also tends to grow rather quickly.

Angular 2 performance may cause some problems when it comes to really big applications, because it creates a watcher for every binding in order to track all the changes in DOM.

On the other hand, React has brought into life virtual DOM concept. Every time an underlying data changes in a React app, a new Virtual DOM representation of the user interface is created. In other words, every time a user interacts with the website React creates a new virtual DOM. That is why React performance is stable when it comes to a lot of data as there are no watchers.

CLI

Modern frameworks trend to have a CLI tool. Angular’s CLI is doing quite good and saves a lot of time. Thanks to Angular-cli and its design, Angular is easy to scale. On the other hand, React has its own CLI, which was introduced recently, is not used that much.

Debugging

It is interesting how each of them handles debugging. Angular 2 and it’s runtime debugging tends to give you less information than React and it’s compile time debugging.

TypeScript and Flow

TypeScript and Flow are similar tools that focus on the same problem: JavaScript’s lack of static types. Ultimately, they both exist to help you write correct code. Both TypeScript and Flow provide gradual static typing capabilities. They also use a similar syntax for type annotations and declaration files.

If you’re working with Angular, you might prefer TypeScript because it’s the dominant language used in the Angular community. If you’re using React, on the other hand, you might prefer Flow because it easily integrates with Babel and other infrastructure you probably already have in place.

A lot of developers(especially React) are afraid of TypeScript. There is nothing to be afraid of. It is just ES6 + types. ES6 is a valid TypeScript code. It has been heavily influenced by Java and .NET, so if a developer has a background in one of these languages, they are likely to find TypeScript easier to learn than plain JavaScript.

Learning process

In Angular there are more things to learn than in React. On the other hand, you have to learn much about React best practices, as there are many ways that you can do the same thing or go wrong.

Angular reputation and which Angular version should you use?

I know that Angular is treated unfair from the JavaScript community. Many people express dissatisfaction with it. Actually, there are some reasons for that, but i think Angular 4 solved lots of problems. There was an immense shift from the original AngularJS to the new Angular. Performance and design were greatly improved in Angular 2.0 as compared to Angular 1(to my mind, you should use Angular 1 only if you are an expert in it and have strong deadlines). I think it’s a very productive framework that could be a lot more successful if there were not so much versions, so many changes. I had a chance to change Angular’s version from release candidate 5 to 6, and then to the release version. That nearly meant rewriting the whole applications. But now, Angular 4 seems really stable and reliable.

Conclusion

So is the new Angular really shit ?

No, it isn’t.

Here is my list of Angular-React usages.

If you like templates use Angular.

For big teams and projects React will be a better solution because It allows you to reuse components with less code and faster prototyping.

If you don’t like spending much time on setting up, use Angular.

For JS experts and enthusiasts React will be easier to master.

Better if you try both of them :)