DEV Community

loading...
Cover image for React vs Angular, who wins the competition?
Brocoders

React vs Angular, who wins the competition?

zyulyamba profile image Yulya Originally published at brocoders.com ・5 min read

Choosing the best option for front-end development

React.js vs Angular. They are equally good at building web-based applications. Some of the world projects are built with React.js, others of the same size, with Angular.

Companies that use React.js and Angular

These examples emphasizing both React.js and Angular are suited for making large and scalable platforms, handling massive requests per moment.

React.js gets on the top position and overruns Angular with the number of Node Package Manager (NMP) downloads on GitHub. The difference is huge.

React.js is more popular than Angular

Last year's survey among Stackoverflow's users demonstrates that React.js is 10% more popular than Angular.

Technology survey on Stackoverflow

Does it mean that something goes wrong with Angular? Or, does it imply React.js offered better solutions than Angular?

Main principles of Angular

Let's figure it out by overviewing both systems in a nutshell. Angular originates from the startup products of Google, where the key of product development was to manage multiple processes in one place. Any unreasonable decision could lead to a problem and affect billions of user operations run in a moment.

Angular became a monolithic framework that predefined programming steps. Even though it enriches the development process with the services, controllers and modules, it dictates its own way of thinking and working. That places a distance between programmer and framework.

Along with that, there are a few other factors that make Angular less accessible:

  • Angular uses object-oriented programming (OOP), so its knowledge is hard-skill.
  • Developers should have a good command of TypeScript.
  • Knowledge of RxJS is a must-have too.
  • Apparently, the learning curve is very high. Unlike React.js, Angular demands more OOP-related experience from developers. That worked for Google, considering their team's high expertise. Angular was envisioned as an end-to-end solution and was compatible with their advanced programming culture.

Despite the complexity of the architecture, Angular has its indisputable benefits:

  • Two-way data binding automates synchronization between the Model and the View. Say, if the data was changed in the Model, it would be changed automatically in the View (DOM). Such a function takes off the need to write more additional code. Just imagine Google Drive's document, as a user types text in the document, it is viewed by another one in real-time. Such function is possible due to the Two-way data binding.
  • Dependency injection (DI), makes it possible to deliver the dependency from one to another class. Due to DI, server-side services could be delegated to a client-side. So, it is a serious advantage of OOP usage in Angular.
  • Directives aimed to enrich the HTML by providing a new syntax to it. The most common directive is the component. Using it, programmers could create any attribute for an existing element and change its behavior. This is a helpful feature, which makes working with the DOM very flexible. Angular is enriched with many other valuable features, like UI Material, making it possible to reuse the code of components in other parts of the project, but this is similar to what React offers too.

Who chooses Angular today?

Experienced front-end developers share that Angular fits well with enterprise solutions and the corporate sector when React.js is a better choice for early-stage startups and smaller companies. This could be explained that big business does not change their priorities very often and the strategic goals are known to their CTOs far earlier.

The main point you could take from our overview is to remember that Angular is a better option for long-term projects requiring reliability above anything else. Besides others mentioned in the list, a few more companies are using Angular: Microsoft Office, Deutsche Bank and Samsung.

React.js even doesn't call itself a framework but a JS library. Unlike Angular, React.js makes it a developer's responsibility to set a project structure, find relevant services for HTTP routing, and so on. At this point, React's ideology is to be agile and provide developers with absolute freedom. As a result, it leads to minimizing the project's size from start, as they could involve those libraries that they need by a certain time.

Let's imagine that you are the only front-end developer on the project, or there are just a few. The main goals are set for the shortest perspective here. You should be both fast and productive, be able to adjust to startup goals. The straight rules and architecture demands of Angular will slow down the process of development.

So, following single policies is not a major priority for the React.js community. In fact, this is straight opposite to Angular.

It is worth mentioning, React.js couldn't work alone, as it is only the View (V) and needs an engine for data processing. A developer needs to figure out its implementation, manage with Redux and Saga, and arrange that individually.

What makes React.js different?

  • The learning curve is low. A developer with HTML and JavaScript experience could take on web development and show their first outcomes soon.
  • The architecture is simple and doesn't take much time to study all its structure.
  • Virtual DOM made server-side rendering less time-consuming.
  • Huge community support that regularly contributes to React.js collection.
  • Intuitive environment, pleasant interface to work with.

What problem does virtual DOM solve?

The current situation is next: if anything has been changed in a user browser while clicking on a page, these changes will be automatically recorded to the DOM. To show the changes on the web-page, the browser should reload the entire DOM structure. It brings more loads to the browser and slows down the performance of the application.

React.js innovations in performance

  • React.js creates a snapshot of the DOM, which is named the virtual DOM (VDOM).
  • Every new change in the UI component is to be recorded to the new virtual DOM first, not the regular one.
  • React.js compares the new version of the VDOM and determines if those changes were essential to update the browser's DOM.
  • If the changes were essential, React.js updates the DOM with the latest portion of changes.
  • React.js has such computing algorithms that allow it to decide when to update the DOM in the browser. That makes front-end applications very performative. Unlucky, Angular doesn't have anything similar to this feature.

Virtual Dom and Browser Dom comparison

With that said, React.js helps to write clean JavaScript code for the projects when Angular complements the HTML with many extensions. This becomes messy in a while and hard to deal with such an enlarged code.

It is time to say: React.js dominates in the front-end development area today.

