Which is better Respond JS or Angular

Angular, React or Vue.js? A decision aid

How is the question answered nowadays, with which technology a web application should be implemented? Angular, React or Vue.js? The development of web applications in the form of Multi Page Applications (MPAs) using the description languages ​​HTML, CSS and JavaScript is increasingly being displaced by the increasing number of Single Page Application (SPA) frameworks. This trend has been going on for 10 years, which has resulted in a multitude of different frameworks with different approaches. As different as the approaches of the frameworks are from one another, the common goal is the same: High-performance web applications with a good user experience.

What is a single page application anyway?

Many well-known companies have already switched to the SPA. Netflix, PayPal or Google Maps users already use single page applications on a daily basis. But what is a SPA anyway and what advantages does it offer?

For a general understanding of the term single page application, Dr. Siepermann from the TU Dortmund an apt definition:

... a web-based application or website that, instead of being spread over several pages as usual, is completely implemented on one page in order to give users the impression and feel of a desktop application. The contents of the application are either loaded once at the beginning or dynamically during runtime as soon as users want to perform an action.

From this definition, the key elements of a SPA become clear. The web interface offers a similar scope of functions and complexity as a desktop application, whereby the user is taught to use a full-fledged desktop application instead of a simple web application.

With the increase in complexity, SPAs must inevitably support some form of modularization. The complete application can be implemented with the help of individual components, which increases the maintainability and reusability of the functionalities.

These individual components enable dynamic reloading of the content during runtime. These components can either be updated and take on new values, or they can be completely replaced. These update options do not require a new initialization of the page and thus offer an improved user experience.

Furthermore, you can interact with the application without restrictions and trigger actions. The actions are processed in real time like a desktop application and the surface reacts dynamically to the event.

The description already shows some advantages over MPAs, but what does that mean in concrete terms?

For a better understanding, a few advantages are explained in more detail below:

1. Code maintainability

Due to the increasing complexity of web applications, the maintainability of the code is an important criterion. The frameworks attempt to address this problem by using a variety of design patterns. For example, the Vue.js framework uses an MVVM architecture. This abbreviation stands for model, view and view model. The model contains the logic and the data of the application. The view reflects the visual representation of the application that the user uses for interaction. The view model forms the link between the previous layers and contains the logic and data of the view. This layer reacts to the input of the user.

Due to this strict separation of the individual components of the application, there are no dependencies between them. The result of this design pattern is a structured and maintainable program code.

2. Modularity

A web application basically consists of a client and a server. The basic principle is based on the fact that the client makes various requests to the server and receives a response. However, in the case of a SPA, the server's response does not contain an HTML file, but rather structures the data using a format such as JSON. This decouples the server-side implementation or application logic and the display on the client. The client just needs to know which HTTP requests are available for the information it needs. This enables a SPA in the web browser and a mobile application to be supplied with information from the same server.

3. Improved user experience

A SPA offers an enormously improved user experience compared to MPA. This is based on the fluid and responsive behavior of a SPA. The user experience is no longer disturbed by the typical reloading and rendering of the application. In addition, the application can provide the user with significant information about the status during a query with an increased processing time.

The most popular SPA frameworks

The selection of the frameworks, which are discussed in this blog post, was made based on the popularity of the frameworks. Google Trends was used to analyze the number of web searches over the last 12 months for the Angular, React, Vue.js and Ember.js frameworks in Germany. The result from Google Trends is shown in the following figure:

This graph shows the number of web searches of the individual frameworks from May 27, 2018 to May 25, 2019. Angular and React clearly stand out from Vue.js and Ember.js.

These trends show that the Angular, React and Vue.js frameworks are currently among the leading frameworks.

Angular

Angular is currently one of the most popular SPA frameworks. At the time of development on GitHub, it had a total of 43,000 stars. Angular is the new version of the previous AngularJS framework and is developed by Google and is available as open source software under the MIT license.

Angular does not call itself a framework, but a platform for creating web applications. It was developed based on TypeScript, which means that standard development also takes place in this language. The designation as a platform comes from the basic idea that Angular applications can serve different platforms such as smartphones, desktops or televisions.

React

