JavaScript Ramverk: Vue, Angular och React.

(1)

JavaScript Ramverk: Vue, Angular och React.

Hur skiljer sig prestandan mellan Vue, Angular och React när olika mängder data av bilder och videos hämtas och visas visuellt.

How the performance differs between Vue, Angular and React when different amounts of data from im- ages and videos are retrieved and displayed visually.

Fredrik Salmi Jerker Sundberg

Handledare | Supervisor: Somayeh Aghanavesi Examinator | Examiner: Johan Håkansson Kursens namn (GIK28T) | Course name (GIK28T)

Examensarbete för högskoleexamen/filosofie kandidatexamen i Informatik | De- gree Project for University Diploma in Informatics/Thesis for Degree of Bachelor of Science in Informatics

8 juni 2021 | 8 June 2021

(2)

Sammanfattning

Det finns många ramverk för att optimera utveckling av en webbapplikation. Angular, React och Vue är tre av de största JavaScript baserade front-end ramverken för utveckling av webbapplikationer. Eftersom de är bland de populäraste JavaScript ramverken vill den här studien bidrar den här studien att utvidga kunskapen om JavaScript ramverk. Detta för att göra det lättare att välja ett Java- Script ramverk som passar för utvecklarens behov. Syftet med denna studie är att med hjälp av tre olika webbapplikationer skapade i Vue, Angular och React, gjordes en jämförelse för att mäta prestandan av bilder och video. Med denna jämförelse går det att se vilket ramverk som presterar bäst och underlättar valet av ramverk.

En litteraturstudie gjordes för att införskaffa kunskap om hur de olika ramverken implementeras och hur tidigare studier inom detta område gått tillväga. Tre webbapplikationer skapades i Vue, React och Angular. Dessa applikationer hölls så lika som möjligt för att minimera faktorer. De testades sedan genom att göra tre separata test med verktyget Lighthouse där 20, 40, 100 och 200 bilder och videos testades i dessa mängder. Resultatet ställdes upp i tabeller och analyserades mellan de olika ramverken. Resultatet var att Angular fick sammanfattad poäng på 737, Vue hade 745 och React hade 747. Slutsatsen visar att React prestera bäst på rendering av videos. Vue presterade bäst på bilder. Angular var det sämst presterande ramverket på majoriteten av kriterierna. React presterade bäst om alla resultat läggs ihop. Vid webbapplikationer som hanterar bilder rekommenderas Vue att användas i övriga fall rekommenderas React.

Nyckelord: JavaScript, Ramverk, Angular, Vue, React, Prestanda

Abstract

There are many ramverk for optimizing the development of a web application. Angular, React and Vue are three of the largest JavaS- cript based front-end ramverk for webpage development. As these are among the most popular JavaScript ramverk, this study wants to help expand your knowledge of JavaScript ramverk. This is to make it easier to choose a JavaScript framework that suits the developer's needs. The purpose of this study is to use three different web applications created in Vue, Angular and React. A comparison was made to measure the performance of images and video. With this comparison, it is possible to see which framework performs best and facilitates the choice of framework.

A literature study was conducted to acquire knowledge of how the various ramverk are implemented and how previous studies in this area have proceeded. Three web applications were created in Vue, React and Angular. These applications were kept as equal as possible to minimize factors. They were then tested by doing three separate tests with the tool Lighthouse where 20, 40, 100 and 200 images and videos were tested in these quantities. The results were presented in tables and analysed between the different ramverk. The result was that Angular got a total score of 737, Vue had 745 and React had 747. The conclusion is that React performs best in rendering videos. Vue performed best on pictures. Angular was the worst performing framework on the majority of the criteria.

React performed best if all results are added together. For web applications that handle images, Vue is recommended to be used in other cases, React is recommended.

Keywords: JavaScript, Framework, Angular, Vue, React, Performance

(3)

Innehåll

Inledning ... 1

1.1 Bakgrund ... 1

1.2 Syfte ... 1

Avgränsning ... 1

1.3 Problematisering ... 2

Teori ... 3

2.1 JavaScript Ramverk ... 3

Angular ... 3

React ... 4

Vue... 4

2.2 Programmeringsspråk ... 4

2.3 Verktyg för back-end implementation ... 5

2.4 Visual studio code ... 6

2.5 Lighthouse ... 6

2.6 Tidigare jämförelser av React, Vue och Angular ... 6

Metod ... 8

3.1 Val av litteratur ... 8

3.2 Skapande av webbapplikationerna ... 8

Design av Webbapplikation och Struktur ... 8

3.3 Bearbetning av testresultat ... 17

Datainsamling ... 18

Hårdvara och nätverk ... 18

Resultat ... 19

Diskussion ... 22

5.1 Svagheter och hot ... 22

Slutsats ... 23

Framtida arbeten ... 24

Referenser ... 25

Appendix ... 28

(4)

Inledning

JavaScript ramverk har blivit en stor del i utvecklingen av webbapplikationer och underlättar utveckling av webbapplikationer. Konkurrensen är stor mellan de olika JavaScript ramverken som finns därför behöver de hålla höga krav på prestandan. Webbapplikationer utvecklas oftast med JavaScript ramverk. Studier saknas för att kunna avgöra vilket ramverk som presterar bäst när det kommer till rendering av bilder och videos. Den här studien har som mål att fylla den luckan.

1.1 Bakgrund

Det finns många ramverk för att optimera utveckling av en webbapplikation. Angular, React och Vue är tre av de största ramverken för utveckling av webbapplikationen enligt Stackoverflow (2020 Developer survey, 2020). Det ställs höga krav på att dessa ramverk ska prestera. Därför undersöker den här studien hur snabbt Angular, React och Vue hantera data från att de hämtar data ur en databas tills att de syns på en webbapplikation. Datan som kommer hämtas kommer bestå av bilder och videoklipp.

Angular, React och Vue är JavaScript baserat front-end ramverk. Ramverken används för att utveckla webbapplikationer. Angular har utvecklat och underhålls av Google och React är utvecklat och underhålles av Facebook. Vue är skapat av Evan You och underhålls av honom och medlemmar i hans team.

Tre webbapplikationer i Vue, Angular och React kommer att implementeras. Sedan utföra en jämförelse i prestanda av rendering av bilder och videos. Resultatet analyseras och jämföras med varandra för att visa vilket av ramverken som presterar bäst med de olika datatyper och mängderna data.

En teoretisk studie gjordes på hur dessa ramverk skall implementeras och för att inskaffa rätt kunskap för att implementera dessa. Det undersöktes vilka API, bibliotek och databas som ska användas till webbapplikationerna.

1.2 Syfte

Syftet med den här studien utvidga kunskapen om JavaScript ramverk för att göra det lättare att välja ett JavaScript ramverk som passar till ens egna behov. Genom att jämföra de här tre Java- Script ramverkens prestation av rendering av bilder och videos, bidrar studien med att ge ett lät- tare val av ramverken när prestanda på bilder och videos är en prioritering som värderas högt.

