Web frameworks

Web frameworks are handy tools for building complex web structures - sites, Single Page Application (SPA), microservices, etc. The main advantages of web frameworks include a convenient model for managing the business logic of complex applications, standardization of the project structure, considering generally accepted standards in the development model, many optimized ecosystem software, and much more.

In addition, standardization of the development process based on the framework makes it easier for experienced developers to maintain projects and allows "newbies" to get up to speed faster. It is more profitable for large companies with long-term, high-load projects to use frameworks, however, you need to understand that simple applications are still easier and more convenient to implement in pure programming languages, for example, JavaScript.

React

Let's start our review with React, as it clearly stands out from the rest, at least in that it is still officially positioned as a library, and not as a web framework.

React is a JavaScript library (hereinafter we agree to use the term framework on an equal basis) with open-source code.

React was created in 2011 by Facebook. The official "development father" is Jordan Valke. The library was open source in May 2013. Now (December 2020) the current version of React is 17.0.1.

In February 2015, React Native was introduced, a tool for developing native React syntax for Android, iOS and UWP applications, which is currently the most popular among similar options (NativeScript from Angular or Weex from Vue). React Native was open sourced in March 2015.

Compared to competitors like Angular and Vue, React is the most flexible option in terms of customization and optimization. Applications built with React have arbitrary structure, which is a big plus for an experienced developer. Virtually unlimited access to low-level "things" allows you to better optimize and manage complex applications. However, flexibility and depth in terms of low-level are not only an advantage of React, but also a disadvantage. For example, a novice developer with a high degree of probability will not be able to make good use of these features but will create a less efficient solution with cumbersome and unoptimized code than if he used analogues in the face of Angular or Vue. So, when developing a small application like an online store, often you don't need a special low-level, which leads to writing a lot of unnecessary code.

Speaking about data circulation in the application, it is worth noting concepts such as Two-Way Binding, which is used in Angular, V-model from Vue, or similar convenient directives from other frameworks that allow you to implement bidirectional data flow. In React, the main concept of data circulation is the FLUX concept, which consists in a unidirectional flow between UI (User Interface), BL (Bisines Logic) and their components. The FLUX concept is relatively complex to implement and requires a lot of code to write, but it has certain advantages in terms of performance and security.

React syntax is based on JSX (or TSX) markup, which is a collection of HTML and JavaScript (JS) or HTML and TypeScript (TS) code, respectively. Also, it is possible to write in pure JavaScript or TypeScript.

Speaking of relevance, React is beneficial to use when writing a large, complex application with a lot of dynamic interaction, where serious optimization is required. For example, SPA with numerous sockets, iframe, etc.

As already mentioned, the flexibility of React is provided by the large number of approaches for creating and structuring projects. For example, the data transfer model can be different. It is possible to transfer data directly using "props" or by connecting third-party libraries such as Redux, MobX, etc. Also, in React there is an opportunity to use Context'a and full support of TypeScript is implemented, which is gaining more and more popularity lately.

Introduced in version 16.8.0, "hooks" (hooks) allow functional components to use states and other features without resorting to using classes. It is worth noting that the React developers themselves, represented by Facebook, have recently been actively promoting functional programming, focusing on its simplicity and relative accessibility for beginners. However, the component approach can also be used, which is an additional coin for React's flexibility.

When it comes to development for mobile platforms, React Native is a well-established leader among competitors in this area (NativeScript from Angular and Weex from Vue) and will probably not give up in the future.

As noted earlier, the undoubted advantage of using React is the support of this Framework by the IT giant in the person of Facebook, which reduces risks for large companies and allows you to implement long-term scalable projects based on React without fear of stopping the development of technology. In addition, this library is used by a huge community of developers, and, accordingly, has a lot of educational materials in the open access and ready-made "solutions" for all sorts of problems that arise during development.

Angular

