Are you a decision maker of a new Web application project? Do you want to use one of the two of the hottest Web technologies, Angular 2 or React? Confused? Let's see if I can help.
Pick one! Which one will you choose?
As you can see from both of these cars, you cannot go wrong with one or the other. Some people prefer BMW and some prefer Mercedes. Sometimes its matter of loyalty and brand name. Some times, its the design and color, and sometimes its just the price.
Angular and React are two new web technologies that are on the rise now. Many business owners, technical decision makers, and project managers are having a dilemma about how to choose one over the other.
In this article, I aim to educate decision makers on both Angular 2 and React by comparing them side by side, reading community reactions, and putting some of my personal thoughts behind the decision.
Let’s start with the following table by summarizing various attributes of Angular 2 and React.
| Angular 2 | React |
Developed by | Google | Facebook |
Year launched | Oct 2010 (Angular 1.0)
Angular 2.2.0 (Nov 2016)
| Mar 2013 |
Modern JavaScript | Yes | Yes |
Mature | Yes | Yes |
Industry Adoption | Good | Good |
Language | TypeScript | JSX |
Out-of-box Tools | Great | Ok |
Learning Curve | Intermediate | Beginner |
Advanced Programming | YES | NO |
Performance | Little bit slower but not concerning | Faster |
Size | 766k | 151k |
Learning Curve | Programming background | JavaScript background |
Native Support | Ionic, NativeScript | React Native |
MVC Support | Full support | View only |
Rendering | Server side | Server side |
Popularity
Let's take a look at Google Trends for various terms related to Angular and React.
As you can see from the above graph, both Angular and React are on the rise. However, Angular has much more popularity compare to React.
OK, here is a data for various regions for these terms. As you can see, some countries has Angular search over React.
History and Development
Angular (previously known as AngularJS or Angular.js) was developed and released by Google in October 2010. It, is a JavaScript based open-source framework for building front-end Web applications.
Angular resource: https://angular.io/
React (also known as ReactJS or React.js) was developed and released by Facebook in March 2013. It is an open-source JavaScript library to build front-end user interfaces.
React resources: https://facebook.github.io/react/
Let’s take a look at the key features of both technologies as defined on their respective websites.
Angular 2 key features
Develop Across All Platforms
Learn one way to build applications with Angular and reuse your code and abilities to build apps for any deployment target. For web, mobile web, native mobile and native desktop.
Speed & Performance
Achieve the maximum speed possible on the Web Platform today, and take it further, via Web Workers and server-side rendering.
Angular puts you in control over scalability. Meet huge data requirements by building data models on RxJS, Immutable.js, or another push-model.
Incredible Tooling
Build features quickly with simple, declarative templates. Extend the template language with your own components and use a wide array of existing components. Get immediate Angular-specific help and feedback with nearly every IDE and editor. All this comes together so you can focus on building amazing apps rather than trying to make the code work.
Loved by Millions
From prototype through global deployment, Angular delivers the productivity and scalable infrastructure that supports Google's largest applications.
React key features
Declarative
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.
Component-Based
Build encapsulated components that manage their own state, then compose them to make complex UIs.
Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.
Learn Once, Write Anywhere
We don't make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code.
React can also render on the server using Node and power mobile apps using React Native.
The Culture and People
Angular is built by a team of engineers who share a passion for making web development feel effortless. We believe that writing beautiful apps should be joyful and fun. We're building a platform for the future.
https://angular.io/about/
The two biggest software development corporations, Google and Microsoft, are behind Angular development. Being close to the Microsoft ecosystem, and given the openness of Microsoft, I see more and more involvement of the community folks.
React on the other hand was a Facebook initiative and I’m not sure where Facebook will be when it comes to software development. Facebook is not a software development company. Can React survive without support of corporations other than Facebook?
Native Support
Both, Angular 2 and React support native mobile development.
Ionic Framework and NativeScript
Iconic Framework and NativeScript are two frameworks to support native development using Angular 2.
Ionic is a complete open-source SDK for hybrid mobile app development. Built on top of AngularJS and Apache Cordova, Ionic provides tools and services for developing hybrid mobile apps using Web technologies like CSS, HTML5, and Sass. Apps can be built with these Web technologies and then distributed through native app stores to be installed on devices by leveraging Cordova.
NativeScript is how you build cross-platform, native iOS, and Android apps without web views. Use Angular, TypeScript, or modern JavaScript to get truly native UI and performance while sharing skills and code with the web. Get 100% access to native APIs via JavaScript and reuse of packages from npm, CocoaPods, and Gradle. It is open source and backed by Telerik.
React Native
React Native is the library used to build React-based native apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components. With React Native, you don't build a “mobile web app”, an “HTML5 app”, or a “hybrid app”. You build a real mobile app that's indistinguishable from an app built using Objective-C or Java. React Native uses the same fundamental UI building blocks as regular iOS and Android apps. You just put those building blocks together using JavaScript and React.
The Team Factor
One of the important factors that plays a vital role in choosing between Angular 2 or React is your team.
If you’re a Microsoft or Google shop and have a good background in object-oriented and other programming languages, and you’re familiar with MVC, you should go with Angular 2.
If you love just JavaScript and do not like to learn complex programming architecture like MVC, React is probably for you.
Personal Recommendation
I am not a JavaScript developer. My background is building large-scale enterprise systems using “real” software platforms. I started in 1997 building applications using C, C++, Pascal, Ada, and Fortran. The I moved to VB, VC++, MFC, ATL, COM, and DCOM. Later my programming path followed C#, .NET, Windows Forms, WPF, and now UWP. I can clearly say that JavaScript is just gibberish to me. Being a Microsoft MVP and expert, I have a good understanding of TypeScript.
I also don’t see Facebook as a software development company. However, Google and Microsoft are already the largest software innovators. I feel more comfortable working with a product that has strong backing from Google and Microsoft. Also TypeScript being Microsoft’s open-source initiative and with my background, I know Microsoft has even bigger plans for TypeScript.
Now, with TypeScript in the picture and .NET Core being open-sourced, I see an active role of Microsoft and the community in the development of the newer versions of Angular. I also see Microsoft’s Visual Studio development tool supports Angular as well. This is huge for Microsoft developers.
Community Reactions
Let’s look at what experts are saying about these two technologies. Obviously, some of these reactions are influenced by their personal interest and background.
Debug Me recommends:
“For those who prefer to code in plain old JavaScript, React may peak your interest a bit more but for those who want a more mature and complete solution, Angular2 may be your best bet as it has learned from Angular1 and React.”
Gorilla Logic says:
“Angular is a framework and React is a library.”
Geneva Clark of Zeolearn compares two technologies and writes:
Angular and React are two different worlds and there can be no direct comparison and winner among the two. As mentioned at the beginning, these are just common parameters among the two and not a direct comparison.
React can be a better choice if you need more flexibility in the architecture of your code.
Angular can be a better choice if you choose to adopt an architecture for the whole front end of your application.
Cory House writes in Angular 2 versus Rreact: There will be blood:
“Choosing between Angular and React is like choosing between buying an off-the-shelf computer and building your own with off-the-shelf parts.”
Angular 2 Advantages:
- Low Decision Fatigue
- TypeScript = Clear Path
- Reduced Churn
- Broad Tooling Support
- Web Component Friendly
React Advantages:
- JSX
- React Fails Fast and Explicitly
- React is JavaScript-Centric
- Luxurious Development Experience
- Size Concerns
- React Embraces the Unix Philosophy.
Hristo Georgiev writes via Pluralsight tutorial React vs Aangular 2:
“Angular 2 is very close to being a fully-fledged framework - it comes with many building blocks out of the box that cover most of the common scenarios in developing a web application.”
“React is far less rigid than Angular 2. It is a library that provides the most basic tools for building a web applications - a HTTP service and Components. There is no built-in router or anything that sets a particular convention.”
Itay Herskovits writes on Back& via Angular 2 vs React:
“The choice between Angular 2 and React comes down to a style preference. React, as a library focused on speed of rendering, is a useful tool for handling large and complex UI presentations in your client or native applications. Angular 2, on the other hand, takes a much broader view of the development process. As an opinionated framework, it’s looking to guide the way in which you build your apps, while also allowing you to create expressive and reusable UI experiences.”
The Verdict
If you plan to pick between Angular 2 and React for your next application, here is the good news. Angular 2 and React are both mature technologies. You cannot go wrong with one or the other.
The deal breaker is your expertise and your preference. What it all comes down to is, what you’re more comfortable with.
If you’re building a large scalable web application and looking beyond a few years, Angular 2 is a better choice with the obvious reason of Google and Microsoft being behind this product.
If you’re not a TypeScript kind of guy and just want to stick with your JavaScript, then React may be your choice.
Update 1/7/2018
Here are some recent updates. According to npm, React is growing at a much faster pace than other JavaScript frameworks. The following chart shows the trends by npm for React, Preach, Vue, Ember, Angular, and Backbone.
References
Here is a list of references and other resources related to this article:
https://angular.io/
https://facebook.github.io/react/
https://medium.com/javascript-scene/angular-2-vs-react-the-ultimate-dance-off-60e7dfbc379c#.ent6i8x2z
https://gorillalogic.com/blog/angular-2-vs-react/
https://www.zeolearn.com/magazine/angular2-vs-react-comparison
https://www.npmjs.com/npm/state-of-javascript-frameworks-2017-part-1/