Med hjälp av resultatet bidrar studien till att utvecklare inom detta område lättare kunna välja vilket ramverk som passar just deras webbapplikation.

För att besvara syftet i studien behöver följande frågeställning valts:

• Vilket av ramverken Angular, React och Vue har den bästa prestandan vid rendering av bilder?

• Vilket av ramverken Angular, React och Vue har den bästa prestandan vid rendering av videos?

Avgränsning

Ramverk som evalueras i denna studie är Vue, Angular och React detta har valts då de är de mest populära ramverken vid skrivandet av den här studien enligt Stackoverflow (2020 Developer survey, 2020). Data som renderas på webbapplikationerna består av bilder och videos. Antalet mäng data som visas upp är begränsat till 20, 40, 100 och 200 bilder och videos. I testerna används endast webbläsaren Google chrome.

(5)

1.3 Problematisering

Stora mängder data finns och hämtas ut varje sekund och visas upp visuellt på hemsidor. Enligt Daniel Graziotin, Pekka Abrahamsson (2013) kan det vara svårt att veta vilket JavaScript ramverk att använda. Manhas, J (2013) förklarar att prestandan och laddningstiderna påverkar användar- upplevelsen på en webbapplikation. De flesta användarna bryr sig oftast mer om hur webbapplikationen presterar. Sökmotorer börjar också bry sig mer om hur webbapplikationerna presterar när det rankar webbapplikationerna.

Med jämförelsen mellan React, Angular och Vues responstider vid rendering av bilder och videos underlättas det att välja JavaScript ramverk efter ens egna behov.

(6)

Teori

I denna del presenteras en beskrivning av mjukvara, bibliotek och programmeringsspråk som an- vänds och vad de används till. Tidigare studier inom detta område beskrivs och vad resultatet blev av dem.

Framtagandet av litteratur i studien utgicks från sökmotorerna Google scholar, Google, Diva-portalen och Högskolan Dalarnas biblioteks sökfunktion som har tillgång till diverse artiklar böcker. Huvudsakliga sökorden består av Angular, Vue, React, Ramverk, JavaScript, Comparison.

Sökmotorerna valdes för att lättare filtrera ut vetenskapliga artiklar och få tillgång till dessa artiklar genom Högskolan Dalarnas bibliotekstjänst.

Webbapplikation

Fong och Okun(2007) förklarar att en webbapplikation definieras som en programvara applikation som körs av en webbserver som svarar till dynamiska webbförfrågningar via http. En webbapplikation består av en samling av skript som finns på en webbserver och interagerar med databaser eller andra källor för att få dynamiskt innehåll. Det är ett klient-serverprogram som körs i användarens webbläsare. En webbapplikation är enhetsoberoende och behöver bara skapa en version som ska fungera i datorn, surfplattan och mobilen oavsett webbläsare. Webbapplikationer utvecklas oftast i språk som HTML och JavaScript men det finns andra sätt att utveckla webbapplikationer med.

Front-End

Enligt Simpson och Weiner (2019) är front-end “relating to or denoting the part of a computer system or application with which the user interacts directly”. Front-end är även känt som klient- sida utvecklingen och består oftast av HTML, CSS, TypeScript och JavaScript så att användaren kan interagera med webbapplikationen. Det finns många olika tekniker och ramverk för att underlätta utvecklingen av front-end delen i webbapplikationen som t ex Vue, React och Angular.

Back-End

Simpson och Weiner (2019) beskriver back-end som “(of a device or program) not used directly by a user, but used by a program or computer”. Back-End är serversidan av en webbapplikation det är den delen som fokuserar på databaser och scripting, det är den här sidan som har funktionaliteten på en webbapplikation.

2.1 JavaScript Ramverk

JavaScript ramverk är utvecklade för att underlätta front-end utveckling. Scott Morris (n.d) säger att JavaScript ramverk är uppbyggda bibliotek i JavaScript med inbyggda funktioner som blir en mall för utvecklare att följa. Det går att säga att JavaScript ramverk är förbyggda delar som går att kalla på för att uppfylla önskad funktion utan att behöva koda allting från början. Angular, Vue och React är några exempel på JavaScript ramverk och dessa ramverk används i studien. Ramverken kombinerar HTML, CSS och JavaScript i mer sammanhängande delar än om allt hade skrivits var för sig. Komponenter byggs upp i ramverken som kan anses var byggblock som sedan används för att bygga upp en hel webbapplikation.

Angular

Angular är ett JavaScript ramverk som skapades och används av Google för att underlätta utvecklingen av webbapplikationer. Angular.js lanserades 2010 och är det tredje mest använda ramverket av utvecklare Stackoverflow (2020 Developer survey, 2020). Saks (2019) skriver att under sin livstid har Angular fått många uppdateringar och fått en hel omskrivning av ramverket som lanserades 2016 som kallas Angular2 eller Angular. Angular är ett open-source JavaScript ramverk.

(7)

Angular används för att bygga upp single page applications (SPA). Angular använder sig av TypeScript som bygger på JavaScript. Angular (Angular.io/docs) beskriver hur komponenter byggs upp och dessa består av HTML, CSS och TypeScript som används tillsammans för att skapa en hel komponent som sedan kan kallas in och användas av huvuddokumentet. Angular använder sig av Change Detection som tillåter komponenter att ladda om när t ex data förändras.

React

React lanserades 2013 av Facebook och har blivit det näst mest populära JavaScript ramverket enligt Stackoverflow (2020) med 36,8% av utvecklare säger att de använder sig av React. React att skapat för att underlätta utvecklingen och öka prestandan på webbapplikationer.

Chiarelli (2018) menar att React är ett open-source JavaScript ramverk för att bygga kom- binerbara användargränssnitt. Detta innebär att komponenter skapas upp som sedan används för att bygga upp användargränssnittet. En komponent kan vara allt från en knapp, en form till en header. React är en single page applications, består alltså bara va en sida. Sidan använder sig av ett routing system för att ändra vyer beroende på endpointen. Dessa vyer kan vara olika komponenter som har satts ihop.

Vue

Vue är ett open-source JavaScript ramverk som lanserades 2014. Det skapades av Evan You och är underhållet av honom och hans medarbetare. I en intervju (2016) säger You “I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight.”. En- ligt Stackoverflow (2020) är det ett populärt JavaScript ramverk dock inte lika populärt som de andra ovanstående med 17,8% av utvecklare som använder sig av det.

Vue används oftast till för att skapa single page application men det går att kombinera med backend teknologier så som Node.js för att skapa full stack applications. I Vue skapas komponenter som sedan kan användas i huvuddokumentet. Dessa komponenter kan t ex bestå av en header som kan ha länkar och en titel i sig. När huvuddokumentet sedan kallar in header komponenten följer allt i headern med och fungerar i huvuddokumentet. Vue använder sig av vanlig JavaScript men det är upp strukturerat enligt Vues mall. Vue använder sig av virtual DOM som gör det möjligt att ändra vyer utan att ladda om hela sidan.

2.2 Programmeringsspråk

