Frameworks

At the core of a web application, there is custom-written code that provides the unique experience and binds the other components together. Some of it will run on the client (the browser) to facilitate interaction with the user. Other parts will run on the server, for example to process data and interact with other services, such as databases.

There are countless ways to shape this part of the application. For this project, I will focus on JavaScript meta-frameworks. These frameworks build on UI-frameworks (such as React or Vue) to provide additional functionality and solve some issues that come with using them on their own. Their full-stack nature means that front- and back-end code is more closely linked than in more traditional setups where the client and server are kept mostly separate.

Selection

To come to a list of frameworks for consideration, I combined selections from several recent sources¹²³. From these, the most popular frameworks were chosen based on the popularity (number of stars) of the projects’ repositories.

This lead to the following selection of frameworks:

• Next.js
• Gatsby
• Nuxt
• Meteor
• Astro
• Remix

Criteria

To come to an objective choice, I will compare the frameworks based on the criteria listed below. These are weighted on a scale from 1 (unimportant) to 5 (very important).

Target use

Weight: 5. Different frameworks target different niches of web applications and sites. The target use of the framework should be in line with my use of building a photo gallery.

Client-side interactivity

Weight: 5. As the photo gallery is an application rather than a website, smooth operation without having to reload pages is expected. The framework should be able to handle such interactivity on the client.

Data transmission

Weight: 5. The framework should assist in using data (taken from, for example, the database) across different parts of the application, both on the server and client.

Server-side rendering

Weight: 3. Frameworks can provide different types of rendering strategies (when the pages are created from the code). Server-side rendering can make sure the application is immediately available after loading the page, and allows for basic support of browsers without JavaScript.

TypeScript support

Weight: 3. TypeScript is a programming language that extends JavaScript with static typing. By adding type-checking, it can help prevent errors at runtime. Nowadays, it is supported by many libraries and tools in the JavaScript ecosystem, and I would very much like to use it for the photo gallery as well.

Local deployment

Weight: 2. An application written in the framework should ready to serve from one’s own machine without much hastle.

Ease of use

Weight: 3. The framework should have a good documentation and not too steep learning curve, to be able to use it to build a completed application in limited time.

Community

Weight: 3. A larger community makes it easier to find answers to questions, both those previously answered and your own. In addition, large communities signify active products, which make the framework more future-proof.