Review of HTML-oriented state managers for web development

Thumbnail Image

Files

URL

Journal Title

Journal ISSN

Volume Title

Perustieteiden korkeakoulu | Bachelor's thesis
Electronic archive copy is available locally at the Harald Herlin Learning Centre. The staff of Aalto University has access to the electronic bachelor's theses by logging into Aaltodoc with their personal Aalto user ID. Read more about the availability of the bachelor's theses.
Unless otherwise stated, all rights belong to the author. You may download, display and print this publication for Your own personal use. Commercial use is prohibited.

Authors

Date

2024-04-22

Department

Major/Subject

Tietotekniikka

Mcode

SCI3027

Degree programme

Teknistieteellinen kandidaattiohjelma

Language

en

Pages

39

Series

Abstract

Web frameworks like React and Vue.js dominate the current landscape of front-end development. Frameworks like these have a high level of adoption and are flexible and efficient. However, they fail to cater to every requirement, particularly ease of use and suitability for small-scale projects. Recognizing these limitations, this thesis compares and evaluates HTML-oriented state managers with traditional frameworks. The main goal of HTML-oriented state managers is to integrate functionality directly into the HTML seamlessly. When evaluating the frameworks the study focuses on the technologies from a developer and technological perspective. Finally, the thesis discusses the future of these technologies and how the applicable technologies align with the HTML First directive. The frameworks selected for evaluation are Alpine.js, Mavo, and Petite-vue. A basic ’todo’ app was developed for each framework to showcase the features. Numerous advantages and factors influencing the decision to not select the analyzed frameworks were identified. In a situation where you are building a Single-Page Application (SPA) and need things like feature authentication, the currently widely adopted frameworks still provide the best options. The HTML-state managers studied were found to have the best applicability when the user wanted to introduce simple interactivity to the web page. The analyzed frameworks align well with the HTML First directive. Alpine.js and Petite-vue were also found to be a great replacement for aging frameworks, like jQuery. In situations, when you need to create a CRUD application and quickly connect it to a suitable backend Mavo seems like an excellent option. Finally, it’s crucial to acknowledge the lower level of expertise required to use the analyzed frameworks compared with React and Vue.

Webbutvecklingssektorn domineras för tillfället av webb-ramverk så som React och Vue.js. Deras höga effektiviteten och flexibiliteten är en bidragande orsak till detta. Ramverkena är inga universallösningar och teknologierna är i flera fall opassande. Arbetet jämför och utvärderar dessa lösningar gentemot HTML-orienterade statushanterare. Det mest centrala målet med en HTML-orienterad statushanterare är att integrera funktionalitet direkt i HTML på ett smidigt sätt. Ramverken utvärderas från ett teknologiskt perspektiv och en användares perspektiv. Utöver detta behandlar arbetet även möjliga framtidsutsikter för de analyserade teknologierna och deras relation till HTML Först principen. De ramverk som är valda för utvärdering är Alpine.js, Mavo och Petite-vue. För att demostrera ramverkernas syntax och implementering konkret görs en 'att-göra' applikation för alla ramverk. Många faktorer påverkar i vilka situationer man inte ska välja de analyserade ramverkena. Främst skall man undvika ramverkena då man bygger komplicerade SPA applikationer. Applikationer som behöver speciellt hög säkerhet eller komplicerad identifiering av användaren kräver SPA-teknologier. Vid utveckling av applikationer som kräver stora mängder visuell framställning bör man använda ramverk som har en virtuell DOM. HTML-orienterade statushanterare fungerar bäst när utvecklaren vill introducera funktionalitet till en existerande eller enkel HTML-sida. Detta möjliggör ersättning av åldrande ramverk som jQuery med Alpine.js och Petite-vue. HTML-orienterade statushanterarna är också kompatibla med HTML Först direktivena. Om man behöver skapa en CRUD-applikation är Mavo ett utmärkt alternativ. En av de mest centrala fördelarna med HTML-baserade statushanterare är ändå den lägre kunskapsnivå som krävs för att förstå och kunna programmera funktionalitet i webbsidor.

Description

Supervisor

Savioja, Lauri

Thesis advisor

Vepsäläinen, Juho

Keywords

AJAX, Alpine.js, HTML First, JavaScript, Mavo, Petite-vue

Other note

Citation

Permanent link to this item

https://urn.fi/URN:NBN:fi:aalto-202405283848

Collections

[kand] Perustieteiden korkeakoulu / SCI