HTML är en förkortning på HyperText Markup Language. Tim Berners-Lee är personen som kom på iden med HTML och släppte sin första version av HTML 1993, Efter det har det släppts många fler versioner av HTML.

Enligt Budi Kurniawan(2015) är HTML standardspråket vid skapandet av webbapplikationer. HTML är ett språk som tillåter kommunikation med webbläsaren. Det skapar en struktur och sektioner för varje sida på internet och berättar hur webbläsaren ska tolka data för att bilda ett element på en webbplats. HTML använder sig av en simpel kodstruktur med taggar och attri- buten för att markera en webbplats. Webbläsaren läser upp HTML filen och renderar ut innehållet så användarna kan se det.

JavaScript är ett programmeringsspråk som är mest känt som ett skriptspråk för front-end skapande för att få mer liv i webbapplikationerna. Idag används det inte bara för att utveckla webbapplikationer. Det kan även användas för back-ends syftet enligt Morgan Persson (2020).

JavaScript används för att göra webbapplikationer mer interaktiva, det skapar element som sedan användarna kan använda sig av. Det kan vara till exempel för att skapa en sökfunktion, visa och gömma element och skapa bildspel. Med hjälp av JavaScript kan statiska sidor bli dynamiska och skapa en mer användarvänlig upplevelse.

(8)

Attar och Sardupalovic (2008) menar att CSS är ett programmeringsspråk som används för att formatera olika HTML-taggar i ett HTML fil. CSS går att förvara på en HTML sida under style tag eller så används en separat fil som sedan importeras in i HTML filen. CSS står för cascading style sheet och är ett stilmallspråk. CSS används för att designa och ändra utseendet på webbapplikationer, detta görs genom stilmallen där regler sätts upp. Reglerna kan vara till exempel vilken färgbakgrunden ska ha, storlek på text och hur layouten ska se ut. CSS samspelar med HTML och höjer användarupplevelsen på en webbapplikation.

Microsoft släppte ut TypeScript 2012. Det är ett programmeringsspråk som är ett superset av JavaScript, d.v.s. att TypeScript är en utbyggnad av JavaScript som har fler användningsområden.

Den stora skillnaden mellan JavaScript och TypeScript är att det går att använda static typing i TypeScript. Med static typing går det att definiera objekt och variabler.

2.3 Verktyg för back-end implementation

Enligt Tutorialpoint (n.d) är Node.js är ett populärt open-source, serverbaserad plattform för att utveckla webbapplikationer. Det är byggt på Google Chrome v8 JavaScript-motor och är utvecklad av Ryan Dahl. Node.js gör det enkelt att bygga snabba och dynamiska nätverksapplikat- ioner.

Node.js (n.d) används för att underlätta utvecklingen av webbapplikationer. Det innehål- ler ett stort bibliotek med olika JavaScript moduler som går att hämta och bidrar till att det blir enklare att utveckla webbapplikationer. Node.js används i implementationen av webbapplikationerna Vue, React, Angular och servern. Node.js generera t ex projekt för de olika ramverken och hämta hem diverse bibliotek som sedan kan användas i projekten och för servern. De olika bibliotek som använd i implementation listas nedanför.

MongoDB (2021) är en NoSQL databas som lagrar data i json-liknande dokument och data strukturen kan ändras över tiden. Databasen är skapad för att vara flexibel och kunna öka skal- barheten. Databasen låter dig filtrera och sortera vilket json-fält som helst vilket gör det lättare att använda och komma åt informationen i databasen. Databasen kan köras lokalt på datorn eller över en nätet i ett moln.

Express (2017) skriver att det är en minimal och flexibel back-end Node.js ramverk. Ramver- ket innehåller en mängd funktioner för utveckling av webb och mobila applikationer. Express kan också användas för att utveckla ett API med http metoder och middleware.

Janith Kasun (n.d) förklarar i artikeln Handling CORS with Node.js att CORS är en förkortning för cross-origin resource sharing. Det är en mekanism för att tillåta och begränsa begärda resurser på en webbserver beroende på var begäran initierades. Det används för att säkra en viss webbserver från åtkomst av annan webbplats eller domän.

Eric Kollegger (2018) skriver i en artikel att axios är ett JavaScript bibliotek som används för att göra HTTP förfrågningar med hjälp av Node.js.

Body parser är en middleware till express som behöver installeras för att express version 4 eller över ska fungera. Den används för att hantera förfrågningen innan den kan användas för att vali- dera innehållet.

På npmjs.com (2020) står det att http-server är ett tillägg till Node.js som används för att skapa en simpel version av en http server som till största delen används för testning och lokal utveckling. Den här servern är lätt att använda med Node.js men har dålig säkerhet så den bör ej användas efter utvecklingsstadiet.

(9)

2.4 Visual studio code

Visual studio code är en source-code editor som används för att skriva källkod. Det lanserades 2015 av Microsoft. Enligt stackoverflow (2020) använde mer än hälften av alla deltagare i under- sökningen visual studio code. Visual studio code går att använda på de stora operativsystemen (OS) windows, linux och macOS.

2.5 Lighthouse

Lighthouse används för att mäta prestandan och responstiderna i denna undersökning. Love (2018) beskriver att Lighthouse är ett kraftigt verktyg för att mäta hur väl webbapplikationen prestanda och möta progressiva krav på en webbapplikation.

Lighthouse granskar fem olika områden: dessa är prestanda, tillgänglighet, bästa praxis, SEO och progressiv webbapp. Det går att ställa in vilka områden som ska testas och efter testet är kört kommer en rapport genereras som visar hur bra applikationen presterade.

Rapporten visar även förslag hur webbapplikationen kan förbättras. Områdena tittar på fler metrics och för prestanda och dessa väger poängen olika mycket beroende på olika metrics.

Metrics för prestanda och dessa weights är:

• First Contentful Paint mäter hur lång tid det för första delen av DOM att renderas på webbapplikationen och resultatet utgör 15% av resultatet.

• Speed Index är hur snabbt innehålls delarna renderas och resultatet utgör 15% av resultatet.

• Largest Contentful Paint mäter tiden det tar för den största innehållsdelen att renderas till exempel en bild och resultatet utgör 25% av resultatet.

• Time to Interactive mäter hur lång tid det tar innan webbapplikationen blir interaktiv och resultatet utgörs 15% av resultatet.

• Total Blocking Time mäter hur länge sidan inte går att interagera med medans en uppgift utförs och utgör 25% av resultatet.

• Cumulative Layout Shift mäter oförutsägbara justeringar som sker under webbapplikat- ionens livstid och utgör 5% av resultatet.

2.6 Tidigare jämförelser av React, Vue och Angular

Här beskrivs och visas slutsatsen av två tidigare studier som har gjort liknande undersökningar på Vue, React och Angular.

Saks (2019) jämförde renderingstid på Angular, React och Vue i en studie. I den studien hade en SPA blivit byggt i de tre JavaScript ramverken som skapade upp rader med text. Saks testade webbapplikationerna genom att skapa, återskapa och lägga till både 1000 och 10 000 textrader åt gången därefter togs allt bort (Se tabell 1). Det visade sig att Vue var det snabbaste JavaScript ramverket av dem och Angular i de flesta fallen var segast, läggs all laddningstid ihop på alla tester visade det sig att Angular var hela 5.3 gånger segare än Vue.

