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…
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
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
Angular License Information
React License Information
Pros & Cons
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
- 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
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.
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
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
1. Steep learning curve
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
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 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
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.
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