top

React vs Angular-Choose The Better Frontend Framework?

Which front-end technology to choose? A million dollar question today for anyone who wants to start a new project or learn a new front-end technology and the answer is there is no “silver bullet” to say one win over the other. I work, train & mentor on both Angular and React and often get this question from freshers/senior developers/architects/business managers. In this blog, I would like to share my views on this question. There are so many articles / great people who talk about comparison with respect to features of Angular vs React framework. I do not want to delve into detailed feature comparison I would rather brief on the most important ones to consider. Let’s get started…  Angular Angular is a development platform for building mobile and desktop web applications using Typescript/JavaScript and other languages. Angular combines declarative templates, dependency injection, an end to end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or the desktop.   React React — A JavaScript library for building user interfaces. React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make your code more predictable and easier to debug. React represents the ONLY View in the Model-View-Controller (MVC) pattern, and can be used in combination with other JavaScript libraries or frameworks in MVC, such as Redux (JavaScript library). Here comes the time to start comparing…  As like any other comparison lets see some internet facts which talks about React vs Angular popularity.   1. Google Trends It is hard to find the right trend view for Angular due to the Angular versions, hence I tried 2 different comparisons  First trend view, Using React as a search term and Angular without using version number as a search term                                                                         Angular vs React library (without using Angular version numbers)   Second trend view, Using React as a search term and Angular with multiple version numbers as a search term   2. NPM Trends Using React and @Angular/core for Angular 2 and above, as “Angular” refers to Angular1 or Angularjs in npm   3. Github stats Github stats for React and Angular(2/4/5) repos   4. StackOverflow StackOverflow insights for React and Angular(2/4/5) As said there is no concrete answer to this question, I always tell people who ask me this question - answer is very much subjective with several questions further which I have listed below.   [Un]Fair comparison of tech perspective React learning curve is low as this learning focus only React. But in real-world projects, this is not true as no enterprise application needs just React and there will be tons of libraries from React ecosystem will be joined which bloats learning curve. To develop good enterprise React application there is more learning curve from React ecosystem than Angular ( I have experienced this is my own development projects and training as well ) Fist vs Fist (performance)                         Performance results from http://www.stefankrause.net/js-frameworks-benchmark7/table.html   License                                                                                               Angular License Information                                                                                                 React License Information Pros & Cons   Angular Pros 1. Component-based architecture One of the main architectural principles in Angular is that an application should be composed of well encapsulated, loosely coupled components. You can think of a component as a small feature that makes up a piece of the user interface. Component-based architecture has similar properties and gives us similar benefits as a proper Object-Oriented Model. Component-based architecture improves reusability, testability, and maintainability along with loosely coupled nature of the application. 2. TypeScript: better tooling, cleaner code, and higher scalability TypeScript is a superset of the JavaScript programming language that evolved as an alternative to coding in pure JavaScript, giving developers a tool to help them write faster, cleaner JavaScript. TypeScript offers several advantages Is purely object-oriented programming Optional static typing Type Inference, which gives some of the benefits of types, without actually using them Great tooling support with IntelliSense Access to ES6 and ES7 features, before they become supported by major browsers The ability to compile down to a version of JavaScript that runs on all browsers 3. Universal framework — Develop apps across all platforms Angular was developed with the mobile-first approach in mind. The idea is to share code base and ultimately the engineering skills across the web, mobile, and desktop applications.  4. Testability Due to its modular and component architecture, Angular applications have a great degree of testability support, applications scaffolded with Angular CLI comes with the pre-configured unit and end-to-end testing support.  5. High Performance Angular turns your templates into code that’s highly optimized for today’s JavaScript virtual machines, giving you all the benefits of hand-written code with the productivity of a framework. Angular apps load quickly with the new Component Router, which delivers automatic code-splitting so users only load code required to render the view they request. 6. Angular CLI The Angular CLI is a command-line interface for building Angular applications. The CLI is responsible for automating away many of the challenges and headaches that come with being a developer. By starting with a configuration that works out of the box, baking in best practices that have been discovered by the community over time, and by helping you build more maintainable code, the CLI exposes some of the most powerful capabilities of Angular in a way that is easier to get started, and easier to get moving quickly when compared to rolling everything together yourself. CLI comes with a bunch of commands that help you manage productive development, commands vary from generating Angular files to executing unit tests, end-to-end tests and generating dev builds and highly optimized AOT production builds   Angular Cons 1. Steep learning curve If you onboard new developers familiar with JavaScript to learn and use new Angular, they will be challenged with an array of topics learn. Some of them to mention, typescript, Angular modules, components, services, templates dependency injection etc. Added to this developers should have at least basic understanding of reactive programming using RxJS library 2. Verbose and complex The most frequent complaint that I hear from the teams who do Angular development is the verbosity of Angular code. The way components are managed is too complicated, for a best practice driven code you need at least 4 files for a component, fortunately, Angular CLI simplifies the job. The similar problem goes with every Angular type like directives, pipes, providers and dependency Injection brings in more trouble   React Pros 1. Components As Angular and React also uses components, it would be redundant for me talk about the benefits of components. 2. One-Way data flow In React, Data Only Goes One Way!. The major benefit of this approach is that data flows throughout your app in a single direction and you have better control over it, as it makes data flow predictably hence easy to fix if any issues.  3. Virtual DOM DOM manipulation is one of the important things developers need to do with efficiency in large dynamic web applications. This is subject is universal, when we do not have an expert skill in an area we rely on an expert who can do the job well to make our lives easy. React is an expert who does that smartly and efficiently using Virtual DOM. One of the greatest strengths of React is virtual DOM. Virtual DOM is a clone of original browser DOM which sits on JS side under the control of React. At any given point of time React maintains 2 copies of virtual DOM to find the difference of changes the application is going through and push the delta changes to browser DOM to get the UI rendered.   React Cons React is a simple library with a simple API focusing on a single problem.  You may differ with my opinion, but I have not felt any pain to see anything as a con. A lot of developers complain about difficulties in managing large React projects due to a high number of components( and their categorization into presentational and container components with respect to redux ), I would say it is inevitable for any large projects with best practices in place to modularize at a good level. Hence I believe this cannot be seen as a con.   Team / Project Perspective Questions 1. What is (your) team skill with JavaScript? Both React and Angular needs intermediate JavaScript skills along with ES6. For Angular, there is an additional learning curve as an Angular recommended development language is Typescript. If your team is already good with JavaScript and when there is no room/time to extend learning to typescript then the winner would be React 2. Does (your) team has any prior experience with front-end web development? Both React and Angular are front-end technologies to develop Single Page Application (SPA), a good HTML and CSS experience is very much needed to have a better productivity. There is no clear winner as these skills are very much needed for a front developer today where technology being immaterial 3. Is (your) team is good in OOP and looking for OOP style of development? A great fan of OOP and your team has good OOP experience then worth trying TypeScript. Angular uses TypeScript as an official language whereas React also can be developed in TypeScript but React with ES6 is more popular. Angular being inherently TypeScript based framework Angular is a winner  4. Are you looking for everything that is needed to build SPA under single technology nest? React being a view library offers only view support whereas Angular being a framework comes with a lot of services that serve all the needs of SPA. Without a second thought, Angular is the clear winner. 5. Are you looking for a flexibility to cherry pick best libraries to build SPA? Angular is coupled with services like routing, HTTP client, form management, dependency injection where mostly you cannot opt out of them to bring in other 3rd party libraries. This makes Angularly inflexible to welcome external libraries capabilities into the core needs of an application. Whereas with React you can choose any external libraries away from view capabilities, this makes React application development very flexible at the same time welcoming JS fatigue. As there will be trade-offs in decision making all times, “with great power comes great responsibility” — hence with the power of flexibility you have to choose good libraries responsibly to make a good pool of libraries for a React application. So React is a clear winner here 6. Are you favoring more JS than HTML to build user interfaces? React says everything in JS, hence offers JSX as alternative JS syntax which looks like markup language to build UI but still JS under the hoods. React as well recommends to use CSS in JS which makes CSS usage as inline styles to win the war of CSS specificity issues (this concept has triggered arguable discussion between CSS and React communities, however, there is a good library styled components, which makes this happens without compromising CSS goodness by simulating shadow dom behavior).  Whereas Angular uses HTML as its templating language and brings template syntax into HTML to make it dynamic. To address CSS specificity issues Angular provides view encapsulation feature to simulate shadow dom behavior Love to code everything inside JS then chose to React. HTML, CSS in JS, all in JS — React mantra, so React is a winner 7. Is your project needs development of applications for both web and mobile? Both Angular and React offers web and mobile development technologies namely NativeScript and React Native. Choosing mobile development technology as of one these hybrid mobile technologies yet being native will help in code reuse from the web to mobile or vice-versa ( most of the non UI code can be reused in any case would equate to a min of 40–50% in some cases 80% ). However React Native is most popular and trusted choice, hence React will be the clear winner. 8. Is your project targets large functionality and you look for scalability of your app? The question may look strange, as scalability is a server-side jargon but what is scalability for client-side applications? Nowadays, due to rich web applications, scaling has become an important topic on the front end, too! The front end of a complex app needs to be able to handle a large number of users, and developers. By scaling we here refer to componentization, modular service code, and styling to helps developers work collaboratively without much trouble. Both React and Angular with their great tooling support can really scale well with ease.   Conclusion In my opinion, choosing technology must be a balanced thought with consideration of team comfort, technology performance, flexibility. An important point to note here is neither React is X times faster than Angular nor Angular is X times faster than React. These technologies are inherently faster and their communities are still working hard to make them even better. Any bad implementation can kill the word “performance” from these technologies. Hope, my views on the comparison of React vs Angular performance would be helpful for your decision making. signing off for now. Last updated on 16th April 2018
Rated 4.0/5 based on 42 customer reviews
Normal Mode Dark Mode