(10)

Tabell 1. Resultat av Elar Saks Studie på hur ramverken presterar, Röd är det ramverket som pre- sterade sämst, gul var näst bäst och grön presterade bäst.

I en tidigare studie gjord av Ockelberg och Olsson (2020) jämför de tre aspekterna prestanda, modularitet och användarvänlighet. Mot de tre populäraste ramverken Vue, React och Angular vill de visade vilket som är det lämplig för en modern single-page application där syftet är att kunna ge en välgrundad rekommendation om vilket ramverk som skulle vara bäst lämpat för ett visst projekt.

De har utvecklat och satt i produktion single-page applications med fokus på front-end som de sedan har gjort tester och jämfört på de tre olika aspekterna. Slutsatsen de kom fram till är att det mest lämpliga JavaScript ramverket för att utveckla en front-end tung single-page application är React. Vue kommer på andra plats och Angular kommer in på en tredje-plats med den mest anmärkningsvärda fördelen att Angular ansågs bäst vid DOM-manipulation. De förklarar även att alla tre ramverk är lämpliga för att skapa single-page applications.

(11)

Metod

I den här delen av studien presenteras valet av litteratur och hur webbapplicationerna blev im- plementerat för att webbapplikationen ska kunna återskapas av läsaren och för framtida studier.

3.1 Val av litteratur

En litteraturstudie gjordes för att uppnå de mål som sats och genomföra implementationen av webbapplikationerna och jämförelsen. Då inga tidigare kunskaper inom Vue, React och Angular innehas, har en litteraturstudie gjorts för att införskaffa rätt kunskap för att implementera dessa ramverk. Litteraturstudien är till mestadels baseras på dokumentation från Vue, React och Angu- lar webbsidor men även webbaserade guider.

Litteraturstudien har gjorts om vilka olika ramverk och databaser som fungerar med An- gular, React och Vue för att uppnå en fungerande back-end och front-end. Och se hur de kommu- nicerar med databasen som vi kompletterar med egna kunskaper inom området.

Det finns många olika mätinstrument för att mäta prestanda i en webbapplikation. För att hitta det rätta mätinstrument för jämförelsen mellan Vue, React och Angular har en studie om vilket mätinstrument som fungerar att kolla prestanda gjorts.

3.2 Skapande av webbapplikationerna

Den praktiska delen består av implementationen de tre olika ramverken. Detta gjordes för att kunna jämföra prestanda med i Lighthouse och se vilket ramverk som presterar bäst. Alla webbapplikationer är byggda i visual studio code. I alla JavaScript ramverk har komponenterna header, image och videos skapats. I headern finns det länkar till bilder och videos komponenterna som när de klickas fyller hemsidan med bilder respektive videos genom ett HTTP request till back- enden som sedan skickar en förfrågning till databasen. Back-enden hämtar datan från databasen som sedan skickar en array med objekt till klienten. I det objekten finns det en id, beskrivning och en url sträng som länkar till en bild eller video. url:en används för att rendera vyerna med bilder eller videos i bodyn på webbapplikationen. Implementationen av webbapplikationerna gjorde efter guider och dokumentation från de olika ramverkens webbsidor.

Enligt Pingdom (2021) används i medel 42.8 bilder på en hemsida som då är 61,3% av sidans storlek, set i bytes. Därför valdes det att testa hur snabbt bilder renderas på de tre appli- kationerna i skalorna 20, 40, 100 och 200.

Design av Webbapplikation och Struktur

Designen för webbapplikationerna hålls minimal för att ta bort faktorer som kan påverka resultatet. Därav visas en navigations bar som visar vilket ramverk som körs samt länkar till bilder eller videos beroende på vilken vy som ska visas. För att hålla faktorerna så minimala som möjligt an- vänd så lite element och kod som påverkar prestandan.

En sketch ritades upp som sedan skapades med kod i Vue, React och Angular, se figur 1.

Designen skapades för att efterlikna en vanlig e-handels webbsida med header och länkar i den.

Magnus Alkroth (2016) har i en tidigare studie skapat en webbapplikation för att testa användar- upplevelsen, designen är efterliknad av denna applikation men omgjord för att minimera effek- terna på resultatet.

De tre olika ramverken använder samma struktur i HTML, JavaScript och CSS koden men beroende på vilket ramverk anpassas koden efter just det ramverket och hur de implementera den. Efter designen skapades 3 webbapplikationer med React, Vue och Angular.

(12)

Figur 1. Detta är designmallen som skapades för webbapplikationerna. Designmallen utgicks från vid skapandet av webbapplikationerna.

3.2.1.1 React

Vid uppstart React projektet utgicks ifrån Reacts dokumentation (2021). Node.js används för att generera en React applikation, där genereras en utvecklingsmiljö med de senaste JavaScript funktioner och inkluderar filer som index.js, index.html osv som behövs för att webbapplikationen ska fungera.

I figur 2 visas den automat generade index.js sidan som skapas automatiskt när en ny Re- act applikation skapas. Där importeras nödvändiga bibliotek och filer som krävs för webbapplikationen. Sedan renderas App.js filen ut i elementet root som är hämtad från index.html.

Figur 2. Detta är automat genererade koden som visas i Index.js filen.

(13)

I App.js (se figur 3) hämtas de olika komponenterna header, images, videos. För att navigera sig i de olika vyerna har React-router-dom använts, det är ett bibliotek som kan läggas till i Reacts ramverk.

Funktionen App skapas sedan som returnerar en vy. Där har en header skapats och content diven har en switch som visar olika vyer beroende på vilken endpoint (bilder eller videos).

Funktionen exporteras ut och används sedan i index.js.

Figur 3. Detta är koden som visas i App.js filen. I Koden hämtas komponenter som sedan renderas ut på webbapplikationen.

Header komponenten skapas upp som består av en navigation bar som har en rubrik och två län- kar till vyer. Denna komponent exporteras och används sedan i app.js (se figur 3).

Image komponenten (se figur 4) består av en klass, i den definieras images till en array i con- structor. ComponentDidMount() funktionen hämtar image url:en från databasen och sätter in dom i images arrayen. Sedan loopas images arrayen och renderar varje bild i en div. Export default gör att Images kan användas av app.js. Video komponenten ser likadan ut förutom att den hämtar och renderar ut videos istället.

(14)

Figur 4. Denna figur illustrerar komponenten Images.js med tillhörande kod. Komponenten består av en bild samt en titel.

3.2.1.2 Vue

Vid uppstart Vue projektet utgicks ifrån Vue dokumentation (2021). Node.js används för att generera en Vue applikation, där genereras en utvecklare miljö.

I Vue delas koden upp i tre delar template, script och style. Template filen HTML är det som visas upp på applikationen, i script delen skrivs JavaScripten som är funktionaliteten på applikationen och på style delen används CSS där utseendet på applikationen formateras.

