October 9, 2020
With the change of the World Wide Web towards the phenomenon Web 2.0, the Internet has been continuously developed and supplemented over the years by new innovative technologies, which from now on increasingly rely on User Experience (UX) and try to put user interaction more and more at the center of events.
As a result, in addition to the further development of the Internet, the applications also started changing, now with the purpose of becoming more and more interactive. Desktop applications were gradually replaced by the classic web applications and these in turn were replaced by the so-called “Rich Internet Applications” (RIAs), which serve as the current standard of web applications. RIAs attempt to combine the ease of use, responsiveness and offline capability of desktop applications with the availability and ease of installation of a Web application to achieve better UX.
In order to counteract this complexity and to facilitate the development of SPAs, an important tool called SPA Framework has been established over the years. It provides the developer with a programming framework consisting of libraries including their functionalities and methods to support them in the implementation of SPAs. Due to the continuous change of the web, that was already mentioned, not only web applications but also SPA Frameworks are constantly renewed and improved. Because of this, the changes have become rather hard to comprehend by now. To achieve a better understanding, three of the most popular SPA Frameworks will be presented and evaluated based on predefined requirements.
The open-source framework Angular, released by Google in 2016, was developed with the goal of positioning itself increasingly in the area of cross-platform development. An important aspect of Angular is therefore the platform independence, through which the framework can be utilized on multiple platforms such as desktop or mobile. Platform independence is also one of the most important features of SPAs.
Angular uses a component-based architecture that ensures a high degree of reusability of components throughout the entire application and is characterized by both high code quality and high performance, which is due to factors like hierarchical dependency injection or Angular Universal. Angular also uses server-side pre-rendering, which ensures that all search engines access the application’s content and that social media apps can display site previews correctly.
Weaknesses of Angular are for one thing the decreasing community support, which is sometimes reflected in both learning interest and user satisfaction rates. The second problem is the steep learning curve due to the complexity and elaborateness of the framework.
In summary, Angular is ideally designed for enterprise level applications. This is due to both TypeScript, whose tooling provides advanced auto-completion, navigation and refactoring services, and to the verbosity of the SPA framework, which involves a large learning curve and a large investment of time.
Even though React has a relatively high learning curve due to the large number of React tools, many developers say that it makes app development easy and understandable and can be perfectly used to create an advanced, modern user interface.
The second version of the open source framework Vue, released in 2016, was developed by Evan You with the goal of combining the best of Angular and React. In many ways he was successful with that plan.
For example, Vue offers bidirectional data binding, server-side rendering, TypeScript and JSX support and a similar component-based architecture to Angular. All these features have been combined into a handy, lightweight package that allows Vue to outperform React or Angular in both size and performance.
Due to its compatibility with other SPA frameworks, its small size, simple structure and extensive documentation, the open-source SPA framework also requires a very short learning curve, which makes getting started with Vue much easier. Thanks to, for example, the good CLI, a Vue project can be created in just a few clicks and a Vue component can be easily integrated into existing applications.
In addition, Vue impresses with its flexibility in data flow, as it supports both bidirectional communication, which makes handling HTML blocks easier and faster, and unidirectional communication, which is important when working with different components. Like React, Vue also makes use of a flexible ecosystem that can be customized to the requirements of an application of any size, giving the developer a lot of freedom and the possibility to combine Vue with different libraries.
However, too much freedom and flexibility can also have a disadvantage in the decision-making process, as the developer must find the most suitable library among a multitude of useful libraries.
All in all, Vue is especially suited for the rapid development of cross-platform solutions. It provides a basis for sophisticated SPAs, as well as a beneficial solution for applications where the performance of a good code organization or application structure is paramount.
Since each of the frameworks presented contains different functionalities and methods as well as different advantages and disadvantages, it is very difficult to identify a winner or a “go-to SPA Framework”.
However, to facilitate the decision process for one of the presented frameworks, it makes sense to define predefined requirements for the framework, which are tailored to the individual use case, and to weight the SPA Frameworks comparatively. This way, a decision for the most suitable SPA framework for the application can be made. Important requirements could be for example the following:
Based on this example, the decision would probably be made in favor of the SPA Framework Vue, since it fulfills all requirements except for the fact that, unlike Angular or React, it is not supported by Internet giants such as Google or Facebook, although it is now supported by companies such as Alibaba or projects such as Laravel.
However, since we are constantly changing in the world of the Internet, we can expect a lot of movement and dynamics in the market for SPA frameworks in the next few years, which is a good thing for us developers and constantly brings new opportunities.