React vs Angular-Choose The Better Frontend Framework?

Bala Krishna Ragala
Blog
01st Oct, 2016
React vs Angular-Choose The Better Frontend Framework?

Which front-end technology to choose?

A million dollar question today for anyone who wants to start a new project or learn a new front-end technology and the answer is there is no “silver bullet” to say one win over the other. I work, train & mentor on both Angular and React and often get this question from freshers/senior developers/architects/business managers. In this blog, I would like to share my views on this question.

There are so many articles / great people who talk about comparison with respect to features of Angular vs React framework. I do not want to delve into detailed feature comparison I would rather brief on the most important ones to consider.

Let’s get started… 

Angular

Angular is a development platform for building mobile and desktop web applications using Typescript/JavaScript and other languages. Angular combines declarative templates, dependency injection, an end to end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or the desktop.
 

React

React — A JavaScript library for building user interfaces. React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make your code more predictable and easier to debug.

React represents the ONLY View in the Model-View-Controller (MVC) pattern, and can be used in combination with other JavaScript libraries or frameworks in MVC, such as Redux (JavaScript library).

Here comes the time to start comparing… 

As like any other comparison lets see some internet facts which talks about React vs Angular popularity.
 

1. Google Trends

It is hard to find the right trend view for Angular due to the Angular versions, hence I tried 2 different comparisons

 First trend view, Using React as a search term and Angular without using version number as a search term

 Angular vs React library                    

                                                    Angular vs React library (without using Angular version numbers)
 

