A brief history of Angular and React
Before we get into the technical details, in order to better understand the philosophy of these frameworks and their evolution over time, let us first talk about the historical development behind them.
How it all started?
React was developed by Facebook and was originally released in 2013. Facebook uses React extensively in its products (Facebook, Instagram, and WhatsApp). The current stable version is 16.X, which was released in November 2018 (small incremental updates have been made since then).
Since “angular” and “react” are commonly used words, it is difficult to grasp their popularity from Google’s trends. Despite this, the number of stars their GitHub repository has earned is a good indicator of their popularity. The number of stars in Vue has changed drastically in the middle of 2016.
Community and Development
Now that you are familiar with the history and recent trends of each framework, we will review the community to evaluate the development of these frameworks. We have seen that in the past year, all frameworks have regularly released incremental versions, which indicates that app development is in full swing.
Let’s take a look at the statistics of Angular, React and Vue in the GitHub repository:
~ Angular React
Watchers 3.2k 6.7k
Stars 62k 151k
Forks 16.9k 29.4k
Contributors 1,129 1,390
When you use the framework of your choice, you don’t want to have to worry about the upcoming framework update messing up your code. Although in most cases, you will not encounter many problems from one version to another, you must be cautious because some updates may be more important and need to be adjusted to maintain compatibility.
Angular plans to undergo a major update every six months . There are still 6 months before any major APIs are deprecated, which gives you two release cycles (one year) to make the necessary changes (if any).
Further comparing Angular and React, Facebook said that stability is the most important to them , just like large companies like Twitter and Airbnb. React provides scripts like response-codemod to help you migrate, so React is the easiest of the three in terms of version upgrade requirements.
Using Angular vs React
There are several important characteristics to note here, mainly overall size and load time, available components, and learning curve.
Size and load time
The size of the library is as follows:
Angular 4+: depends on the generated bundle size
React: 116 KB
Although there is a big difference in the size of the frames , they are still small compared to the average size of the web page ( approximately 2MB based on recent data ). In addition, if you use a popular CDN to load these libraries, users are likely to have already loaded these libraries on their local systems.
Components are an indispensable part of these three frameworks, whether we are talking about Vue, React or Angular. Components usually take input and change behavior based on the input. This behavior change is usually manifested as a UI change in some parts of the page. The use of components makes it easy to reuse code. The component can be a shopping cart on an e-commerce site, or a login box on a social network.
Interestingly, React combines the behavior of UI and components. For example, below is the code to create a hello world component in React.
ReactDOM.render( h1 Hello, world! /h1, document.getElementById(‘root’) );
In React, the same part of the code is responsible for creating UI elements and specifying their behavior.
So how hard is it to learn these frameworks?
Considering Angular mastering and complete solution, and has a steep learning curve. Angular requires you to learn related concepts, such as TypeScript and MVC. Although it takes time to learn Angular, the investment pays off in understanding how the front-end works.
React provides an introductory guide that can help you build React in an hour. The documentation is thorough and complete, and common problems with solutions have appeared on Stack Overflow. This makes the learning curve of the core framework not so steep, but depends on your path to use additional features. However, learning to use React does not necessarily mean you are using best practices.