Comparison Table

Below is a table that compares the 6 frameworks that were looked at in this assignment. The table compares the frameworks and highlights their key differences.

Justification

All of the frameworks I looked at use both JavaScript and TypeScript, the only exception being Angular, which doesn't recommend using JavaScript. This is because Angular is built on TypeScript, so technically you can, but it isn't recommended.

Only half of the frameworks I looked at use single file components: Preact, Svelte and Vue, this is just due to how they are built.

Notably, the three frameworks that don't support single file components are the only ones that allow you to generate components through the CLI natively. This could be because the frameworks that support single file components don't see the need to generate one file through the CLI. Preact is the only framework that uses single file components that supports generating components through the CLI, but not natively, this could be because of what I just mentioned with not needing to generate single files thorugh the CLI.

Only Ember, Preact and Vue use a virtual DOM, this is because most of the other frameworks have their own way of rendering the DOM. Angular just uses the real DOM, which is why it can be slower. Aurelia uses a templating engine, which means that the UI subscribes to the event in which data is changed, and vice-versa (Aurelia, n.d.-c). Svelte doesn't use a virtual DOM because it converts the components into code that can "surgically" update the DOM (Harris, 2019).

Evaluation of each framework

Below is an evaluation of each framework based on the following criteria: ease of use, performance, community support, learning curve, popularity, and scalability in the context of SPA development.

Angular

Angular is difficult due to its complexity, however, after the initial big learning curve, it can be fairly easy to understand. Angular is a very popular framework, used in major sites you could be using in your daily life like Gmail, the Google Play Store, The Guardian and Weather.com to name a few (Patel, 2023). Angular seems set up in a way that has large-scale apps in mind, with the compartmentalisation of all of its features.

Aurelia

Aurelia is clear and very easy to use, this is mainly because of the simplicity of the jargon and formatting, it stays fairly true to HTML and JavaScript. It has a small learning curve, which isn't to say there isn't one at all, however, I found it the easiest framework to grasp in a short amount of time. Aurelia isn't very popular, I couldn't find any major sites that are built with it.

Ember

Ember is difficult to use unless you do extensive research into the jargon it uses. The learning curve is fairly steep, as you don't have to learn TypeScript, but you do need to know how to use Handlebars. Ember is quite popular, it is used to build the PlayStation Now, Apple Music and Vine sites to name a few (Built With Ember, n.d.).

Preact

Preact is an easy to understand framework. It is known to be fast, as it is essentially a minified version of React. There isn't much of a learning curve as the layout is very intuitive and According to Preact themselves, popular sites like DailyMotion, Lyft and Uber are using Preact (Preact, n.d.-b). It is built in a way that supports scalability, although you might want to consider just using React if you have a heavy and complex app in mind (Mikolaj, 2020).

Svelte

Svelte is known for its simplicity and ease of use, making it a good recommendation for a beginner. The learning curve is lightened due to the interactive tutorial intrdoucing you to concepts on their website. Svelte is not used in many big-name sites, except for TeamSpeak (Best of Svelte, n.d.).

Vue

Vue is a fast and lightweight framework that also uses single file components like Preact and Svelte. There is an interactive tutorial on their site, but it isn't as good as teaching concepts to lighten the learning curve. Popular sites like Behance, Nintendo, Gitlab and Chess.com have used Vue. (Shah, 2019)

Recommended Framework

Based on the research conducted in this assignment, the recommended framework for SPA development is Preact. This is because it is simple to use, easy to understand, has a a fairly large community (including the React community). It also has a small learning curve, because it is easy to understand how it works, although the scalability may be an issue if you need to use it for a very large app. With Preact you can use single file components to organise your code if you wish, further proving that it is a framework that works for you, instead of the other way around.

Code Example Explained

See Preact page for explained example

Working Page Example

Here is a live site and here is an image of it.