Second trend view, Using React as a search term and Angular with multiple version numbers as a search term

 Google Trends

 

2. NPM Trends

Using React and @Angular/core for Angular 2 and above, as “Angular” refers to Angular1 or Angularjs in npm

 Google Trends

 

3. Github stats

Github stats for React and Angular(2/4/5) repos

Github stats

 

4. StackOverflow

StackOverflow insights for React and Angular(2/4/5)

StackOverflow

As said there is no concrete answer to this question, I always tell people who ask me this question - answer is very much subjective with several questions further which I have listed below.
 

[Un]Fair comparison of tech perspective

Fair comparison of tech perspective

React learning curve is low as this learning focus only React. But in real-world projects, this is not true as no enterprise application needs just React and there will be tons of libraries from React ecosystem will be joined which bloats learning curve. To develop good enterprise React application there is more learning curve from React ecosystem than Angular ( I have experienced this is my own development projects and training as well )


Fist vs Fist (performance)

Fist vs Fist                         Performance results from http://www.stefankrause.net/js-frameworks-benchmark7/table.html

 

License 

License                                                                                              Angular License Information

                                                                                                React License Information

Pros & Cons

 

Angular Pros

1. Component-based architecture
One of the main architectural principles in Angular is that an application should be composed of well encapsulated, loosely coupled components. You can think of a component as a small feature that makes up a piece of the user interface. Component-based architecture has similar properties and gives us similar benefits as a proper Object-Oriented Model. Component-based architecture improves reusability, testability, and maintainability along with loosely coupled nature of the application.

