Over a million developers have joined DZone.

Angular and React: Brief Comparison Based on a 2-Year Long Experience

DZone 's Guide to

Angular and React: Brief Comparison Based on a 2-Year Long Experience

The team at DashBouquet reflects on their experience with Angular and React, offering up their take on the two popular JavaScript frameworks.

· Web Dev Zone ·
Free Resource

During the last two+ years, our team at DashBouquet Development has worked on great variety of projects, including the ones on Angular, Angular 2, and React. Almost all of them have gone to production.

Modern front-end development assumes the use of enormous libraries, like AngularJS (true for both Angular 1 and 2), React, and many others. Each has its pros and cons and you would never be able to tell which one is better unless you use them both. Here, we'd like to share our experience, which is based on the past 3-year practice in front-end development. Because at DashBouquet we mostly use Angular and React, we will have a look at these two frameworks.

We started with Angular few years back and since then we have completed more than 50 projects that differed in tech stack and size. Because we are commercial developers, we are eager to constantly improve our productivity and strive to deliver the best results in the shortest time possible. Thus, it's crucial for us to quickly adopt the best tools & practices and also recognize which ones are worth getting rid of.

Notes and Google Trends

Below are our notes in outline form based on our work experience with both Angular and React:

Frameworks comaprison table

Angular is more popular among developers than other frameworks and this is a big advantage because it means the framework will have ample resources available and it's tried & tested. Moreover, its popularity is not our hypothesis, but information we gathered through Google Trends.

Image title

Google trends - geography

Comparing Angular and React via Google Trends gave us unexpected results:

  1. Angular is almost 2 times more popular than React according to Google search results
  2. React is #1 in USA, Canada, and Australia
  3. Angular is more popular everywhere else

Personal Experience

Dozens of Angular projects left us with the feeling that it’s a perfect tool for quick UI solutions and things that aren't very complex. But when speaking of apps with complicated business logic, our first choice would be React + Redux.

One of the major problems with Angular is that it’s easy to get into side effects. During work, one thing leads to another and the more developers work on the project, the more side effects occur. And when you scale you often lose control over the quality and release process. However, we faced this problem only during our work with Angular. For Angular 2 you can resolve it with predictable state containers and immutables, the same way as with React.

One more issue is called the Monkey/Banana problem. It means that when you want to test how a monkey would handle a banana, you should build the whole jungle for that. In comparison to Angular 2, React allows one to get more testable components due to the developed ecosystem. Of course, this changes over time.

Another noteworthy thing, one of the biggest cons of React and Angular 2 is that developers using them are still quite rare, especially good ones. Even though React is a relatively small framework, there are still a lot of things a developer has to care about: state management, server interaction, testing, and much more.

Wrap Up

These are our observations and thoughts that we collected during our 2+- year work process with these options. At DashBouquet we don’t want to give a biased opinion, and that’s why we openly say that we stick mostly to React + Redux/Saga. It is a perfect fit for us as we’re focused on big and complex front-end apps. Still, we are always eager to try new approaches and get more Angular 2 experience.

front end development ,angular ,react ,javascript ,angular 2.0

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}