I figur 5 visas App.Vue upp som är huvudsidan av applikationen i den används Header komponenten och router-view används för att rendera olika vyer, i detta fall video eller image vyn.

(15)

Figur 5. Figuren visar App.vue filen. Här visas hur komponenten header används och router-view som ändrar vy.

I Main.js filen importeras komponenterna app, image och video och nödvändiga bibliotek. Olika kopplingar skapas med hjälp av VueRouter. Med hjälp av dessa går det att styra vad som skall visas med hjälp av url:en. I figur 5 visas App.Vue filen där finns en router-view som visar upp innehållet från de olika kopplingar som gjorts. App.Vue renderas ut i en div med id:et app som finns i index.html.

Figur 6. Figuren visar Main.js filen. Här används routes för att länka ihop komponenter med pathen. App.vue renderas ut i index.html.

En header.Vue fil skapas upp, den innehåller all nödvändig HTML, script och CSS för headern. He-

(16)

Komponenten Images skapas upp i figur 7. Där importeras komponent ImgCard som sedan används i template, där visas det att en Array med data skickas in. En metod används för att hämta datan till arrayen. Det görs ett http request mot Express servern som sedan hämtar datan från databasen och skickar tillbaka datan till Vue.

Figur 7. Denna figur illustrerar komponenten Images.vue med tillhörande kod. Komponenten an- vänds för att hämta lista med bilderna som sedan används i komponenten ImageCard

I imgCard.Vue komponenten (se figur 8) loopas images arrayen ut och renderas i en div. Arrayen hämtas in från Image.Vue (se figur 7).

Figur 8. Denna figur visas komponenten ImgCard.vue med tillhörande kod. Komponenten loopar igenom alla bilder från listan och renderar ut det.

(17)

En videokomponent finns för att rendera ut videos, den har samma struktur som bild komponenter. Den använder videoelement istället för img elementer och hämtar data i Mongodb i video delen i databasen.

3.2.1.3 Angular

Angular projektet utgicks ifrån Angular dokumentation (2021). Node.js används för att generera en Angular applikation, där genereras en utvecklare miljö.

I app-routing.module.ts filen (se bild 9) används Angulars inbyggda routing bibliotek. Här importeras komponenterna videos och images för att länka dom till en path, de importeras sedan in i Routermodule och sedan exporteras allt.

Figur 9. Figuren visar app-routing.module.ts filen. Här kopplas pathen och komponenten ihop som sedan används av router-outlet.

En app-komponent (se figur 10) skapas upp automatisk när projektet är genererat, det är i den filen som allt innehåll sätts ihop. De olika komponenter som skapats hämtas hem och sedan pla- ceras dom ut i HTML filen för app. Router-outlet används här, det är den som byter vyerna som bestäms i app.routing-module.ts (se figur 9).

(18)

App.module.ts (se figur 11) beskriver hur alla delar passar ihop i Angular. Det är root modulen som startar upp applikationen. Här importeras moduler och komponenter deklareras som sedan kan används i applikationen. I bootstrap används AppCompontent och skickas till index.html sidan som är värd webbsidan.

Figur 11. Figuren visar koden för app.module.ts, den länkar ihop alla delar i webbapplikationen.

En komponent skapas för headern som innehåller HTML, TypeScript, och CSS filer. HTML i headern har samma struktur som de andra ramverken men länkarna Angular använder sig av är routerlink som tillhör Angulars bibliotek.

Det är TypeScript filen som binder ihop alla delar i header som HTML, CSS och namnger komponenten när den exporteras ut till andra delar av Angular. Här skapas en titel upp som sedan används och skrivs ut header.compontent.ts filen.

I images komponenten (se figur 12) importeras ImagesService som en fil som innehåller metoder för att kommunicera med serversidan. ImagesService metoden används för att kommunicera med serversidan och hämta datan från mongoDB databasen som sedan fyller en array som renderas ut visuellt. Denna princip används även för videos men skillnaden är att videos använder sig av elementet video istället för img och hämtar data ur video i mongoDB.

(19)

Figur 12. Figuren visar TypeScript filen för komponenten Images. Här hämtas alla bilder.

3.2.2.1 Express

Express, Body-parser och Cors genererades fram av Node.js och hämtar hem alla dependencies till dem. I implementering av express och servern har express dokumentation (2017) utgåtts från och tidigare kunskaper använts.

I index.js hämtas diverse bibliotek in och sedan säger den åt express att använda dessa med app.use metoden. Express bestäms att ska lyssna på port 5000.

Figur 13. Figuren visar hur express servens skapas upp.

Express filerna innehåller funktioner för att skapa upp en förbindelse till mongoDB databasen.

Den förbindelsen kan sedan användas för att hämta bilder och video.

I serversidan av programmet används express, mongodb och axios. Här sätts endpoints

(20)

ges olika svar. Skulle en get request på /images gör tex skulle den köra koden som finns i just den funktionen och skicka ett svar.

Det är i den här filen (se figur 14) all kod för att hämta datan från databasen finns och även för att lägga in data i den.

Figur 14. Figuren visar endpoints för att skicka förfrågningar till databasen.

3.2.2.2 MongoDB

MongoDB lokala databas används för att spara all data som behövs för genereras fram bilder och videos. Strukturen i databasen är väldigt simpel, vi har ett dokument där bildernas url är sparat i.

Där läggs till en id, en url till bilden och taggar som bilden har. Dokumentet med videos har id, url till videos och vilken typ av format videon är.

Databasen fylls på genom metoder som skapats i Express, Den börjar med att hämta url, tags osv från ett api som heter Pixabay och spara ner det i ett objekt. Sedan skickas detta objekt in i databasen.

Valet att använda mongodb som databas är baserat på att tidigare studier har använt sig av den.

3.3 Bearbetning av testresultat

En kvantitativ jämförelse gjordes på resultatet. Resultatet genererat från Lighthouse på de tre olika webapplikationerna analyserades och ställdes upp i tabeller. Format och mängd av data visas upp i 3 olika tabeller. Valet av att använda tabeller för att visa resultatet gjordes för att tabellen ger en bra överblick hur de olika resultaten står mot varandra.

Verktyget som kommer användes för att mäta prestandan var Lighthouse. De olika kriterierna som jämfördes för att se hur ramverken presterar är First Contentful Paint, Speed Index, Largest Contentful Paint, Time to interactive, Total Blocking time, Cumulative Layout Shift och den totala Performance från Lighthouse, se 2.4 Lighthouse.

(21)

Med dessa tester går det att se hur ramverken presterar med de olika skalorna datamäng- der för bilder och videos för att se skillnaderna mellan dessa mängder beroende på ramverk.

Datainsamling

Webbläsaren som används vid datainsamlingen är Chrome, med hjälp av det inbyggda verktyget Lighthouse genereras en rapport. Bland alla kriterier Lighthouse tittar på används performance för den här studien. Med informationen i rapporten jämförs sedan resultatet av de tre web appli- kationerna. Enligt Love (2018). är Lighthouse ett lättanvänt verktyg som genererar en genomgå- ende rapport. Därför gjorde vi valet att använda Lighthouse.

