RealWorld Project: Frontend Framework Comparison

Original author: Jacek Schae
  • Transfer
The material, the translation of which we bring to your attention today, is an updated, taking into account the situation in 2018, version of the article on the study of frameworks, which was published in December 2017.

image

During the study, an application is used, versions of which were created as part of the RealWorld project using various frameworks. Here you can’t talk about the complete identity of different application options, nevertheless, they were created on different platforms, but this approach allows you to realistically analyze and compare the characteristics of different frameworks. If we talk about this application, we can note the following features:

  • Real tasks. RealWorld is an application whose functionality goes beyond the standard “to-do list”. Such applications are usually very simple, they do not reflect everything that is necessary in these programs.
  • Standardization. Each version of the application meets certain requirements. In particular, these requirements describe the server API, static markup, and application characteristics.
  • Expert support. Applications are either written by high-end specialists or verified by them.

In preparing this study, comments on its previous version were taken into account. In particular, the Vue framework has not been studied before, but now it is on the list. It is worth noting that the Angular version used for development is involved here, but using the production version of this framework in the application is just a matter of time.

Frameworks


The study includes all the frameworks listed on the project page . When selecting frameworks, for example, their popularity was not taken into account. The main requirement is the availability of an experimental application in the RealWorld repository.


Study frameworks

Analyzed Characteristics


In the study of applications developed using various frameworks, the following characteristics were taken into account:

  • Application performance. How long does it take for the application to load, display on the screen and be ready to work with it?
  • The size of the finished application. What is the size of the application? Here, only the sizes of the compiled JS files were compared. In all cases, the same CSS rules were used, the corresponding materials were downloaded from the CDN. Everywhere the same HTML markup was used. The program code prepared by means of all frameworks was compiled or transpiled in JavaScript, as a result, only the sizes of the resulting JS file or files were compared.
  • The number of lines of application code. How many lines of code need to be written in order to create a RealWorld application that meets the proposed requirements? It is worth noting that in some application options secondary additional functions are included, but this does not affect the final result too much. During the analysis, only the folder of src/each application was examined .

Performance


Here we used a metric such as the First Meaningful Paint , obtained using the Lighthouse tool that comes with Chrome.

The faster the application page is displayed, the better it will be accepted by users. The Lighthouse tool also allows you to measure the indicator of first interactivity (First Interactive), but it is still in beta testing and is almost identical for all application options, so here we limited ourselves to the indicator of the first significant page display.


The first significant page display for different frameworks in milliseconds. The lower this indicator, the better.

If we consider the results, we can say that they are all good enough and in practice it will be very difficult to notice the difference between them.

Application size


Here we analyzed the amount of data transferred, obtained by means of the Network tab of the Chrome developer tools. All that was transferred from the server was taken into account, including headers and the response body. The smaller the file of the finished application - the faster it loads, and the less time it takes to parse it in the browser.

This indicator depends on the size of the framework code, on external dependencies added to the project, and on the quality of the tool used to create assemblies.


The size of the transmitted data in kilobytes. The smaller it is, the better.

You can see that the leaders in this indicator are Svelte, Dojo 2, AppRun and Crizmas MVC. It is still difficult to say something definite about ELM, especially considering the data on the size of the program code, which we will discuss below. In addition, it would be interesting to look at how Hyperapp will show itself in such a comparison. Perhaps we will be able to explore this framework next time.

Number of lines of code


Counting the number of lines of application code was performed using cloc . Only files in the folder were processed src. Blank lines and comments were not taken into account. Why is the number of lines of code needed to build an application an important metric? Here's what Edsger Dijkstra said about this: “If debugging is the process of removing errors, then programming should be the process of introducing them.”


The number of lines of code that you need to write to create the application using different frameworks. Than this indicator is less - the better.

The fewer lines of code you need to create an application, the less likely it is to do something wrong. In addition, projects represented by less code are easier to maintain.

Summary


This material presents the results of the analysis of web frameworks for several characteristics. Of course, choosing a framework for a project is a much larger task than taking into account the loading speed of applications written using different frameworks, taking into account the size of their compiled files and the amount of code that needs to be written in order to reach the required functionality. However, we believe that this study will allow us to look at various frameworks from a new point of view, which means that it will help those who are busy choosing a platform for their project to make decisions.

Dear readers! What considerations do you follow when choosing frameworks for front-end development?


Also popular now: