preface
Every developer or software engineer must face a question as they begin their career: Which language, framework, or tool to learn first?
Answering this question is a bit difficult, as there are a number of languages and frameworks available in the software development industry. JavaScript has become the backbone of most development processes, so I wanted to compare three javascripts based frameworks. I chose Angular, React, and Vue.
Background knowledge
Misko Hevery, an Angular Google employee, was working on a side project to simplify the process of building Web applications. He released the solution as an open source project in 2010, called AngularJS, and it has been actively used by some well-known enterprises. A few years later, due to new advances in JavaScript, the team was forced to rewrite AngularJS in TypeScript, removing the “JS” from the framework name to avoid confusion. Angular is updated twice a year. The last update was Angular 9, released on February 6, 2020.
React has long been a leader among JavaScript frameworks. It was originally developed by Facebook to meet the needs of its product, and was successfully unveiled to a technical audience and opened source in 2013. The essence of React comes from an early prototype created by Jordan Walke, fax.js, which was first deployed in Facebook’s news feed in 2011. The latest version of React is 16.13.0 and was released on February 26, 2020.
After years of working with Angular, Evan You, a former Google employee, decided to create his own lightweight framework that would include the best features of the framework. The new framework vue.js was opened in February 2014, and since then vue.js has gained tremendous popularity. The latest version is 2.6macross and was released on February 4, 2019.
Frame popularity
Angular and React are long-standing rivals. They are all powerful, up-to-date, and widely used JavaScript frameworks, and all are facing a major change: the competition between them has become a battle of popularity. We’ll look at four main metrics to identify the most popular frameworks: NPM Trends, Stack Overflow Survey, GitHub Stars, and open job postings.
-
React remains the most popular JavaScript framework in the Node Package Manager report. From December 2018 to July 2020, it was downloaded about five times more than vue.js and 13 times more than Angular.
-
According to the 2019 Stack Overflow Developer survey, React is most popular among developers (74.5%), followed by Vue. Js (73.6%), and Angular.js (57.6%).
-
For the fourth time JavaScript Risiing Stars has tallied up the number of new GitHub Stars added each year, and the statistics are startling: Vue. Js is number one with 31.4k stars, React is number two with 22.4K stars and Angular.js is number four with 12K stars.
-
A search on Indeed’s job site on July 8, 2020 showed 43,678 jobs on React, 10,458 on Angular and only 1,391 on Vue.js in the US.
So we can argue that React is a winner in terms of jobs and enduring popularity among developers. However, we can also see a growing backlash between Vue.js and React due to the unwavering support of the vue.js community. Angular remains firmly in the middle and receives positive feedback from both developers and employers.
Framework components
The performance of a framework is determined by its most valuable parts: its components. Their workflows are related to how input data is received and how it is responded to.
-
Angular components are named directives, and they are tags on DOM elements tracked by Angular. A Ngular treats the UI part of A component as an attribute of an HTML tag and separates the UI from the component’s behavior as JavaScript code.
-
In contrast to Angular, React combines UI and component behavior. Simply put, the same piece of code is responsible for creating UI elements and controlling their behavior.
-
In vue.js, the UI and behavior are part of the component. The framework is also highly customizable, allowing the combination of UI and component behavior in scripts.
Performance and frame size
-
Angular uses the real DOM, so it is best suited for single-page applications where content is updated from time to time. This can make the update process very slow, and in the case of missing streams, it can take a long time to figure out what the problem is. Fortunately, the two-way data binding process replicates all the changes made in the model into the view in a secure and efficient way. Due to the wide range of features available, the application is much “heavy” (about 500KB) compared to Vue and React, which degrades performance slightly.
-
In contrast to Angular, React uses the virtual DOM to enhance performance for all applications, large and small, that require regular updates. One-way data allows for better project control. The downside may be that developers need to constantly upgrade their skills to accommodate React’s evolving features. React is much smaller than Angular (only about 100KB) because it doesn’t provide a large library.
-
Vue also uses the virtual DOM, so changes in the project do not formally affect the DOM. Vue is the smallest of the three (about 80KB), which greatly improves its performance.
Vue also uses the virtual DOM, so changes in the project do not formally affect the DOM. Vue is the smallest of the three (about 80KB), which greatly improves its performance.
In summary, considering performance, Vue and React make it easier to develop maintainable and bug-free Web applications.
For anyone considering learning a new framework, it is important that the process of mastering a new framework is simple enough. So, of the three of them, which one is best for learning?
The learning curve
Vue.js is probably the easiest to learn for two main reasons:
- It requires no special setup. First, you simply import the Vue library into an HTML file and add some JS (for larger Vue projects).
- No need to learn large special syntax. The usage of Vue is based on JavaScript and HTML, enhanced by directives like V-for that are easy to interpret.
Angular and React both require more complex project Settings. However, the availability of installation Settings simplifies this task: create-React-app, Angular CLI, and Vue CLI (for more complex projects).
To master Angular and React, you also need to learn the corresponding TypeScript or JSX syntax.
Angular’s learning curve is considered much steeper than React’s. Angular is an evolving and complex framework that offers multiple options for solving a single problem.
React also requires constant learning as it is updated frequently, but it is much easier to learn with beginner tutorials and basic JavaScript knowledge. The main difficulty is the Redux library.
The application case
-
Angular was developed by Google and used heavily in its AdWords application to maximize performance. Other sites that use Angular include Guardian, Lego, Nike, PayPal and Weather.com.
-
React was originally designed for Facebook and is still actively used by the company to create a variety of products, including Twitter, Instagram, whatsapp, and WordPress.
-
Unlike Angular and React, Vue doesn’t have powerful customers implementing it in each of its products. Thankfully, though, it’s flexible. It has been popularized by such popular brands as 9Gag, Nintendo, GitLab and Grammarly.
Development speed
-
Although changes can be made easily with React and Angular, the speed of your application depends on the number of libraries with developer-available functionality.
-
The React architecture is easier to scale than Angular, but developing Web applications in Angular is faster than React.
-
All three frameworks are good choices for presenting a relatively complex UI through user interaction. However, if you’re looking for something to add immediately to your application, Vue is a great choice. Vue makes the transition from prototype to production easy.
conclusion
Obviously, all three frameworks are very powerful, but very different at the same time. They have their strengths and weaknesses, and there is no universal formula that can be used to determine an outright winner. Which framework is good depends on the application you are creating and your specific needs. It is necessary to make a thorough study before making a decision. This is especially important for companies engaged in commercial ventures rather than individual projects.