Vid datainsamlingen startades varje applikation upp genom en lokal http-server med hjälp av Node.js och varje applikation kördes i produktionsläge. Express kördes igång sedan kördes Lighthouse test 3 gånger på varje mängd av data (t ex 20 bilder, 40 bilder osv) och ramverk. sedan räknades ihop till medlet av de 3 testerna för att minimera utomstående faktorer.

Hårdvara och nätverk

Under insamlingen av data används en dator med denna hårdvara.

• Processor: Intel(R) Core (TM) i7-7700HQ CPU @ 2.80GHz 2.81 GHz

• Installed RAM 16,0 GB

• Graphic card: Geforce GTX 1060, 1 506 MHz, ((1708 MHz Boost Clock)) 6 GB, (GDDR5)

• System type: Windows 10, (64-bit.)

Datorn valdes för att alternativen var begränsade och detta var det bästa alternativet. Samma dator användes till alla tester för att minimera utomstående faktorer som kan påverka resultatet.

Nätverket som används har en hastighet på 100 mbit för både uppladdning och nedladdning.

(22)

Resultat

Tabell 2 visar resultatet av Lighthouse testerna på 20, 40, 100 och 200 bilder adderade med varandra. I tabellen representerar färgerna grön det bästa resultatet, gul det näst bästa och röd det sämsta. Resultatet på testerna visar att Vue är det ramverk som presterar bäst med ett totalt performance resultat på 389. React kommer på andra plats med ett performance resultat på 386 och Angular sist med ett performance resultat på 385. Överlag presterar ramverken väldigt lika, med mindre skillnader i de olika kriterierna. Angular presterar bäst i First content ful paint, speed index och cumulative layout shift men presterar sämre i de andra kriterierna. Vue presterar bäst i largest contentful paint, time to interactive och total blocking time. Vue presterar näst bäst i de andra metrics och detta ger den det bästa slutresultatet.

Tabell 2. Resultatet av alla tester på bilder adderade med varandra. Röd är det ramverket som pre- sterade sämst, gul var näst bäst och grön presterade bäst.

Ram-verk First Content-

ful Paint (s) Speed In- dex (s)

Largest Con- tentful Paint

(s) Time to inte-

ractive (s) Total Blocking

time (ms) Cumulative

Layout Shift Perfor- mance Angu-

lar 0,8 1,1 4,132 2,633 150 1,003 385

Vue 1,6 2,3 3,066 1,633 0 1,153 389

React 1,966 2,7 3,365 2,6 13,333 1,672 386

Tabell 3 innehåller resultat av Lighthouse testerna på 20, 40, 100 och 200 videos adderade med varandra. I tabellen representerar färgerna grön det bästa resultatet, gul det näst bästa och röd det sämsta. React har ett resultat performance resultat på 361 och är det bästa resultatet när videos renderas ut. Vue har ett resultat på 356 och är det näst bästa ramverket på att rendera ut videos. Angular har ett resultat på 352 och gör detta till det sämsta ramverket på videos av de 3 ramverken. Däremot har Angular bäst resultat på 2 av kriterierna, First contentful paint och speed index. Vue presterar bäst på time to interactive och React presterar bäst på kriterierna largest contentful paint, total blocking time, cumulative layout shift och detta gör att den får det totala bästa performance poängen.

Tabell 3. Resultatet av alla tester på videos adderade med varandra. Röd är det ramverket som pre- sterade sämst, gul var näst bäst och grön presterade bäst.

Ram-

verk First Content-

(s) Time to inte-

lar 0,932 6,4 2,965 8,134 440,333 1,222 352

Vue 1,767 6,534 2,567 5,734 266,666 1,636 356

React 1,8 6,467 1,9 6,634 243,334 1,105 361

(23)

Tabell 10 innehåller det adderade värdet av alla förekommande tabeller. Tabellen visar hur ramverken presterade överlag på alla tester. Grön representerar ramverket som presterade bäst, gul det som var näst bäst och röd det som var sämst. Studien visar att alla ramverk presterar bra när det kommer till prestanda. Ser man det totala resultatet (se tabell 10) har Angular ett resultat på 737, Vue 745 och React 747. Angular, Vue och React är olika bra på de olika kriterierna. Generellt har alla ramverk snarlik prestanda med mindre olikheter i prestandan. React presterar bäst på kriterierna largest contentful paint, total blocking time. Vue presterar bäst på kriteriet time to interactive och Angular är bäst på first contentful paint, speed index, och cumulative layout shift.

Tabell 4. Resultatet av alla tester adderade med varandra. Röd är det ramverket som presterade sämst, gul var näst bäst och grön presterade bäst.

Ram-

verk First Content-

(s) Time to inte-

lar 1,732 7,498 7,097 10,5356 590,331 2,225 737

Vue 3,367 8,833 5,633 7,367 266,666 2,789 745

React 3,766 9,166 5,265 9,233 256,667 2,777 747

I tabellerna (se appendix, resultat av Lighthouse tester) går det att se att Angular är snabbast på first contentful paint där medelvärdet i alla tester aldrig överstiger 0,3 sekunder och att det lägsta är 0,2 sekunder, detta är mer än dubbelt så snabbt än Vue och React som ligger på 0,4-0,5 sekunder.

I kolumnen speed index kan vi se att Angular är snabbast på att visa upp innehållet på sidan när det gäller bilder med 0,2-0,3 sekunder. Vue och React har liknande resultat och på de testen men hanterar inte 100 och 200 bilder lika bra som Angular. På video testerna framkommer det att Angular, Vue och React har liknande prestanda på speed index delen.

När det kommer till largest contentful paint är React snabbast på videos medan Vue är snabbast på bilder och Angular är sämst på både bilder och videos. Sammanlagda resultatet av alla tester har React som vinnare med 5,265 sek, Vue har 5,633 sek och Angular har 7,067 sek.

Kolumnen time to interactive visar att Vue är snabbast att när det gäller att användarna kan interagera med webbapplikationen både när det gäller bilder och video. Ramverket som presterade sämst i den här kategorin är Angular som tog ca 3.2 sekunder längre än Vue när det kommer till det sammanlagda resultatet.

I total blocking time presterar Angular, Vue och React väldigt lika när det kommer till bilder och 20, 40 videos. Angular presterar sämre än Vue och React dock enligt Lighthouse bedöm- ning presterar Angular bra där. Vid större mängderna videos 100 och 200 får alla 3 ramverken en längre laddtid, även här presterar Angular sämre.

Det sammanlagda resultatet av alla tester för cumulative layout shift visar att Angular är bäst på 2,225 med de andra ca 0,5 poäng bakom.

(24)

Performance överlag skiljer sig med små marginaler mellan testerna. Det ställe där Angu- lar tappar mycket performance poäng är på 200 videos tester då den ligger hela 6 poäng efter de andra med sina 65 medan Vue och React har 71 poäng.

