During the development of web development, 3 JavaScript frameworks have become well known to all front-end developers: React, Vue.js and Angular.
React is considered a UI library, Angular is a full-blown front-end framework that provides native tools for all web application development-related functions, and Vue is a progressive framework implemented as additional markup for HTML.
All three frameworks can be used almost interchangeably to create component-based frontend applications with advanced user interface capabilities. However, the final choice depends on the requirements of the project and the preferences of the developer.
Each framework has a different architecture, performance in different scenarios, ecosystem and tools, which we will try to cover in this article to better understand their usability.
Architecture
1.React
As you can see from the official "Hello World" example below, React doesn't require a specific project structure and you can start using it with just a few lines of code.
React elements are the most basic building blocks of React applications. Because React DOM ensures they are updated efficiently every time they change, they are more powerful than standard DOM elements.
Larger building blocks, known as components, define independent, reusable components that are used throughout the application. They take inputs, known as props, and create elements that are subsequently presented to the user. The most common option for structuring a project is to break the interface into components such as importing it into the main App.js component and then rendering it into the React DOM.
React is built on JavaScript, but it also makes extensive use of JSX (JavaScript XML), an extension of the grammar that allows you to create elements that contain both JavaScript and HTML. The React JavaScript API and blocks written with JSX are compatible, but for the most part, JSX is more convenient to use and avoids writing long and possibly unintuitive HTML elements using JavaScript. For comparison, below is the same component written using JSX:
and
- Vue
The core Vue.js library focuses only on the View layer. It is called a progressive framework because we can extend its functionality with official and third party libraries like Vue Router or Vuex to turn it into a real framework.
Although Vue is not related to the MVVM (Model-View-ViewModel) pattern, its design was partially inspired by it. In Vue, you'll work primarily at the ViewModel level to ensure that application data is processed in such a way that the framework can display the actual view and state of the application in a minimum number of re-renders.
Vue's templating syntax allows you to create components by combining familiar HTML with custom directives and capabilities. This template syntax is the preferred one, although pure JavaScript and JSX are also supported. Components in Vue are small, self-contained, and can be reused throughout the application. A unique feature of Vue is the so-called Single File Components (SFC) with the .vue extension, which consist of three parts - template, script and style, the meaning of which is intuitively clear to every developer.
A typical .vue file format is given below:
Template – written in an extended version of HTML, it serves as a directive to the framework on how to produce the final markup of the component based on its internal state. Allows you to create markup relative to conditions or dynamically using Vue directives (v-if, v-for, etc.).
Script – designed to write the logic of the component and control its state. Vue, like React, allows you to optionally use both JavaScript and TypeScript.
Style – contains CSS (this supports writing styles using CSS pre-processors). The written styles are encapsulated in the component and do not affect other components.
For many, the concept of placing all the necessary code for the operation of a component in one file will seem quite convenient. SFCs are the recommended way to organize code in Vue.js projects, especially large ones. As with React, it is recommended to use the App.vue core component to render your application.
- Angular
AngularJS, the original framework, is an MVC (Model-View-Controller) framework. But Angular 2 is not strictly related to MV* patterns since it is also component based.
Projects in Angular are structured into Modules, Components and Services. Every Angular application has at least one root component and one root module.
Angular modules are containers for a complete block of code dedicated to an application domain, workflow, or closely related set of capabilities. They may contain components, service providers, and other code files, the scope of which is determined by the modules they contain. They can import functionality exported from other modules, or vice versa.
Each component in Angular contains a template, logic with metadata and optional styles, divided into separate files, unlike Vue. The metadata for a component tells Angular where to find the building blocks needed to create and present the component's appearance. Angular templates are written in HTML, but can also include Angular template syntax with special directives, as is the case with Vue.
Services in Angular are used by components to delegate tasks such as retrieving data or validating input. They are a separate part of Angular applications, unlike React and Vue, which need to install additional libraries to achieve similar goals. While Angular doesn't enforce their use, it is strongly recommended that you structure your applications as a collection of individual services that can be reused.
Angular is built on TypeScript, so it is recommended to use it, although regular JavaScript is also supported.
Ecosystem
You can save a lot of time when developing applications by using open source software. Because they have gone through numerous improvements and have been used in many projects, they tend to outperform custom-designed components. It's important to consider the availability of pre-built elements, themes, and other tools that can make building your app easier.
1.React
Global state management is often used in external applications to store data such as user information, tokens, etc. Redux is the most popular global state management project in JavaScript. Most React developers use the official React binding for Redux, maintained by the project team.
Since React is very popular, with a simple search on Google or Github it is very easy to find ready-made components and packages for almost any taste and need.
The React ecosystem also includes React Native, which allows you to create native applications for iOS and Android written in React. Thus, React can be an excellent choice for creating mobile applications using web technologies.
React is part of the MERN stack, which includes MongoDB, ExpressJS, React, and NodeJS. The advantage of this stack is a single programming language – Javascript.
- Vue
Although Redux can be used with Vue, there is no official binding like there is with React. But don't worry because there is Vuex, an official Redux analogue created specifically for Vue applications and maintained by the Vue.js development team.
In the early days of Vue, it was harder to find ready-to-use components. But as the community has grown, there is a wide selection of components and libraries that can be used to speed up development.
For the development of mobile applications, there is a promising project called Weex, developed by Alibaba. However, Weex is not nearly as mature and powerful as React Native. Moreover, since the project is developed and used more in China, it is more difficult to find documentation and solutions to problems in English.
Vue is often used with Laravel due to their good integration. Laravel offers full JavaScript and CSS support, allowing you to use Vue in Laravel projects.
- Angular
For state management in Angular, there is also an official NgRx project inspired by Redux.
As with Vue and React, there are many ready-to-use components that can be easily imported into Angular projects. However, it is worth remembering that there are many official components in the Angular Material library. This is an official project from Google that offers ready-made components (buttons, lists, dialogs, etc.) for Angular applications.
NativeScript is the best option for creating cross-platform mobile applications in Angular. It can also be used with Vue, but Angular support is more advanced.
Angular is part of the famous MEAN stack, which also consists of MongoDB, ExpressJS and NodeJS. Like the MERN stack, it relies entirely on JavaScript for both the front-end and back-end.
Performance
The performance of the framework or library is another factor to consider. Performance often doesn't matter, especially if you're working on a small project. However, performance will become an issue as the size and complexity of the project increases.
However, it is worth remembering that following development best practices and monitoring code quality is often more important than choosing a framework for best application performance. That said, let's look at some performance metrics.Performance
The performance of the framework or library is another factor to consider. Performance often doesn't matter, especially if you're working on a small project. However, performance will become an issue as the size and complexity of the project increases.
However, it is worth remembering that following development best practices and monitoring code quality is often more important than choosing a framework for best application performance. That said, let's look at some performance metrics.
Perf Track performance study
The Perf Track project from Google Chrome Labs aims to test the performance of websites written in popular frameworks. Let's take a look at the data below:
🟢 satisfactory completion time
🟡 average time
🔴 unsatisfactory time
The first content render and the largest content render shows that Vue and React do a better job of loading and rendering the page than Angular, which usually takes longer to prepare the application. First input delay (3rd point) is the time interval between the user’s action (clicking on a button, entering data) and the page’s reaction to it and, fortunately, all 3 frameworks show exceptionally good results in this parameter. It's also worth noting that over 70% of Vue apps load less than 1MB of JavaScript to run, while the other 2 frameworks, and Angular in particular, typically take up much more memory. However, you need to understand that this can mean that most small projects are written in Vue, while Angular is used for larger projects.
1.React
At first look, it appears that React is the easiest framework to use; simply import the library and use the React API to write JavaScript. However, we saw how awful a simple Hello world looks right from the start! An example created in pure JavaScript, thus any aspiring React developer must accept the reality that knowing JSX is the only option, as its use is an axiom in the community for building HTML layouts for components. Initially, the requirement to partially move to a "mix" of JavaScript and HTML may appear counterintuitive.
Vue
One of the features that new Vue developers must understand is the enhanced HTML syntax with directives. The majority of basic Vue directives are intuitive, such as v-if for conditional rendering, v-for for loop rendering, and v-on for binding functionality to event listeners. Having the layout, functionality, and styles in a single.vue file with an understandable syntax simplifies component development and eliminates the need to bounce between files.Angular
The title of a full-fledged framework does not come easily, and Angular developers must get familiar with numerous principles. Angular demands developers to follow a specific structure while writing code and to consistently employ modules with services in addition to components. As with Vue, you must master new HTML syntax composed of ng-* directives. It's also worth noting that Angular works well with TypeScript, so if you choose this framework, you'll need to learn TypeScript. Furthermore, the complexity of learning increases the widespread usage of RxJS - a library for reactive programming, which allows you to efficiently arrange work with events and asynchronous code and is a more powerful, but at the same time sophisticated alternative.
Top comments (1)
hello