React is on the same level as Angular. React currently has a total of 116,000 stars on GitHub. React was published in 2013 and is developed by Facebook. It is also released as open source software under the MIT license.

The designation as “Framework” is also incorrect in React. React sees itself as a view library, as it only reflects the view in relation to the model-view-controller principle. JavaScript was used for development, but the use of the JavaScript extension JSX (JavaScript XML) is recommended by React. Using JSX produces a combination of JavaScript and HTML. This creates components that contain both markup and logic.

Vue.js

Currently, Vue.js cannot keep up with the popularity of Angular or React in German-speaking countries, but this framework is currently enjoying increasing popularity from the community. This popularity is clear from the 120,000 stars on GitHub. Compared to Angular, that's three times the amount. React can also stay within this range of numbers.

According to Google Trends (see graph above), Vue.js is not as popular in German-speaking countries as Angular or React. With a look at the Asian region, however, Vue.js is currently the most popular framework, which results in the high number of stars on Github.

The framework was published in 2014 by former Google employee Evan You as open source software under the MIT license. Just like React, Vue.js was implemented using JavaScript, but it also offers TypeScript support.

Vue.js offers the user scaling options to suit the application. You can choose between a lightweight library or an entire framework. Similar to React, the library only offers functionality for the view level and can therefore be used for integration into existing projects.

Comparison criteria

The comparison was initially started with an evaluation of broad subject areas. This was carried out based on literary sources and resulted in the following topics:

  • Security: With the increase in functionalities, confidential information is stored by web applications. This increases the number of attacks on such systems enormously. The top 10 security risks of the Open Web Application Security Project (OWASP) are also taken into account.
  • Modularity: An increased range of functions results in a more complex application, whereby the modularity reflects an important aspect for modern web applications. A division into smaller, isolated components should be made possible so that these can be reused in later applications.
  • Performance: The user experience can be seriously impaired by the performance. Furthermore, unnecessary data transfers should be reduced.
  • Testability: Test-based development is a common practice these days. An application must be adequately tested for correctness by means of automatic tests.
  • Maintainability and future security: A high maintainability of a project is crucial for the future. In addition, the framework used should be continuously developed.
  • Platform independence and compatibility: Nowadays, applications have to work on mobile devices as well as in browsers with the same range of functions.
  • Popularity and available know-how: Increased popularity offers a larger community. This means that a wide range of know-how is available through forums or blogs.
  • Simplicity and Ease of Use: The framework should support the developer in the development process of the application. In addition, standardized processes should be in place.
  • Suitability for the implementation of Lean and Fat SPAs: A flexible adaptation to the implementation of Lean or Fat SPAs should be made possible. This means that smaller applications are not unnecessarily overloaded by a heavyweight framework.

Guiding questions were formulated in line with these individual subject areas, which deal with specific aspects of the topic. As a result, the frameworks were examined in this comparison with 62 different criteria. This should cover all relevant features of the framework.

Comparison of SPA frameworks using FrameworkBuddy

The results obtained about the frameworks were used in an application called FrameworkBuddy made visually accessible. This application was published as open source software on GitHub.

In this application, the user can weight the key questions from the comparison to match his project. As a result, the criterion is included or neglected in the comparison. The questionnaire is shown as an example in the figure using a key question.

In addition to the theoretical view of the criteria, a survey was carried out internally at adesso with experienced developers who already have experience with the Angular, React or Vue.js frameworks. This resulted in a weighting of the respective key questions in the practical context. As a result, the result determined is practice-related and optimized through the application.

The result should be viewed as a suggestion, as the selection should also include other factors to make a decision.

Which framework should you use now?

After a precise comparison of the three frameworks, the question now arises as to which framework could be the right choice. If you take a look at the application, you will see that it depends on the particular application and that other non-technical factors should be taken into account.

Due to the different approaches of the frameworks, the correct selection of the framework depends not only on the technology, but also largely on the development team. Teams with a strong Java background would feel more comfortable in the Angular environment with the many structures provided by TypeScript. Teams with a strong JavaScript background would miss the usual freedom and flexible options in Angular. Therefore, React or Vue.js would be more suitable here.