(25)

Diskussion

Det är små marginaler som skiljer ramverken åt i resultaten. Ramverken presterar olika bra på olika kriterier och bör anpassas efter vad webbapplikationen syfte är. Om syftet av webbapplikation är att ha en e-handelssida t ex, som ofta innehåller mycket bilder bör Vue användas. Ifall videos förekommer mycket på en webbapplikation rekommenderas React att användas. Är det både bilder och videos på webbapplikationen bör React användas då det presterade bäst överlag.

Saks studie på samma ramverk fast på skapande och borttagande av textrader visades att Vue var snabbast med React som två och Angular sist. Det resultatet skiljer sig från resultatet i den här studien där det framkommer att React är bäst på både överlag och på videos medans Vue presterar bäst på bilder. Studierna skiljer sig från varandra även om skapandet och renderandet av objekt granskas i båda studierna. I Saks studie presterade Vue bäst på alla test hen gjorde medan i den här studien visades det att ramverken varierar olika beroende på vilken metric som mäts.

I Nicklas Ockelberg och Niclas Olsson (2020) Tidigare studie förklarar de att React presterade bäst sedan Vue och sista kommer Angular. Jämför man detta med med prestandaresultat över alla testerna som gjorts visar även den här studien att React är bäst sedan Vue och sist Angular, resultatet stämmer överens med varandra.

För att se fler skillnader i prestanda resultatet skulle fler mätverktyg och kriterier kunna användas. Mer krävande bilder med högre upplösning och större format kan ge en större skillnad i resultatet. Fler bilder samt videos kan renderas ut för att få större skillnader i resultatet. Använ- dandet av så många bilder och videos på en som samma sida kan diskuteras om hur användbart det är.

Rendera ut 100 och 200 videos samt bilder är väldigt mycket för en webbapplikation och hanteras oftast med andra tekniker. Dessa tekniker skulle kunna vara att generera bilder och videos när användaren scrollar neråt eller bilderna och videorna delas upp på fler sidor. På detta sätt kommer prestandan bli bättre och att ha så många bilder och videos är inget som kan rekom- mendera men det ger en större överblick i studien.

5.1 Svagheter och hot

Angular, React och Vue har olika strukturer och använder sig av olika bibliotek och kan inte implementeras helt lika. Koden i de tre webbapplikationerna har därför försökts att hållas så lika som möjligt men koden har ändå anpassats efter ramverket de är skrivna i.

Det går att göra samma program på många olika sätt och med tanke på att programme- rarna i den här studien inte har någon tidigare erfarenhet i JavaScript ramverk är det osannolikt att webbapplikationerna är optimerade. Det är en möjlighet att någon av webbapplikationerna då kan vara mer optimerad än de andra två som kan leda till felaktiga resultat.

Ett hot som skulle kunna påverka resultatet är att bilder och videos hämtas internet genom en url som ligger i databasen. Nätverkshastigheten och vilken väg paketen tar genom nätver- ken kan därför påverka detta och beroende på hur många request just dessa bilder får vid det tillfället.

Prestandan på datorn kan påverka resultatet och därför bör testerna ske på samma dator och när datorn inte har onödiga program körandes som kan påverka prestandan på datorn.

(26)

Slutsats

Målet med den här studien är att ta reda på vilket ramverk som har bäst prestanda när det kommer till att rendera ut 20, 40, 100 och 200 bilder och videos. Studien visar att Vue är bäst på att rendera ut bilder medan React är bäst på att rendera ut videos. När det kommer till den totala prestandan på både bilder och videos presterar React bäst. Det sämst presterande ramverket är Angular.

Vid valet av ramverk bör React användas om inte webbapplikationen nästintill bara an- vänder bilder, då rekommenderas Vue användas.

(27)

Framtida arbeten

Vid skrivandet av den här studien var de här ramverken bland de populäraste, om de kommer vara det framöver går inte att säga. Vid framtida studier kan det därför vara intressant att jämföra fler ramverk för att få en bredare insikt.

Att hantera bilder från en databas istället för att hämta dem med urler som går över nät- verk skulle förminska faktorer som skulle kunna påverka resultatet.

Webbapplikationen kan vidareutvecklas till en mer fullständig webbapplikation inom om- råden där de använder mycket bilder och videos, till exempel e-handelssida. Detta kan ge en bättre överblick för de som utvecklar inom detta område.

(28)

Referenser

Alkroth, M. (2016). React vs Angular: Slaget om användarupplevelsen https://www.diva-por- tal.org/smash/get/diva2:943807/FULLTEXT01.pdf (Accessed 13 may. 2021)

Attar, H.A. Sardupalovic, B. (2008). Webbutik. https://www.diva-por-

tal.org/smash/get/diva2:114096/FULLTEXT01.pdf (Accessed 13 may. 2021)

Chiarelli, A. (2018). Beginning React : Simplify your frontend development workflow and en- hance the user experience of your applications with React. ProQuest Ebook Central

https://ebookcentral.proquest.com (Accessed 13 may. 2021)

Fong, E. Okun, V. (2007). Web Application Scanners: Definitions and Functions https://ieeex- plore-ieee-org.www.bibproxy.du.se/stamp/stamp.jsp?tp=&arnumber=4076950 (Accessed 13 may. 2021)

Graziotin, D. Abrahamsson, P. (2013). Making Sense out of a Jungle of JavaScript Ramverk https://arxiv.org/ftp/arxiv/papers/1306/1306.1773.pdf (Accessed 13 may. 2021) Halliday, P. (2018). Vue. js 2 design patterns and best practices : Build enterprise-ready, modular Vue. js applications with Vuex and nuxt. ProQuest Ebook Central https://ebookcentral.proquest.com (Accessed 13 may. 2021)

Kotaru, V. K. (2019). Angular for material design : Leverage Angular material and TypeScript to build a rich user interface for web apps. ProQuest Ebook Central https://ebookcen-

tral.proquest.com (Accessed 13 may. 2021)

Kurniawan, B. (2015). Html : A beginner's tutorial. ProQuest Ebook Central https://ebookcentral.proquest.com (Accessed 13 may. 2021)

Love, C. (2018). Progressive web application development by example : Develop fast, relia- ble, and engaging user experiences for the web. ProQuest Ebook Central https://ebookcentral.proquest.com (Accessed 13 may. 2021)

Manhas, J. (2013). A Study of Factors Affecting Websites Page Loading Speed for Efficient Web Performance.https://www.researchgate.net/profile/Dr_Manhas/publica-

tion/274070742_A_Study_of_Factors_Affecting_Websites_Page_Loading_Speed_for_Effi- cient_Web_Performance/links/551414940cf283ee0834a40e.pdf (Accessed 13 may. 2021) Ockelberg, N. Olsson, N. (2020). Performance Modularity and Usability, a Comparison of Ja- vaScript Framework https://www.diva-por-

tal.org/smash/get/diva2:1424374/FULLTEXT01.pdf (Accessed 13 may. 2021)