2. TypeScript: better tooling, cleaner code, and higher scalability
TypeScript is a superset of the JavaScript programming language that evolved as an alternative to coding in pure JavaScript, giving developers a tool to help them write faster, cleaner JavaScript. TypeScript offers several advantages

  • Is purely object-oriented programming
  • Optional static typing
  • Type Inference, which gives some of the benefits of types, without actually using them
  • Great tooling support with IntelliSense
  • Access to ES6 and ES7 features, before they become supported by major browsers
  • The ability to compile down to a version of JavaScript that runs on all browsers

3. Universal framework — Develop apps across all platforms
Angular was developed with the mobile-first approach in mind. The idea is to share code base and ultimately the engineering skills across the web, mobile, and desktop applications. 

4. Testability
Due to its modular and component architecture, Angular applications have a great degree of testability support, applications scaffolded with Angular CLI comes with the pre-configured unit and end-to-end testing support. 

5. High Performance
Angular turns your templates into code that’s highly optimized for today’s JavaScript virtual machines, giving you all the benefits of hand-written code with the productivity of a framework. Angular apps load quickly with the new Component Router, which delivers automatic code-splitting so users only load code required to render the view they request.

6. Angular CLI
The Angular CLI is a command-line interface for building Angular applications. The CLI is responsible for automating away many of the challenges and headaches that come with being a developer. By starting with a configuration that works out of the box, baking in best practices that have been discovered by the community over time, and by helping you build more maintainable code, the CLI exposes some of the most powerful capabilities of Angular in a way that is easier to get started, and easier to get moving quickly when compared to rolling everything together yourself. CLI comes with a bunch of commands that help you manage productive development, commands vary from generating Angular files to executing unit tests, end-to-end tests and generating dev builds and highly optimized AOT production builds

 

Angular Cons

1. Steep learning curve
If you onboard new developers familiar with JavaScript to learn and use new Angular, they will be challenged with an array of topics learn. Some of them to mention, typescript, Angular modules, components, services, templates dependency injection etc. Added to this developers should have at least basic understanding of reactive programming using RxJS library

2. Verbose and complex
The most frequent complaint that I hear from the teams who do Angular development is the verbosity of Angular code. The way components are managed is too complicated, for a best practice driven code you need at least 4 files for a component, fortunately, Angular CLI simplifies the job. The similar problem goes with every Angular type like directives, pipes, providers and dependency Injection brings in more trouble

 

React Pros

1. Components
As Angular and React also uses components, it would be redundant for me talk about the benefits of components.

2. One-Way data flow
In React, Data Only Goes One Way!. The major benefit of this approach is that data flows throughout your app in a single direction and you have better control over it, as it makes data flow predictably hence easy to fix if any issues. 

3. Virtual DOM
DOM manipulation is one of the important things developers need to do with efficiency in large dynamic web applications. This is subject is universal, when we do not have an expert skill in an area we rely on an expert who can do the job well to make our lives easy. React is an expert who does that smartly and efficiently using Virtual DOM.

One of the greatest strengths of React is virtual DOM. Virtual DOM is a clone of original browser DOM which sits on JS side under the control of React. At any given point of time React maintains 2 copies of virtual DOM to find the difference of changes the application is going through and push the delta changes to browser DOM to get the UI rendered.

 

React Cons

React is a simple library with a simple API focusing on a single problem. 
You may differ with my opinion, but I have not felt any pain to see anything as a con. A lot of developers complain about difficulties in managing large React projects due to a high number of components( and their categorization into presentational and container components with respect to redux ), I would say it is inevitable for any large projects with best practices in place to modularize at a good level. Hence I believe this cannot be seen as a con.

 

Team / Project Perspective Questions

1. What is (your) team skill with JavaScript?
Both React and Angular needs intermediate JavaScript skills along with ES6. For Angular, there is an additional learning curve as an Angular recommended development language is Typescript. If your team is already good with JavaScript and when there is no room/time to extend learning to typescript then the winner would be React

2. Does (your) team has any prior experience with front-end web development?
Both React and Angular are front-end technologies to develop Single Page Application (SPA), a good HTML and CSS experience is very much needed to have a better productivity. There is no clear winner as these skills are very much needed for a front developer today where technology being immaterial

3. Is (your) team is good in OOP and looking for OOP style of development?
A great fan of OOP and your team has good OOP experience then worth trying TypeScript. Angular uses TypeScript as an official language whereas React also can be developed in TypeScript but React with ES6 is more popular. Angular being inherently TypeScript based framework Angular is a winner 

4. Are you looking for everything that is needed to build SPA under single technology nest?
React being a view library offers only view support whereas Angular being a framework comes with a lot of services that serve all the needs of SPA. Without a second thought, Angular is the clear winner.

5. Are you looking for a flexibility to cherry pick best libraries to build SPA?
Angular is coupled with services like routing, HTTP client, form management, dependency injection where mostly you cannot opt out of them to bring in other 3rd party libraries. This makes Angularly inflexible to welcome external libraries capabilities into the core needs of an application. Whereas with React you can choose any external libraries away from view capabilities, this makes React application development very flexible at the same time welcoming JS fatigue. As there will be trade-offs in decision making all times, “with great power comes great responsibility” — hence with the power of flexibility you have to choose good libraries responsibly to make a good pool of libraries for a React application. So React is a clear winner here

6. Are you favoring more JS than HTML to build user interfaces?
React says everything in JS, hence offers JSX as alternative JS syntax which looks like markup language to build UI but still JS under the hoods. React as well recommends to use CSS in JS which makes CSS usage as inline styles to win the war of CSS specificity issues (this concept has triggered arguable discussion between CSS and React communities, however, there is a good library styled components, which makes this happens without compromising CSS goodness by simulating shadow dom behavior). 

Whereas Angular uses HTML as its templating language and brings template syntax into HTML to make it dynamic. To address CSS specificity issues Angular provides view encapsulation feature to simulate shadow dom behavior

Love to code everything inside JS then chose to React. HTML, CSS in JS, all in JS — React mantra, so React is a winner

7. Is your project needs development of applications for both web and mobile?
Both Angular and React offers web and mobile development technologies namely NativeScript and React Native. Choosing mobile development technology as of one these hybrid mobile technologies yet being native will help in code reuse from the web to mobile or vice-versa ( most of the non UI code can be reused in any case would equate to a min of 40–50% in some cases 80% ). However React Native is most popular and trusted choice, hence React will be the clear winner.

8. Is your project targets large functionality and you look for scalability of your app?
The question may look strange, as scalability is a server-side jargon but what is scalability for client-side applications? Nowadays, due to rich web applications, scaling has become an important topic on the front end, too! The front end of a complex app needs to be able to handle a large number of users, and developers. By scaling we here refer to componentization, modular service code, and styling to helps developers work collaboratively without much trouble. Both React and Angular with their great tooling support can really scale well with ease.

 

Conclusion

In my opinion, choosing technology must be a balanced thought with consideration of team comfort, technology performance, flexibility. An important point to note here is neither React is X times faster than Angular nor Angular is X times faster than React. These technologies are inherently faster and their communities are still working hard to make them even better.

Any bad implementation can kill the word “performance” from these technologies.

Hope, my views on the comparison of React vs Angular performance would be helpful for your decision making. signing off for now.

Last updated on 16th April 2018

Bala Krishna

Bala Krishna Ragala

Blog Author

Bala is a software engineer and professional trainer based out of Hyderabad, India. He has previously worked with many startups and consulted them on technology, engineering, and product. He writes about JavaScript and web development literacy.

Leave a Reply

Your email address will not be published. Required fields are marked *

Top comments

montre pasha cartier homme replique

13 November 2018 at 10:31am
Usually I don’t read post on blogs, but I wish to say that this write-up very forced me to take a look at and do so! Your writing style has been amazed me. Thanks, very great article. <a href="http://www.luxury-watch.org/fr/pasha-de-cartier-large-white-ceramic-unisex-watch-replica-steel-white-dial-p592/" >montre pasha cartier homme replique</a> [url=http://www.luxury-watch.org/fr/pasha-de-cartier-large-white-ceramic-unisex-watch-replica-steel-white-dial-p592/]montre pasha cartier homme replique[/url]

madden mobile coins

13 November 2018 at 10:32am
Woah! I'm really loving the template/theme of this blog. It's simple, yet effective. A lot of times it's challenging to get that "perfect balance" between user friendliness and visual appeal. I must say you've done a superb job with this. Also, the blog loads very fast for me on Firefox. Outstanding Blog! madden mobile coins http://naverpic.com/xe/a3/38654

SUBSCRIBE OUR BLOG

Follow Us On

Share on

other Blogs

20% Discount