Comparison of the most popular JavaScript frameworks - which one to choose for your project?

Introducement

The JavaScript language is constantly evolving, but for more advanced and complex web applications using pure JS, even with the popular jQuery library, can be tedious. This forced people to create more and more new frameworks that help in code implementation or at least make it much easier. They also allow more than one person to work and, above all, reduce the time needed to create pages/applications by making it easier to "share" the code, as well as increasing storage and data flow capabilities.

 

So far, many tools have been developed to help with the implementation of web applications, but the offers for JavaScript developers remain in control of React, Angular and Vue. Each of them allows you to create a fully fledged, one-page application – SPA (Single Page Application) which means that the whole application or module is loaded with the first access to it).

Popularity of frameworks in 2018

Comparing downloads amount from official sources.

The State of JS Survey of 2018 -  https://2018.stateofjs.com/front-end-frameworks/overview/ shows the number of libraries that programmers usually use.

Wyniki ankiety State of JS Survey 2018

So let's look at the React, Angular and Vue frameworks.

React

The most popular framework - used by such services as Netflix, IMGUR, Paypal.

 

One of the most important things about React is that it uses a virtual DOM application that is stored in the internal memory. If anything changes, the system detects changes between the current DOM and the virtual one.

 

React was created by Facebook which from the beginning to September 2017, on BSD license with pattern extension. It did not meet with approval of devs. React components are typically written using JSX, JSX (JavaScript XML) is an extension to the JavaScript language syntax Similar in appearance to HTML, JSX provides a way to structure component rendering using syntax familiar to many developers.

 

React was created by Facebook, in May 2015, under a BSD license with the exception of the patented one, which allows Facebook to terminate the license at any time. This did not meet with the approval of the developers. React components usually use JSX (Javascript XML), which is a JavaScript extension similar in appearance to HTML. JSX provides a way to structure component rendering using syntax familiar to many developers.

 

Example of react code.

Angular

Another framework after React (in terms of popularity).

It was created by Google. The first version was based on pure JavaScript (it worked like normal Javascript library). Used by services such as Youtube and Google.

 

It is based on MVC architecture (model - view - controller), it is based on two-way data exchange. This means that any change in the application view is detected and taken into account in the controller layer and vice versa. It uses Two ways data binding - every change in view means change in model and every change in model means change in view.

 

Angular 2+ has introduced a huge number of changes, the most important of which is to change the base language to Typescript, which is a transpiled JavaScript. Typescript adds static variable typing and is object-oriented and class-based.

Google's documentation is very rich. It also has its own library, which has ready-made components with functionality.

 

Angular example code.

Vue

JavaScript Framework which gained popularity mainly due to low input threshold. Used by services such as WizzAir and GitLab.

Vue allows you to store HTML templates in internal memory and use them in many places, without the need for separate implementation. Like React, it uses a virtual DOM.

 

Vue uses a HTML-based template syntax that allows binding the rendered DOM to the underlying Vue instance’s data. All Vue templates are valid HTML that can be parsed by spec-compliant browsers and HTML parsers. Under the hood, Vue compiles the templates into virtual DOM render functions.

Vue example code.

Specyfikacja

Performance: (size of library)

  • Angular: 500+ KB
  • React: 100 KB
  • Vue: 80 KB

 

Language/Technology:

  • Angular: Typescript
  • React: JSX – javascript XML
  • Vue: HTML templates and JavaScript

 

Model:

  • Angular: MVC (Model-View-Controller)
  • React: Virtual DOM (Document Object Model)
  • Vue: Virtual DOM (Document Object Model)

Which one to choose in my project?

There is no perfect choice between these three frameworks. Everyone has certain advantages and disadvantages. In order to choose the best one, you have to take several factors into consideration.

 

Vue.js is best used for low data processing applications, so called CRUD's (Create Read Update Delete), or for applications that are already in use, and to which we want to add a kind of scalability to make it easier to develop. To use this framework you don't need to introduce it in the whole application. What's more, Vue will be suitable for situations when we have not experienced developers, or those who have no previous contact with other frameworks - thanks to the fact that the entry threshold here is the lowest and the team with knowledge of pure JS, HTML and CSS is able to quickly release a working application.

 

The use of React.js can be recommended in more complex applications or those that are to be used as mobile applications in the future. Native React is the oldest and most stable technology among other "Native" applications. (with extensive documentation). In addition, React can be easily used in smaller applications that need to manage data with Redux and the new React Hooks option.

React is ideal if you don't know exactly what your application will look like in the future.

 

As far as Angular is concerned, here the matter is simple, there is no point in attaching the whole framework to a project that will have 2-3 subpages. Despite big changes and optimization, Angular is still not adapted to use it in small applications. Websites built on Angular will be too big in comparison to others. It is recommended to use Angular only in large applications, thanks to easy scaling and later expansion. The fact that Angular itself forces us to use Typescript, which is fully object-oriented and statically typed - supports the stability of the project and allows you to capture errors during the construction, and not on the client's desk.

Write comment