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?
Angular is a super hot JavaScript MVVM framework, created in 2009, it is great for building highly interactive web applications.
Angular was released in 2010 and developed by Google. It is the oldest of the three frameworks. It is a type-based JavaScript framework. A major change occurred when Angular 2 was released in 2016 (the original “JS” named AngularJS was removed). Angular 2+ is Angular. Although AngularJS (version 1) is still being updated, we will focus on Angular.
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).
Popularity
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
Migration
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.
Component
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.
Angular:
In Angular, components are called directives . Directives are just marks on DOM elements, and Angular can also track and attach specific behaviors. Therefore, Angular separates the UI part of the component as attributes of HTML tags, and separates its behavior in the form of JavaScript code. This is the difference between Angular and React.
React:
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.
learning curve
So how hard is it to learn these frameworks?
Angular:
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:
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.
Conclusion
Angular is the most mature framework, with good support in terms of contributors, and a complete package. However, the learning curve is steep, and development concepts in Angular may hinder new developers. Angular is a good choice for companies with large teams and developers who are already using TypeScript. React is mature enough and has a lot of contributions from the community. It has been widely accepted. The job market for React is really good, and the future of this framework looks bright. For people who are just starting to use front-end JavaScript frameworks, startups, and developers who like flexibility, React looks like a good choice. The ability to integrate seamlessly with other frameworks provides a huge advantage for those who want flexibility in their code. Each library has its own advantages and disadvantages. Depending on the project you are working on and your personal needs, one of them will be more suitable than the other. It is very important to do some research yourself before making a decision, especially if you are working on a business rather than a personal project.