Advanced features, ease of use, extensive collection of javascript libraries placed React.js in a higher position than Angular. That proves an idea that the user-centered approach is a king. React.js has become an intuitive and powerful resource for making front-end applications.

The discussions like 'Angular vs. React' are obviously coming to an end because of the React.js win. Nowadays, the community is much interested in other frameworks like Vue.js and comparison of that kind will be more actual today.

Discussion (9)

pic
Editor guide
Collapse
lifelongthinker profile image
Sebastian

Yulya, this started out as a really interesting post but then became very biased towards React and the React way of doing things.

Of course, everything in our world is a trade-off, so there can never be a one-size-fits-all winner, hence the title is a bit click-baity.

But, seriously, blaming a framework for being a framework, or blaming any tool for being based on a certain paradigm (OOP) is a bit futile.

If you remove the bias, I'd say you have given a solid overview of Angular and React. 👍

Collapse
gsarciotto profile image
Giovanni Sarciotto

I usually agree that paradigm wars are nonsense, but I must agree with the article. I started with React but I started working on an Angular project 6 months ago and I feel that the OOP style of Angular doesn't fit well with the DOM.

Think about it, DOM elements are declarative and highly composable so our components should mirror that. However to achieve this in Angular you will need to start utilizing @ViewChild and others or dive into the component factory (dynamic components) while in React I can just easily pass the components around and render however I want without needing special features.

I feel like the hard learning curve of Angular is because the framework is trying to fit something OOP into something that isn't OOP and for this reason it needs to provide escape hatches to achieve the flexibility and composability the DOM needs.

Collapse
lifelongthinker profile image
Sebastian

I partly agree with the intention here. But: The way of solving problems in Angular in a declarative vs. non-declarative way has nothing to do with OOP.

I have seen many solid Angular projects that make a clear distinction between declarative markup and implementation, and they all do so using OOP.

OOP is definitely not the problem here, and neither is Angular. You mentioning the right issues but picking the wrong scapegoats.

Collapse
matheo profile image
Mateo Tibaquirá

DOM and OOP is futile compared with the Framework vs Library discussion.
Having a robust environment with the Angular CLI is not comparable with the mess that you can have on big projects if you don't have clear standards/architecture in a React project. Angular sets up the initial architecture which will save you time and headaches in the future.

Also the variety of React libraries has trade-offs in the long term. How many initiatives of routing or w/e feature you pick in the community are dead after some time and you have to migrate to another third-party library? oh no, OOP is not the issue here, and @zyulyamba doesn't seem to grasp the magnitude of the stability of both ecosystems.

Collapse
technoglot profile image
Amelia Vieira Rosado

Hmm, I really wanted to like this article, but I can't (at least not in its entirety).

Here's my constructive criticism on this piece:

  • First of all, the title. React is a JavaScript library and Angular is a framework (an opinionated one for that matter). Therefore, wondering who wins the race, for me, is bogus. I don't get the impression that the two are comparable (at least for the most part).
  • Secondly, popularity of the tools. That, in my opinion, does not say much, other than how polarized the tech space really is. (more on this later)
  • Thirdly, "Angular uses object-oriented programming (OOP), so its knowledge is hard-skill". OOP is a popular programming paradigm. I would not define it as a hard-skill per se. I believe that not being acquainted with OOP is more of a disadvantage than anything else.
  • Next: "Developers should have a good command of TypeScript." TypeScript is a superset of JS. It is not even that hard to pick up. But OOP is a "hard skill", so not knowing much OOP or having negligible experience with OOP and strongly typed languages, keeps on working against you no matter how you look at it (not you specifically, just generally speaking).
  • Lastly "The discussions like 'Angular vs. React' are obviously coming to an end because of the React.js win." This should hardly be a discussion at all. One is a library, the other is a framework. I don't think it is a fair comparison to begin with. Most devs will coddle up to React.js because it's easy to pick up. That's alright. What's a bit more concerning is how some devs just don't expand their horizons and stay in the comfort zones. But to each their own.

Closing thoughts
This article could have taken a better approach at discussing this topic. Despite giving some decent background info on both tools, I am missing objectivity. This article would have had so much more value (I'm not calling it worthless by any means) if it instead highlighted scenarios where one tool shines brighter than the other. Simply give pros and cons for both sides and let the reader decide which suits them best and for what reasons. Being so biased towards a certain tool or technology will certainly work against you at some point in time. So I suggest you try to make your content more objective and balanced. Nevertheless, thanks for posting.

Collapse
dmauldin profile image
Dave Mauldin

There are some good articles on Angular and ShadowDOM, as well as Incremental DOM. Angular (2+) has been using ShadowDOM before it was made a standard (that is now supported by all modern browsers, without a polyfill), which benefits performance in relation to both change detection and rendering. It's still different than VirtualDOM and there are trade-offs, but you also get some added benefits like encapsulation of your components, so you can easily apply CSS to your components without worrying about styles bleeding outside of the component.

Collapse
nullart2 profile image
nullart2

I don't see much comparison here except that they mention how many followers and show the same texts as what's written on the marketing pages of both react and angular. How many of those followers are front end devs, how many are full stack?

Maybe it should mention what react and angular can create. Show or mention web apps and websites that use these technologies. Web apps are not necessarily the same as websites, as web apps have the same functions as a desktop apps (like accounting , inventory systems, etc).

Collapse
tomaszs2 profile image
Collapse
technoglot profile image
Amelia Vieira Rosado

What is? Can you please elaborate?