Pano, A. Graziotin, D. Abrahamsson, P. (2018). Factors and actors leading to the adoption of a JavaScript framework https://arxiv.org/pdf/1605.04303.pdf (Accessed 13 may. 2021)

Persson, M. (2020). JavaScript DOM Manipulation Performance. https://www.diva-por- tal.org/smash/get/diva2:1436661/FULLTEXT01.pdf (Accessed 13 may. 2021)

Polanˇciˇc, G. Heriˇcko, M. Rozman. (2010). An empirical examination of application ramverk success based on technology acceptance model. Journal of Systems and Software 83(4) https://www.sciencedirect.com/science/article/pii/S0164121209002799 (Accessed 13 may.

2021)

(29)

Saks, E. (2019). JavaScript ramverk: Angular vs React vs Vuehttps://www.theseus.fi/bit- stream/handle/10024/261970/Thesis-Elar-Saks.pdf?sequence=2 (Accessed 13 may. 2021) Simpson, J. Weiner, E. (2019). The Oxford English Dictionary. Oxford University Press.

Wohlgethan, E. (2018). Supporting Web Development Decisions by Comparing Three Major JavaScript Ramverk: Angular, React and Vue.jshttps://reposit.haw-hamburg.de/bit-

stream/20.500.12738/8417/1/BA_Wohlgethan_2176410.pdf (Accessed 13 may. 2021)

Web pages

2020 Developer Survey. (2020). Stackoverflow https://insights.stackoverflow.com/survey/2020#technology-web-ramverk-all-respondents2 (Accessed 7 may. 2021)

A JavaScript library for building user interfaces. (2021). Reacthttps://Reactjs.org/ (Accessed 7 may. 2021)

About Node.js. (n.d). Node.jshttps://nodejs.org/en/about/

Developers.google. (n.d) Lighthouse.https://developers.google.com/web/tools/Lighthouse (Accessed 7 may. 2021)

Fast, unopinionated, minimalist web framework for Node.js. (2017). Express https://ex- pressjs.com/ (Accessed 7 may. 2021)

Freecodecamp. (2016). Between the Wires: An interview with Vue.js creator Evan You https://www.freecodecamp.org/news/between-the-wires-an-interview-with-Vue-js-creator- evan-you-e383cbf57cc4/ (Accessed 13 may. 2021)

Introduction to Angular docs. (2021). Angularhttps://Angular.io/docs (Accessed 7 may. 2021) Kasun, J. (n.d). Handling CORS with Node.js https://stackabuse.com/handling-cors-with- node-js/ (Accessed 7 may. 2021)

Kollegger, E. (2018). What is Axios.js and why should I care?https://me-

dium.com/@MinimalGhost/what-is-axios-js-and-why-should-i-care-7eb72b111dc0

Morris, S.(n.d). Tech 101: What is a JavaScript framework? Here’s everything you need to knowhttps://skillcrush.com/blog/what-is-a-JavaScript-framework/ (Accessed 7 may. 2021) Node-js -Introduction. (n.d). Turorialspoint https://www.tutorialspoint.com/nodejs/nodejs_in- troduction.htm (Accessed 7 may. 2021)

npmjs.(2020). http-server: a command-line http serverhttps://www.npmjs.com/package/http- server (Accessed 7 may. 2021)

Pingdom. (n.d). New facts and figures about image format use on websiteshttps://www.pingdom.com/blog/new-facts-and-figures-about-image-format-use-on-websites/ (Accessed 10 may. 2021)

Pixabay. (n.d). Stunning free images & royalty free stockhttps://pixabay.com/ (Accessed 5

(30)

Saif, D. Lung, C. Matrawy A. (2020). An Early Benchmark of Quality of Experience Between HTTP/2 and HTTP/3 using Lighthousehttps://arxiv.org/pdf/2004.01978.pdf (Accessed 21 april. 2021)

TypeScriptlang. (n.d). What is TypeScript? https://www.TypeScriptlang.org/ (Accessed 7 may. 2021)

What is mongoDB?. (2021). MongoDB https://www.mongodb.com/what-is-mongodb (Ac- cessed 7 may. 2021)

What is Vue.js. (2021). Vuehttps://v3.Vuejs.org/guide/introduction.html#what-is-Vue-js (Ac- cessed 7 may. 2021)

(31)

Appendix

Resultat av Lighthouse tester

Tabeller på tester för 20, 40, 100 och 200 bilder och videos.

Tabell 5. Lighthouse resultat för 20 bilder.

Ram- verk

First Con- tentful Paint (s)

Speed In- dex (s)

Largest Con- tentful Paint (s)

Time to interactive (s)

Total Block- ing time (ms)

Cumulative Layout Shift

Perfor- mance

Angu-

lar 0,2 0,233 1,033 0,2 0 0,294 96

Vue 0,4 0,4 0,767 0,4 0 0,308 97

React 0,5 0,5 0,833 0,5 0 0,828 95

Ram- verk

Speed In- dex (s)

Perfor- mance

Angu-

lar 0,2 0,266 0,9 0,6 6,666 0,309 96

Vue 0,4 0,433 0,733 0,4 0 0,123 99

React 0,466 0,5 0,866 0,466 0 0,179 98

Ram- verk

Speed In- dex (s)

Perfor- mance

Angu-

lar 0,2 0,3 1,066 0,9 60 0,118 98

Vue 0,4 0,733 0,733 0,4 0 0,459 96

React 0,5 0,933 0,8 0,5 0 0,287 96

(32)

Ram- verk

Speed In- dex (s)

Perfor- mance

Angu-

lar 0,2 0,3 1,133 0,933 83,333 0,282 95

Vue 0,4 0,733 0,833 0,433 0 0,263 97

React 0,5 0,766 0,866 1,133 13,333 0,378 97

Tabell 9. Lighthouse resultat för 20 videos

Ram- verk

Speed In- dex (s)

Perfor- mance

Angu-

lar 0,266 0,4 0,766 0,766 0 0,18 98

Vue 0,467 0,533 0,667 0,467 0 0,502 96

React 0,5 0,6 0,5 0,5 0 0,188 98

Tabell 10. Lighthouse resultat för 40 videos.

Ram- verk

Speed In- dex (s)

Perfor- mance

Angu-

lar 0,266 0,666 0,8 1,366 3,333 0,512 95

Vue 0,467 0,767 0,667 0,467 0 0,352 97

React 0,4 0,667 0,5 0,5 0 0,176 99

Ram- verk

Speed In- dex (s)

Perfor- mance

(33)

Angu-

lar 0,2 1,733 0,666 1,8 76,666 0,141 94

Vue 0,433 1,767 0,633 0,833 13,333 0,487 92

React 0,467 1,767 0,467 1,167 6,667 0,326 93

Ram- verk

Speed In- dex (s)

Total Blocking time (ms)

Perfor- mance

Angu-

lar 0,2 3,6 0,733 4,2 360,333 0,389 65

Vue 0,4 3,467 0,6 3,967 253,333 0,295 71

React 0,433 3,433 0,433 4,467 236,667 0,415 71