Back to all articles 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.
A special type of RIAs, that implements these conditions particularly well and is already used by companies such as Facebook, Google or Instagram, is the so-called “Single-Page Application” (SPA). With the single-page principle, there is no longer a complete page change as is common with traditional web applications, but only a change in the user interface, which leads to a direct response to user input while reducing waiting times. Since, in contrast to traditional Web applications, the business logic implemented by JavaScript is located on the client side, the complexity of SPAs increases on the client side, making it more complex and difficult for the developer to create.
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.
Angular
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.
Strengths
- Platform independence
- Component-based architecture
- Typescript
- Google Long-Term Support
Weaknesses
- Community Support
- Complexity
- Steep learning curve
React
Unlike Angular, which provides an efficient SPA framework, React is a JavaScript open source library including JSX compiler, which is mainly focused on the user interface and allows to create reusable components. Thus, React provides a UI-focused solution that ultimately offers users a very responsive and fluid loading interface.
After the JavaScript library was released as an open source tool in 2013, it quickly gained popularity thanks to its revolutionary approach to user interface programming. Behind React is not only the internet giant Facebook, but also a steadily growing community with an immense development speed. React solutions are SEO-friendly and at the same time offer high performance and flexibility through the use of the Virtual DOM. The reusability of components and the unidirectional data flow, which guarantees the stability of the program code, also makes programming both accurate and convenient for the developer.
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.
However, since React is just a JavaScript library, it should be noted that it is better suited for developing smaller applications, as it can be difficult to select and assemble the right tools for large applications.
Strengths
- Virtual DOM
- Reusability of components
- Flexibility
- Unidirectional data flow
- Community Support
Weaknesses
- High speed of development
- React Ecosystem
- Complexity (JSX)
Vue
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.
Strengths
- Component-based architecture
- Flexibility
- Simplicity
- Small size
- Low learning curve
Weaknesses
- Community size
- Vue Ecosystem
Angular vs. React vs. Vue
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:
- It should have a modular architecture and be stable.
-> Angular, React, Vue - It should be supported by large companies and/or projects.
-> Angular, React - It should be flexible and give the developer a lot of freedom.
-> React, Vue - It should have a short learning curve and development time.
-> Vue - It should have a structure as simple as possible and be small in size.
-> Vue, React - It should achieve a high performance.
-> Angular, React, Vue - It should have an easy to understand and comprehensive documentation.
-> Angular, React, Vue - It should allow the integration of Bootstrap.
-> Angular, React, Vue - It should ideally allow reusing HTML and CSS.
-> Angular, Vue
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.