Angular, unlike React, is officially positioned as an open-source framework, and TypeScript serves as the language for development on it (it's worth mentioning that Angular itself, since version 2, is written in TypeScript). This makes it possible to achieve high comfort in work for experienced developers, but it causes great difficulties for beginners. That is why Angular is recognized as the most difficult framework to learn among those discussed in this article.

The history of Angular begins in 2009 with the creation of AngularJS by Misko Hevery and Adam Abrons, however, it would be more appropriate to pay attention to Angular, starting with version 2, released on September 15, 2016, and written entirely in TypeScript. A team of developers from the notorious IT giant Google is responsible for the development and development of Angular, which is an undoubted advantage and guarantees the support and development of the framework in the future. Now (December 2020), the current version of the framework is Angular 11, released in November 2020.

The main development in Angular is a class-modular approach and the use of ready-made built-in solutions for scaling, testing, and optimizing applications. Angular has a very strict project structure, unlike, for example, React, and thanks to the static typing of TypeScript, the developer gets rid of many of the mistakes that are allowed in the early stages in JavaScript frameworks at the development stage.

The rigid structure of Angular applications forces developers, both novice and experienced, to follow certain patterns when developing, which favorably affects the switching between projects.

Achieved a kind of versatility for everything and everyone. However, this coin also has a downside. A truly experienced programmer is sometimes limited in tools for depth and optimization at low levels. In terms of data circulation, Angular uses the Two-Way Binding concept to allow data to circulate bidirectionally.

Another plus of Angular relative to its competitors is its so-called "boxiness". The essence of this property lies in the fact that Angular is self-sufficient; when developing on it, there is no need to turn to third-party tools (for example, plugins for working with the server, validation, etc.). Everything is already going "out of the box" (hence the term "box"). It is enough for a developer to install a framework - and he gets a full-fledged tool for almost any task.

However, the all-inclusive approach has the disadvantage (though not critical) of the large size of the framework relative to competitors. So, for example, when creating a small site, the developer does not need a wide range of functionality, which is present in the framework by default, but he must install the entire package. Also, the disadvantages of Angular include, as mentioned earlier, a high entry threshold for beginners and a small amount of training materials in the public domain.

This is already a rather serious problem. For example, for programming in Vue or React, a beginner just needs to know JavaScript and some concepts inherent in these frameworks. In the case of Angular, you need to understand TypeScript and the RxJS library, which are very handy tools, but add an extra layer of abstraction for beginners. Another disadvantage of Angular is its use of the DOM model, which is slower compared to the Virtual DOM used in React and Vue. However, here, too, Google engineers made several optimizations (for example, DOM manipulations are separated from the application logic, which improves code testability).

Speaking of relevance, Angular is well suited for writing medium and large applications, primarily due to its "boxiness" and convenience for experienced developers, as well as due to the strict structure of projects and static typing of TypeScript.

When it comes to mobile platforms, Angular's NativeScript has not gained much popularity among developers, and is very much inferior to React Native.

Vue

VueJS is an open-source progressive JavaScript framework that can be used as a library.

The first version of Vue appeared in October 2015. The "developer father" of the project is Evan You, a former Google employee. In September 2016, version 2.0 was released, bringing the ability to render on the server side (SSR - Server-Side Rendering). In September 2020, version 3.0 was released, which is currently relevant (December 2020) and has several serious optimizations and improvements, including an almost complete rewriting of Vue to TypeScript (96.8%), and the ability to use TypeScript in application development, introduction API-composition and more.

For a longer period of its existence, the framework in question was supported by only one developer, already mentioned by Evan Yu, which greatly reduced the interest of large companies in Vue, since it did not provide guarantees of stable support and development of the technology. However, recently, a team of developers from various companies (Netlify, Netguru, Baidu, Livestorm) has been working on the framework and its popularity is growing.

The main advantage of Vue is its simplicity in terms of learning and effective use. That is, even with minimal knowledge, you can create a lot, and learning the framework takes literally 2-3 days. Of course, in the latest version (3.0) a lot of new things have appeared, but Vue is still the easiest framework to learn in relation to its "big brothers" in the face of React and Angular.

The second advantage of Vue is its relative convenience due to hiding certain abstractions from the developer and thus getting powerful enough functionality with a minimum amount of code. However, as in the case of Angular, this limitation can cause a few inconveniences for an experienced developer.

Another advantage is high performance due to the use of the Virtual DOM model, the support for which was completely redesigned in Vue 3.0, which made it possible to achieve even higher performance even in comparison with React, which similarly uses the Virtual DOM.

In Vue, just like in React, it is possible to use third-party application state management libraries like Redux.

One of the major improvements in version 3.0 is the introduction of a new API, namely API - Composition (an analogue of React hooks), which is a new syntax that allows you to use functions to implement code with a focus on the capabilities they implement, rather than objects. In terms of data circulation, Vue uses the concept of bi-directionality, the so-called V-model (an analogue of Two-Way Binding from Angular).

For mobile development on Vue, there is Weex, a cross-platform UI framework built by the Alibaba Group and incubated by the Apache Software Foundation (ASF). Also, Vue has NativeScript-Vue in its arsenal - another option for creating native applications. However, in terms of popularity among developers, none of the presented solutions can compete with React Native, which is still used in about 70% of cases.

Recently, Vue has received more and more attention from developers, and the community is growing at a tremendous pace. There are many ready-made "solutions", training materials, etc. However, the development team behind this framework still cannot match either Google (Angular) or Facebook (React) in terms of "power", which is a negative factor when companies choose the technology for implementing large business projects.

Conclusion

In conclusion, it is worth mentioning such an important point as the context of using a particular technology. You need to understand that now, among the solutions discussed above, there is no universal one that has an advantage in any situation. Each of the reviewed frameworks has both advantages and disadvantages, there is no clear leader or lagging. The choice of this or that tool largely depends on the context of use. This means that the developer, when choosing a framework, must understand in as much detail as possible what he wants to implement. Will it be scalable, supported for a long time, what functionality should it have, how soon should it be implemented, etc. Of course, the features and perspectives of web frameworks play a big role, but not always the fundamental one.