Visualisering av finansiell data somrenderas på klienten och servern medReact och Python Visualization of financial data that renderson client and server with React and Python R R

R

Visualisering av finansiell data som renderas på klienten och servern med React och Python

R

Visualization of financial data that renders on client and server with React and Python

Examensarbete inom huvudområdet Informationsteknologi

Grundnivå 30 högskolepoäng Vårtermin 2021

Viktor Salmi

Handledare: Henrik Gustavsson Examinator: Marcus Brohede

Sammanfattning

I takt med den ökande digitaliseringen i samhället genererar företag stora mängder data varje dag. För att skapa förståelse kring datan är det viktigt att den blir visualiserad.

Aktier och tillhörande finansiell information är en komplex typ av data och med hjälp av linjediagram blir det möjligt att visualisera denna data. I detta arbete utförs en jämförelse mellan klient- och serverbaserad programmering där det skapas en applikation i React och en i Python. Jämförelsen utförs för att ta reda på vilken form av programmering det är som renderar linjediagram med kortast svarstid. För att ta reda på detta utförs ett tekniskt experiment där renderingstider mäts i de applikationer som skapats i React och Python.

Mätningarna i React resulterar i kortare renderingstider än Python framförallt när det kommer till större datamängder där flera aktiekurser visualiseras samtidigt.

I ett framtida arbete kan en liknande undersökning utföras med skillnaden att mätningar utförs på interaktivitet med datan.

Nyckelord: Visualisering, Rendering, React, Python, Klient, Server

Innehållsförteckning

1 Introduktion 1

2 Bakgrund 2

2.1 Plotly 2

2.2 Server-side 4

2.2.1 Python 5

2.2.2 Relaterade arbeten 5

2.3 Client-side 5

2.3.1 JavaScript ramverk 5

2.3.2 React.js 6

2.4 Visualisering av data 7

3 Problemformulering 9

3.1 Hypotes 10

4 Metodbeskrivning 11

4.1 Forskningsetik 13

5 Genomförande 15

5.1 Litteraturstudie 15

5.2 Implementation 16

5.2.1 Installation av React 16

5.2.2 React Plotly 17

5.2.3 Python Plotly 20

5.2.4 Datagenerering 22

5.2.5 Tampermonkey Script 24

5.3 Progression 26

5.4 Pilotstudie 29

6 Utvärdering 34

6.1 Hårdvaruspecifikation 34

6.2 Presentation av undersökning 35

6.3 Analys 36

6.3.1 Rendering av linjediagram i React & Python med ett företag 36

6.3.2 Rendering av linjediagram i React & Python med 20 företag 39 6.3.3 Rendering av linjediagram i React & Python i olika webbläsare 42

6.4 Slutsatser 45

7 Avslutande diskussion 48

7.1 Sammanfattning 48

7.2 Diskussion 49

7.2.1 Etik och risker 51

7.2.2 Samhällsnytta och risker 52

7.2.3 Hållbarhet 54

7.3 Framtida arbete 55

Referenser 58

1 Introduktion

Visualisering av data förser människor med en bättre förståelse kring datan eftersom den mänskliga hjärnan har en benägenhet att se mönster på ett mer effektivt sätt när data illustreras i ett visuellt format (Ali et al. 2016). Eftersom digitaliseringen i samhället ökar blir den tillgängliga mängden data som finns att tillgå på internet större. Enligt Sadiku et al.

(2016) beror detta bland annat på det faktum att företag genererar stora mängder data varje dag. För att kunna analysera dessa stora datamängder måste datan visualiseras eftersom det enligt Ali et al. (2016) inte går att analysera data enbart genom att titta på de siffror som datan består av.

Finansiell data i form av aktiekurser är en komplex typ av data enligt Hua et al. (2018).

Genom att visualisera den data som aktiekurser består av ökar förståelsen kring datan och vad den representerar. Hua et al. (2018) menar även att visualisering av finansiell data bidrar med en större förståelse kring varje enskild aktie. Detta gäller inte minst för människor som besitter en begränsad kunskap om datan och finansiell data i sin helhet.

Att visualisera stora mängder data kommer inte helt utan problem. Ali et al. (2016) förklarar att det huvudsakliga problemet med visualisering av en större mängd data är att webbapplikationen som datan visualiseras på kan bli överbelastad eftersom det är påfrestande för webbservern att rendera stora datamängder. Ali et al. (2016) menar även att majoriteten av de visualiseringstekniker som finns att tillgå idag saknar en hög prestanda när det kommer till skalbarhet och funktionalitet men även responstid.

Ali et al. (2016) förklarar att en stor utmaning är att hantera data som är av varierande storlek. Något som kan försämra applikationens responstid är hög diversifiering och osäkerhet i de dataset som visualiseras.

Det går att rendera data både på servern och klienten för att sedan visualisera datan på klienten. Farzat et al. (2019) förklarar i sin forskningsartikel att stora delar av applikationer som är kodade i JavaScript exekverar i webbapplikationens klient och måste därför transporteras från servern till klienten för att fungera och denna transport tar längre tid ju större koden är. På grund av detta blir det intressant att se hur klientbaserad programmering skiljer sig från serverbaserad programmering när det kommer till rendering av linjediagram beståendes av finansiell data.

Ramverket React kommer jämföras med Python för att se vilken form av programmering som renderar diagram skapade i biblioteket Plotly på kortast tid. Arbetets problem ligger i att ta reda på ifall klientbaserad programmering resulterar i kortare svarstider vid skapandet av interaktiva linjediagram jämfört med serverbaserad programmering.

Frågeställningen baseras på en jämförelse mellan Python, PHP och Node.js som utfördes av Lei et al. (2014). I artikeln kom de fram till att Node.js, som exekverar program skrivna i JavaScript, presterar bättre överlag jämfört med Python. Inte minst när det kommer till hantering av hög samtidig data.

En vetenskaplig metod i form av ett tekniskt experiment kommer utföras där syftet är att samla in data i form av renderingstider från både React och Python. Det kommer skapas en applikation i React och en i Python där linjediagram kommer fyllas med fiktiv aktiedata där olika testfall kommer utföras för att mäta och jämföra olika faktorer som t.ex. stora datamängder och datamängder av varierande samtidighet.

2 Bakgrund

2.1 Plotly

JavaScript är det huvudsakliga programmeringsspråket på webben och språket är oumbärligt för dagens moderna webbapplikationer (Jensen, Møller & Thiemann 2009). Plotly.js är ett deklarativt högnivå-bibliotek som används för att skapa diagram. Plotly är byggt på d3.js och stack.gl. Den JavaScript baserade versionen av Plotly använder stack.gl för att skapa 2D- och 3D-grafer som går att zooma, panorera och interagera med. Utöver 2D- och 3D-grafer går det även använda plotly.js för att skapa statistiska- och vetenskapliga grafer (Beata et al. 2019).

Plotly har även en version som är baserad på programmeringsspråket Python. Detta bibliotek går använda till att skapa interaktiva grafer med hög kvalitet. Gemensamt för båda biblioteken är att det går skapa allt från linje- och stapeldiagram till heatmaps och histogram.

Pythons version av Plotly används för att analysera och visualisera data och med biblioteket går det skapa grafer och dashboards online men det går även använda offline med Ipython, notebook, jupyter och pandas.

Plotly använder sig av ett verktyg som heter “Web Plot Digitizer” som automatiskt tar data från en statisk bild. Det finns både en gratisversion och en betalversion. Gratisversionen bidrar med det mesta men för att få tillgång till alla verktyg krävs ett medlemskap (Ali et al.

2016).

Plotly ses om ett av de mest kraftfulla biblioteken inom datavisualisering. Bibliotekets största brist är det faktum att syntaxen inte är lätt att förstå sig på med en gång vilket gör det svårare för nybörjare att komma igång. Däremot går denna brist att förbise med tanke på Plotlys väldigt genomgående dokumentation som bidrar med flertalet exempel på olika grafer. Det är även möjligt att integrera grafer skapade i Plotly med biblioteket Dash som används för att skapa webbsidor i Python (Stančin & Jović 2019).

Figur 1 Exempel på linjediagram skapat med React Plotly.js

I Figur 2 går det se ett simpelt exempel på hur ett linjediagram skapas med Plotly.js i React.

Koden skrivs i programmeringsspråket React och innehåller i figuren endast tre datapunkter.

För att göra diagrammet mer verkligt går det föra in mer data i form av ett API (Application Programming Interface) alternativt fylla på mer data i “data” som illustreras i kodexemplet.

const Plot = createPlotlyComponent(Plotly);

ReactDOM.render(

React.createElement(Plot, { data: [

{

type: 'scatter', mode: 'lines', x: [1, 2, 3], y: [2, 6, 3]

}, ] }),

document.getElementById('root') );

Figur 2 Kodexempel för att skapa linjediagram i React Plotly.js

I Figur 3 går det se ett simpelt kodexempel på hur ett linjediagram skapas i Pythons version av biblioteket Plotly. I Figur 4 går det även se resultatet av koden. För att fylla på med mer data är det bara att fylla på i x och y. X fungerar som en räknare medan y är själva data som linjen i diagrammet består av. Även här går det föra in mer data i form av ett API.

import plotly.express as px

fig = px.line(x=[0, 1, 2, 3, 4, 5, 6], y=[5, 4, 2, 4, 8, 5, 4]) fig.show()

Figur 3 Kodexempel för att skapa linjediagram i Plotly

Figur 4 Exempel på linjediagram skapat med Plotly

2.2 Server-side

Webben är ett kraftigt växande lager bestående av olika resurser och internet används som ett medium för att få tillgång till dessa resurser. Webbens arkitektur består i synnerhet av två komponenter. Webbklienten är en applikation på en värdmaskin som efterfrågar dessa resurser och webbservern är en maskin på webben som finns till för att uppfylla klientens förfrågningar. Programmering på serversidan förknippas bland annat med tillhandahållandet av webbapplikationer och skapandet av dem medan programmering på klientsidan förknippas med utvecklingsverktyg och gränssnitt för att komma åt de webbapplikationer som skapats (Taneja & Gupta 2014).

På statiska webbsidor går det returnera dokument över webben till klienten på dess förfrågan. På dynamiska webbsidor går det däremot generera svaret till klienten genom användarinmatning i form av exempelvis formulär. Servern besitter bara förmågan att ta emot förfrågningar från en användare och returnera tillbaka svaret men servern kan däremot inte hantera användarspecifik data och generera ett svar. För att kunna göra det måste servern använda sig av en webbapplikation för att kunna generera svar dynamiskt (Taneja &

Gupta 2014).

Roy et al. (2009) förklarar att en webbserver är ett system som agerar värd för en webbsida samt bidrar med tjänster för alla klienter med en begäran. En vanlig klient-server arkitektur verkar genom att klienten får tillgång till servern genom internet och LAN-routern. När klienten vill få tillgång till servern skickar klienten en förfrågan till servern som tas om hand av routern. Webben hanterar förfrågan och kopplar upp sig till servern för att sedan skicka den efterfrågade datan till klienten.

Figur 5 visar hur klienten får tillgång till servern genom internet.

Figur 5 Klient-server arkitektur

2.2.1 Python

Python är ett programmeringsspråk som är både tydligt och lättläsligt och som låter användaren arbeta snabbt för att integrera olika system på ett mer effektivt sätt. Python används i stor utsträckning för att bearbeta uppgifter inom systemadministration och det används även för att programmera på webben (Lei et al. 2014).

Python har på senare tid framträtt som ett av de programmeringsspråken på webben som föredras allra helst på grund av dess enkelhet och simpla inlärning. Tack vare språkets flexibilitet går det på ett snabbt sätt utveckla webbaserade applikationer.

Webbutveckling med Python går även att underlätta med hjälp av kraftfulla ramverk som hjälper till att skapa en snabbare skapandeprocess då utvecklarna inte behöver skapa allting från grunden (Taneja & Gupta 2014).

Python används enligt Ozgur et al. (2017) i majoriteten av datavetenskapskurser på amerikanska universitet vilket innebär att det är viktigt att lära sig Python om tanken är att sträva efter en utbildning som kräver någon form av grundläggande kunskap när det kommer till programmering eller datavetenskap och inte minst för de som planerar en karriär inom dataanalys.

2.2.2 Relaterade arbeten

I en artikel skriven av Lei et al. (2014) utförs både objektiva systematiska test och test baserade på användarbeteende för att jämföra prestanda mellan PHP, Python och Node.js.

Resultatet de kom fram till var att Node.js presterade bättre än PHP i situationer med hög samtidighet samt att Node.js föredras att användas när det kommer till I/O-intensiva situationer. Dessutom är varken Node.js eller Python särskilt lämpliga för beräkningsintensiva webbsidor.

2.3 Client-side

2.3.1 JavaScript ramverk

JavaScript är dagens mest populära programmeringsspråk för webbapplikationer på browsern. Tack vare den stora mängd applikationer som JavaScript hanterar och den grad av varierande programmering som behövs har ramverk baserade på JavaScript utvecklats.

Dessa ramverk har tagits fram för att underlätta arbetet för webbutvecklare. När en webbapplikation skapas är det viktigt för utvecklaren att välja det ramverk som är bäst lämpat för uppgiften. Ramverket ska även se till koden är av hög kvalitet med en tillhörande hög prestanda (Gizas et al. 2012).

Enligt Pano et al. (2012) är komplexiteten i utvecklingen av nya applikationer ett hot mot den fortlöpande förändringen inom programmeringsspråk.

Detta tillvägagångssätt är något som kan lösa ett av dagens mål inom mjukvaruutveckling.

Pano et al. (2012) menar att ett av de större målen inom mjukvaruutveckling är skapandet av återanvändbar kod. Programmerare utvecklar idag diverse bibliotek som innehåller färdigskriven JavaScript-kod för att förenkla och skynda på utvecklingsprocessen i större projekt. Dessa bibliotek kan antingen vara grupperade utefter sina funktionaliteter eller så kan de vara en del av en större applikation innehållandes flera olika bibliotek, även kallat ett

ramverk. Ramverk baserade på JavaScript består bland annat av olika verktyg och funktioner som har testats på olika browsers och plattformar. Alla ramverk har sitt eget syfte och det kan vara allting från visuell design och animationer till grafhanterare (Pano et al. 2018).

2.3.2 React.js

React.js är ett User Interface-bibliotek som är utvecklat av Facebook för att underlätta skapandet av interaktiva, tillståndskänsliga och återanvändbara UI-komponenter. React.js fungerar som bäst när det kommer till rendering av komplexa användargränssnitt som kräver hög prestanda (Kumar & Singh 2016).

Facebook utvecklade React för att skapa en bättre användarupplevelse för både Facebook och Instagram. På grund av dess kraftfulla verktyg valde Facebook att släppa React som open source år 2013 för att tillåta utvecklare och företag världen över att använda ramverket.

Facebook har även skapat React Native som används för att utveckla mobilapplikationer för både Android och iOS (Xing et al. 2019).

Figur 6 React med Node.js som backend-lösning

I React finns det något som heter “mount”. Enkelt förklarat är det när en komponent läggs till i trädet. React använder sig av detta för att modifiera DOM (Document Object Model) för att rendera komponenten på browsern. Med hjälp av Google Chromes V8-teknologi blir renderingen av JavaScript mycket mer effektiv än vad renderingen blir på vanliga dynamiska webbsidor.

Xing et al. (2019) förklarar vidare att en viktig del av React är skapandet av en virtuell DOM.

På traditionella webbsidor baserade på HTML måste webbsidan renderas om varje gång en användare uppdaterar webbsidan. React skapar istället en virtuell DOM som nyttjar One-way data binding. När en användare navigerar sig på webbsidan skapar React en uppdaterad virtuell DOM som sedan jämförs med den DOM som visas. Därefter kartläggs skillnaden i varje komponent för att sedan rendera om transformeringen samt att andra enhetliga delar inte renderas om.

En tydlig fördel med en virtuell DOM är att webbsidan blir snabbare med React och Xing et al. (2019) menar även att React inte bara förändrar frontend-utveckling men även skapar en ny standard för UI-design och dess utveckling.

class Welcome extends React.Component { render() {

return <h1>Hello, {this.props.name}</h1>;

} }

Figur 7 Kodexempel i React

I Figur 7 går det se hur en komponent blir definierad som en klass. För att definiera en komponent i React måste React.Component förlängas med hjälp av “extends”.

Render är den enda metoden som måste användas i en klass-komponent. Väl i metoden returneras en simpel h1-tagg.

2.4 Visualisering av data

I dagens digitala värld genereras och bearbetas stora mängder data varje dag och denna data, även kallad “Big data”, kommer att vara transformerande i varje livssfär.

Anledningen till varför visualisering av data är av yttersta viktighet är för att den mänskliga hjärnan har en benägenhet att se mönster på ett mer effektivt sätt när data illustreras visuellt.

Med det i åtanke fungerar det inte att enbart analysera datan genom att titta på siffror (Ali et al. 2016).

Datavisualiseringens huvudsyfte är att kartlägga data och kunskap i ett visuellt format. Tack vare detta kan människor utnyttja sin hjärnas kapacitet och förmåga för att memorera och identifiera grafers innehåll för att accelerera förståelsen av informationen som visualiseras (Chen & Zhou 2016).

Enligt Sadiku et al. (2016) genererar företag stora mängder data varje dag vilket innebär att mängden data som finns tillgänglig på internet har ökat kraftigt.

Detta har i sin tur lett till ett behov av att kunna illustrera stora mängder data på ett användarvänligt sätt. Denna data ska enligt Sadiku et al. (2016) även vara lättillgänglig då möjligheten att visualisera data är väsentlig för vetenskaplig forskning. När data presenteras visuellt blir det lättare för analytiker att förstå sig på datan och det underlättar även när det kommer till att upptäcka mönster i datan samt skapa åsikter kring den.

Visualisering är nyttjandet av datorstödd visuell representation av data. Datan kan vara både statisk och interaktiv. Interaktiv datavisualisering tillåter användare att bestämma ett eget format för att visa datan. Ett exempel på detta är användningen av linjediagram som kan användas för att visa ett samband mellan två föremål. Exempelvis för att jämföra skillnader i datan över en viss tidsperiod (Sadiku et al. 2016). I Figur 8 går det se ett diagram innehållandes stora mängder data som illustrerar förändringar över en lång tid. I rena värden är datan väldigt stor men med hjälp av visualiseringen går det på ett enkelt sätt se förändringen i sin helhet.

Figur 8 Exempel på datavisualisering bestående av 10 000 datapunkter

3 Problemformulering

Det huvudsakliga problemet när det kommer till att visualisera en större mängd data på en webbsida är att webbsidan som visualiseringen illustreras på kan bli överbelastad då rendering av stora mängder data kan vara påfrestande för webbservern. En majoritet av dagens existerande visualiseringstekniker har låg prestanda när det kommer till skalbarhet, funktionalitet och responstid (Ali et al. 2016). Den stora utmaningen är inte enbart att bearbeta stora mängder data utan snarare att bearbeta data som är av varierande storlek.

Hög diversifiering och osäkerhet i dataseten reducerar webbsidans responstid eftersom den måste hantera både traditionellt strukturerad data samt semistrukturerad och ostrukturerad data (Ali et al. 2016).

Avhandlingen kommer beröra skapandet av interaktiva linjediagram för att visualisera finansiell data. Finansiell data i form av aktiekurser är en komplex typ av data. En visuell illustrering av den datan hjälper människor att utforska oändliga mängder av rådata som är svår att förstå för de med begränsad kunskap om datan. Att illustrera finansiell data visuellt bidrar även med en djupare förståelse för varje enskild aktie (Hua et al. 2018).

Ett problem med visualisering av data är att det ofta illustreras i form av statisk visualisering vilket inte går att interagera med. Genom att skapa interaktiva och dynamiska diagram går det erhålla data på begäran för att skapa interaktiva diagram av olika karaktär där det även går att addera och ta bort grafiska element dynamiskt (Chen & Zhou 2016).

För att skapa diagrammen kommer ett bibliotek användas fast i två olika former. Biblioteket Plotly kommer användas både i React och Python. Biblioteket går att använda med båda programmeringsspråken och därför blir det intressant att jämföra dessa då Plotly-diagram går att skapa både i React som är en klientbaserad typ av programmering och Python som är ett serverbaserat programmeringsspråk.

Anledningen till varför det är intressant att undersöka vilken form av programmering, klient eller server, det är som resulterar i bäst svarstider vid rendering av linjediagram som innehåller stora mängder data är det faktum att klientprogrammering skiljer sig så mycket från serverprogrammering. Klient-utvecklare skapar det som användaren ser medan server-utvecklare bygger den bakomliggande infrastrukturen.

Farzat et al. (2019) förklarar att en stor del av mjukvara skriven i JavaScript exekverar i klienten av webbapplikationen och måste därför transporteras från servern till klienten för att kunna utföras och ju större koden är desto längre tid tar den transporten. När det kommer till ramverket React påvisar Farzat et al. (2019) att JavaScript-bibliotek i sin helhet måste transporteras till klienten innan varje exekvering av applikationen och tiden det tar att utföra detta beror helt på källkodens storlek. Dessutom kan större bibliotek skapa fördröjningar i de fall applikationen används på mobila enheter med begränsad bearbetningskapacitet.

På grund av detta finns det en överhängande risk att klienten inte klarar av att hantera överföringen av data i realtid när datamängden blir alltför stor.

3.1 Hypotes

Målet med arbetet är att ta reda på ifall diagram som skapas i form av klientbaserad programmering resulterar i kortare svarstider än de diagram som skapas på servern med Python. För att ta undersökningen ett steg längre kommer graferna som skapas i Plotly baseras på både klientbaserad JavaScript som skrivs i ramverket React samt även serverbaserad Python.

De dynamiska linjediagram som skapas kommer användas för att visuellt presentera finansiell data på en webbsida.

Hypotesen är att graferna skapade med Plotly i React kommer ha en kortare renderingstid än de grafer som skapas med Plotly i Python när det kommer till visualisering av stora mängder data då varken Node.js eller Python är anpassningsbara för beräkningsintensiva applikationer men att Node.js i det stora hela presterar bättre än Python i det avseendet (Lei et al. 2014).

Eftersom Node.js är ett ramverk som exekverar datorprogram skrivna i JavaScript blir därför hypotesen att Plotly som baseras på React kommer resultera i kortare renderingstider än de grafer som skapas med den Python-baserade versionen av biblioteket Plotly.

4 Metodbeskrivning

I denna avhandling kommer den vetenskapliga metoden utföras i form av ett tekniskt experiment där kvantitativ data samlas in eftersom arbetet bygger på att två bibliotek som baseras på olika former av programmering jämförs mot varandra. Eftersom visuell data är det som kommer skapas kommer experimentet baseras på tiden det tar att rendera linjediagram bestående av olika mängder data (Wohlin et al. 2012). Utöver kvantitativ data finns det även kvalitativ data. Kvalitativ data har enligt Wohlin et al. (2012) som främsta mål att härleda slutsatser från data och samtidigt upprätthålla en tydlig följd av bevis som ser till att läsaren av arbetet kan följa med i texten och förstå både resultat och slutsats av den data som samlats in. Detta innebär att tillräcklig information från varje del av experimentet måste presenteras för läsaren. Den data som samlas in kommer vara kvantitativ men det är viktigt att läsaren hela tiden kan hänga med och förstå vad som sker i varje del av det utförda experimentet för att i senare skede bygga på/eller replikera arbetet.

Ett tekniskt experiment som vetenskaplig metod blir optimalt för denna typ av test då det blir enklare att styra och påverka det som sker utan påverkan av yttre omständigheter. Genom att utföra testningen av de två olika biblioteken i en kontrollerad miljö blir det enklare att skapa mer jämlika förutsättningar för de båda (Wohlin et al. 2012).

Tekniska experiment kan användas i situationer där det är viktigt med kontroll. Fördelen med experiment är även möjligheten att kunna manipulera beteende direkt och systematiskt.

Fördelen med att utföra experiment är att det går bekräfta teorier som tagits fram innan utförandet samt att experiment kan undersöka i vilken situation ett påstående är sant för att på så sätt ta fram det alternativ som är bäst lämpat för att hantera en viss situation (Wohlin et al. 2012).

För att kunna ta reda på vilket av biblioteken som renderar linjediagram med kortast svarstid kommer det utföras ett tekniskt experiment där grafernas data förändras mellan varje uppdatering genom manipulering av faktorer och variabler. Det som mäts är tiden det tar att uppdatera innehållet i graferna. Den form av interaktion som kommer ske med graferna är utbytandet av data, därför är det intressant att mäta tiden det tar för graferna att rendera linjediagram bestående av den nya datan.

Det som skiljer mätningarna åt är dels vilken teknik som används för att skapa graferna men även mängden datapunkter som genereras. Plotly skrivet i React.js och Plotly skrivet i Python är de tekniker som kommer användas och datapunkter per generering kommer variera mellan 10 000 datapunkter till 500 000 datapunkter.

Fallstudier inom mjukvaruutveckling är en empirisk undersökning som använder sig av flertalet källor av bevis för att utforska en del av ett fenomen för att skapa en verklighetstrogen kontext där effekten av en variabel blir enklare att förstå (Wohlin et al.

2012). Fallstudier används bland annat för att utforska projekt, aktiviteter och uppgifter.

Genom hela studien samlas data in för att utföra specifika statistiska analyser av datan.

Wohlin et al. (2012) menar att nivån av kontroll är lägre i en fallstudie gentemot ett experiment eftersom fallstudien är en observativ studie medan ett experiment är en kontrollerad studie. Genom observation, exempelvis i form av intervjuer, går det utvinna kvalitativ data som i en större grad kan förklara varför resultatet av studien blev som det blev.

Fördelen med fallstudier är att de i många fall införlivar kvaliteter som experiment inte kan visualisera. Exempel på detta är skalbarhet, komplexitet, oförutsägbarhet och dynamism samt att fallstudier är flexibla vilket är bra för att hantera komplexa och dynamiska fenomen

inom mjukvaruutveckling.

Wohlin et al. (2012) förklarar även att det finns problem med fallstudier. Som tidigare nämnt är den lägre nivån av kontroll ett problem med fallstudier. Nivån av kontroll blir lägre eftersom en fallstudie utförs i en naturlig miljö där fler saker kan påverka resultatet av studien. Ett annat problem med fallstudier är det faktum att forskaren inte har full kontroll över situationen. Oförutsägbara förändringar kan vara bra när kvalitativ data samlas in för det skapar en större förståelse kring de problem som undersöks i studien. Däremot går det inte vara säker på förändringarnas effekt på grund av förvirrande faktorer. När det kommer till att samla in kvantitativ data baserat på ett tekniskt experiment är oförutsägbara förändringar inget positivt då det sänker nivån av kontroll över experimentet. Wohlin et al.

(2012) förklarar att en risk med fallstudier är att fler än de variabler som ska mätas kan utsättas för oförutsägbara förändringar och därmed påverkas resultatet av studien negativt.

Med detta i åtanke blir det svårt att applicera en fallstudie i detta arbete eftersom det blir svårt att dra reella slutsatser av den data som samlats in.

Användarstudier utförs när användningen av en teknik eller ett verktyg redan har utförts eller innan de blivit framtagna. En användarstudie kan ses som en nulägesbild av en situation för att klargöra vilket nuvarande tillstånd som existerar. Dessa studier kan enligt Wohlin et al. (2012) användas för bland annat marknads- och opinionsundersökningar.

En användarstudie kan utföras för att exempelvis se över hur en ny process eller system inom ett företag har förbättrat utvecklarnas attityd gentemot upprätthållandet av kvalitet på arbetsplatsen. För att ta reda på ifall förändringen inom företaget varit positiv kan ett frågeformulär tas fram för att samla in både kvantitativ och kvalitativ data som är nödvändig för forskningen.

Med tanke på att en användarstudie allt som oftast är en undersökning som utförs i efterhand för att få en förståelse för hur människor påverkas, efter en förändring har skett, blir det inte en optimal utvärderingsmetod för just detta arbete då all data som samlas in kommer samlas in vid utförandet av experimentet. Däremot fungerar användarstudier optimalt när ett arbete inkluderar en mänsklig faktor för att exempelvis ta reda på hur användaren uppfattar en viss situation (Wohlin et al. 2012).

Eftersom det är statistik baserat på renderingstider som är det mest essentiella i experimentet kommer kvantitativ data samlas in. För kvantitativ data består analysen vanligen av deskriptiv statistik, korrelationsanalys, utveckling av prediktiva modeller samt testning av hypoteser (Wohlin et al. 2012). Enligt Wohlin et al. (2012) utförs testning av en hypotes för att fastställa om en eller flera variabler haft en betydande effekt på en eller flera andra variabler.

När ett experiment utförs är tanken att det ska vara möjligt att variera olika variabler i en process för att studera dess utfall. I ett experiment finns det både oberoende variabler och beroende variabler. Oberoende variabler är variabler som kan kontrolleras och manipuleras i ett experiment. De oberoende variabler som väljs ut i ett experiment inkluderar även i vilken skala mätningen sker, vilket omfång variablerna har samt på vilken nivå testerna kommer utföras. Enligt Wohlin et al. (2012) är de variabler som ska undersökas för att se vilken effekt en förändring av en oberoende variabel har en beroende variabel och vanligtvis finns det bara en beroende variabel i ett experiment. Därutöver är alla oberoende variabler de variabler som blir manipulerade och kontrollerade i experimentet.

Ett experiment utförs för att studera effekten en förändring i en eller flera oberoende variabler har. Dessa variabler kallas för faktorer och en behandling är ett värde av en faktor

(Wohlin et al. 2012).

I experimentet som kommer utföras i detta arbete finns det en faktor och två behandlingar.

Faktorn i experimentet är programmeringsspråken och behandlingarna är React och Python.

Det som experimentet kommer fokusera på är tiden det tar att rendera ett linjediagram. Den beroende variabeln blir med andra ord tid uttryckt i millisekunder medan de oberoende variablerna är de variabler som kommer manipuleras för att undersöka vilken effekt förändringen hade i experimentet. Ett alternativ till detta kan vara att mäta hur mycket data i kilobyte det krävs för att rendera linjediagramen och hur det påverkar exempelvis servern ju mer data det är som behandlas.

Diagrammen bör varieras för att få ett mer precist och tydligt resultat av experimentet. Det som kommer varieras är mängden data som diagrammen behandlar just för att kunna se hur väl de olika teknikerna klarar av att visualisera en större mängd data. Utöver mängden data går det även mäta exempelvis interaktioner för att skapa en mer verklig situation där en användare interagerar med ett diagram för att se hur lång tid det tar att rendera ett nytt linjediagram mellan varje interaktion men även för att skapa en större förståelse kring användarupplevelsen.

4.1 Forskningsetik

Ett etiskt problem som kan uppstå med problemområdet är att den finansiella datan som hämtas inte är creative commons. Det kan exempelvis vara så att den finansiella datan som tillhandahålls av företag X inte får användas av vem som helst i vilket syfte som helst. Därför måste det läggas stor vikt kring hämtningen av data.

Det kan även vara problematiskt att t.ex. hämta aktiekursen för företag X och därefter använda företagets namn för att visa att aktiekursen berör just det företaget. En av de saker som är extra viktig att ta i beaktning är ifall datan som används på något sätt är upphovsrättsligt skyddad.

Om ett företags aktiekurs är skyddad genom upphovsrätt går det inte använda den data som aktiekursen består av i detta arbete. Ett sätt att ta sig runt detta är att använda egen data som efterliknar ett företags aktiekurs. Den stora fördelen med detta är att datan inte används olagligt men att datan fortfarande ser autentisk ut vilket är det mest essentiella för arbetet.

De tekniska experiment som utförs för de olika programmeringsspråken måste utgå ifrån samma förutsättningar. Det får t.ex. inte förekomma ohederlig inklusion eller exklusion av data för att på något sätt få ett testobjekt att se bättre ut än vad det egentligen visar sig vara i experimenten och därmed blir förvrängd och oanvändbar för eventuell vidare forskning inom samma område.

Det är dessutom viktigt att testningen för programmeringsspråken inte bygger på randomiserad data eftersom det kan utmynna i opålitliga resultat. Däremot finns det problem även med icke randomiserad data. Det huvudsakliga problemet för de flesta benchmark-test är att dess dataset vanligtvis är känd i förväg vilket kan leda till en optimering av datan för att kunna presentera överlägsna resultat (Cai et al. 1998).

För att uppnå mer pålitliga resultat är det även viktigt att det utförs tillräckligt många test så resultatet av mätningarna inte bara är en slump. Ju fler test som utförs desto lättare blir det att se mönster och sålla bort enstaka utfall där det är tydligt att något påverkat mätningen negativt.

5 Genomförande

5.1 Litteraturstudie

Inspirationen som ligger till grund för just detta arbete är den visualisering av aktiekurser som de större svenska nätmäklarna Avanza (Avanza 2021) och Nordnet (Nordnet 2021) förser sina kunder med. De måste kunna förse sina kunder med visuella representationer av aktiekurser för att göra det tydligt hur aktien i fråga utvecklats över tid. Med hjälp av linjediagram blir det enkelt för kunderna att se både hur en enskild aktie utvecklats över olika tidsperioder men även hur utvecklingen på deras egna portföljer ser ut. Genom att visualisera olika data blir det möjligt för användaren att analysera datan på ett utförligt men samtidigt enkelt sätt.

Den inspiration som ligger bakom de diagram som skapas i arbetet är de linjediagram som används på Avanzas och Nordnets webbsidor. På Avanzas webbsida (Avanza 2021) går det se hur olika företags aktiekurser visualiseras i form av linjer i ett diagram. Precis som på Nordnets webbsida visualiseras företags aktiekurser, men visualiseringen skiljer sig åt mellan de olika nätmäklarna när det kommer till utseende. För att se hur aktiekurser visualiseras på Nordnets webbsida (Nordnet 2021) går det, precis som på Avanzas webbsida, söka fram valfri aktie i deras sökfunktion och därefter se aktiekursen för det valda företaget visualiserad i grafen.

Med tanke på dagens stora intresse för aktier och andra typer av investeringar uppstod en nyfikenhet kring just visualiseringen av aktiekurserna. Är de visualiseringstekniker som används verkligen optimala för sitt ändamål? Det finns flertalet olika sätt att jämföra detta på men det måste begränsas till något av signifikativt värde. Därför jämförs just den klientbaserade visualiseringen med den serverbaserade visualiseringen.

För att kunna komma igång med arbetet i React måste det finnas någon form av grundläggande kunskap då ramverket inte fungerar exakt som vanlig JavaScript. Boken

“Introduction to React” som är skriven av Gackenheimer (2015) lotsar läsaren genom det fundamentala med React och går igenom viktiga aspekter såsom JSX och komponenter.

Författaren förklarar även för läsaren varför React bör användas samt vilka typer av problem ramverket kan lösa och han gör bland annat detta genom att förse läsaren med mindre kodsnuttar som förklarar exempelvis componentDidMount och componentWillMount.

Funktionen componentDidMount kan exempelvis användas för att hämta data från en extern källa vilket är direkt applicerbart till detta arbete då det är tänkt att data ska hämtas från en extern JSON-fil.

Att bara utgå ifrån en bok om React blir inte särskilt hållbart eftersom ramverket är relativt nytt och hela tiden kommer med nya funktioner och uppdateringar. Därför används Reacts officiella hemsida under hela arbetet (React 2021). Reacts dokumentation är väldigt genomgående och enkel att följa från start till mål vilket är perfekt för en nybörjare som tänkt använda grundläggande React till ett mindre projekt. “Getting Started” är en sida där användare får en överblicksbild över allting som kan tänkas vara relevant för att komma igång med React (React 2021). Där hänvisar de till denna genomgång skriven av Tania Rascia (2018). Genomgången är väldigt användbar för att komma igång med React och skapa en React-miljö. I genomgången förklaras det även vilka olika sätt det går använda react på.

De diagram som skapas i React har sin grund i Plotlys dokumentation av JavaScript-baserade linjediagram (Plotly 2021). Men det fungerar inte fullt ut då diagrammen måste skapas i React. Därför används denna mindre dokumentation för just React-baserad Plotly (Plotly 2021).

När det kommer till det som skapas i programmeringsspråket Python behövs det inte så mycket grundläggande kunskap då allting som skapas mer eller mindre utgår direkt från biblioteket Plotly som används i arbetet. Inspirationen till de grafer som skapas i Python kommer direkt från biblioteket Plotlys webbsida (Plotly 2021).

I arbetet används Plotly Express som är den rekommenderade startpunkten för skapandet av grundläggande diagram (Plotly 2021).

För att kunna visa de linjediagram som skapas i Python används biblioteket Streamlit som finns till för att skapa enkla men rätt begränsade webbapplikationer. Syftet med Streamlit är helt enkelt att skapa en webbsida för att illustrera diagrammen istället för att göra det direkt i PyCharm. På så vis blir det mer lika villkor i jämförelsen mellan React och Python. Streamlit har en dokumentation som tar en igenom allt från nedladdning till design men även hur applikationen startas och hanteras (Streamlit 2021).

En bit in i arbetet uppstod det ett problem med att skapa datum som skulle användas för att förse graferna med en utökad interaktivitet. På webbsidan foxinfotech.in (Foxinfotech 2020) hittades lösningen på detta problem. Bloggförfattaren uppvisar flera exempel på hur det går generera datum som följer kalendern. Denna del av arbetet tas senare upp i progressionen då lösningen på detta problem visade sig vara av stor betydelse för arbetet i sin helhet.

Utöver de diagram som finns att tillgå hos Avanza och Nordnet har en så kallad “dashboard”

från plattformen Firebase (Firebase 2017) använts som inspiration.

5.2 Implementation

För att kunna utföra ett experiment som tar reda på vilken form av programmering, klient eller server, som renderar linjediagram med kortast svarstid måste det först och främst skapas ett diagram i vardera programmeringsspråk. Det har i React och Python skapats två applikationer som innehåller varsitt linjediagram. Linjediagramen har skapats med hjälp av biblioteket Plotly som fungerar för både Python och React. I denna del av arbetet kommer det förklaras vad som har gjorts från start till mål för att vägleda läsaren genom processen.

Utöver skapandet av linjediagramen kommer det även presenteras ett skript som används för att generera data samt ett mätskript som mäter tiden det tar för diagrammen att renderas.

5.2.1 Installation av React

Till skillnad från JavaScript har React en egen utvecklingsmiljö med en live server.

I denna miljö används JSX som är JavaScript+XML. JSX ger utvecklaren möjligheten att på ett enkelt sätt använda HTML i React-miljön.

I React har Facebook skapat “create react app” som är en miljö som kommer förinstallerad med allting som kan tänkas behövas för en utvecklare.

Det första som måste göras är att öppna terminalen och skriva in kommandot som illustreras i Figur 9. Vad kommandot gör är att skapa en React-miljö i den nämnda mappen.

npx create-react-app react-mapp

Figur 9 Kommando för att skapa en React-app

Efter att miljön har installerats är det bara att använda de kommandon som visas i Figur 10.

“cd react-mapp” leder till mappen som React-miljön installerats i och “npm start” är kommandot som används för att starta igång projektet.

cd react-tutorial npm start

Figur 10 Kommando för att starta React-appen

När projektet startas igång kommer den göra det på localhost:3000 och väl där kommer utvecklaren mötas av Reacts startläge och därefter kan utvecklaren påbörja implementationen av sitt eget projekt.

5.2.2 React Plotly

För att kunna skapa ett linjediagram måste det först skapas en ny fil utöver de filer som React skapar från början. chart.js är filen som skapas och till en början består filen endast av koden i Figur 11. Det första som skapas är en klass som förlänger en komponent. Det enda som måste definieras i en React-komponent är “render()”.

class PlotlyLineChart extends Component { render() {

return() }

}

export default PlotlyLineChart;

Figur 11 Klass som förlänger komponent

Genom exporten av klassen går det kalla på komponenten i app.js och det görs genom att importera klassen från filen den ligger i. I Figur 12 går det se hur det går till.

import './App.css';

import PlotlyLineChart from './chart';

function App() { return (

<div className="container">

<PlotlyLineChart/>

</div>

);

}

export default App;

Figur 12 Importering av klassen från filen chart.js

För att komma igång med biblioteket Plotly måste det först installeras. Detta görs genom att skriva kommandot “npm install react-plotly.js plotly.js”. Därefter måste även kommandot

“npm install plotly.js-basic-dist” skrivas in i terminalen. När allt det är nedladdat måste koden i Figur 13 skrivas in längst upp i filen. “plotly.js-basic-dist” är en “basic distributed bundle” som innehåller modulen “scatter” som sedan används i diagrammet. Factory är en JavaScript-fil som hämtas vid nedladdningen av “react-plotly-js” och den filen innehåller det som behövs att skapa diagram i React. Plot är variabeln som används senare i metoden

“render()”.

import Plotly from "plotly.js-basic-dist";

import createPlotlyComponent from "react-plotly.js/factory";

const Plot = createPlotlyComponent(Plotly);

Figur 13 Nedladdning av Plotly-bibliotek

De linjediagram som skapas hämtar sin data från en JSON-fil. För att detta ska funka i React skrivs koden i Figur 14 in i metoden “componentDidMount()”. Metoden är inte viktig i detta skede men den blir viktigare när det väl finns något att rendera då metoden körs igång först när en komponent blivit initierad. Däremot är det här JSON-datan hämtas och med hjälp av

“fetch” går det hämta all data från data.json. Genom att få ett svar från APIet går det uppdatera tillståndet hos datan. Vid det här laget är JSON-filen hämtad och reda att användas för att visualisera data i ett linjediagram. I commit e1bb¹ implementerades koden för det linjediagram som skapades i Plotly.js.

componentDidMount() {

const endpoint = 'data.json';

// data gets fetched from the variable endpoint containing the json fetch(endpoint)

// getting response from api

.then(response => response.json()) // updating state

.then(data => {

this.setState({data:data}) })

}

Figur 14 Hämtning av JSON-fil

Det sista som måste göras innan linjediagrammet är redo att skapas är att skapa och lägga till

“traces”. “addTraces” är en funktion i Plotly som tillåter en att skapa nya traces i en existerande graf.

1https://github.com/a18viksa/Examensarbete/commit/e1bb

addTraces(data) {

let traces = [];

let date = [];

// company takes Bg from json and assigns it to the y-axis thus displaying data in graph

let company = {'Bg': {'y': []}};

// pushing data from json to trace data.forEach(e => {

date.push(e.date)

company.Bg.y.push(e.Bg);

})

Figur 15 Skapande av nya traces

For-loopen i Figur 16 ser till att använda “Object.entries” för att returnera en array bestående av “key” och “value”. “Value” ser till att sätta värdet på y-axeln medan “key” möjliggör korrekta namn i legenden. Den hämtar med andra ord namnen direkt från JSON-filen. Det är även i denna for-loop där det bestäms vad diagrammet ska bestå av. Typen är scatter medan

“mode: ‘lines’” innebär att det är ett linjediagram som ska skapas.

// object.entries returning array of [key, value]

for (const [key, value] of Object.entries(company)) { traces.push({

type: 'scatter', mode: 'lines', x: date,

y: value.y, name: key })

}

return traces;

Figur 16 For-loop för att skapa linjer i diagram

För att få linjediagrammet att visa sig i applikationen måste den initieras och det gör den i metoden render(). Om datan inte kommit från en JSON-fil hade den skrivits direkt i “data”

men eftersom så inte är fallet måste funktionen “addTraces” initieras och det görs med hjälp av nyckelordet “this” som används för att hänvisa till objektet den hör hemma till. Samma gäller för “this.state.data” som implementerades i constructor. I state-objektet lagras värden som tillhör komponenten och i Figur 17 och Figur 18 går det se sambandet mellan dessa.

“data” är en tom array som fylls på med JSON-data och kopplas sedan till data-objektet i Plotly som säger till diagrammet vad den ska bestå av. I layout går det till sist bestämma hur diagrammet ska se ut. I detta projekt är det bland annat tillagt knappar och en rangeslider.

Hur den skapade applikationen ser ut går att se i Figur 19.

render() { return(

<div>

<Plot

data = {this.addTraces(this.state.data)}

layout={{ }}

Figur 17 Hämtning av data i Plot-komponenten constructor(props) {

super(props);

this.state = { data: []}

}

Figur 18 Lagring av data i constructor

Figur 19 Screenshot på React-applikationen innehållandes 20 företag 5.2.3 Python Plotly

Till skillnad mot installationen av React-miljön är Python desto simplare att komma igång med. I detta arbete används PyCharm som är en integrerad utvecklingsmiljö som är speciellt anpassad för programmeringsspråket Python. För att komma igång med skapandet av linjediagram i Plotly med Python är det bara att importera biblioteket som stödjer detta. I Figur 20 går det se hur Plotly Express importeras till utvecklingsmiljön.

import plotly.express as px

Figur 20 Importering av Plotly Express

Som tidigare nämnt är Plotly Express en modul inom Plotly som används för att generera figurer och diagram på ett snabbt och smidigt sätt. I commit 5f77²går det se hur data från en CSV-fil hämtas och appliceras på ett linjediagram. Med hjälp av px.line representeras varje datapunkt som en vertex av en polylinje i 2D-rymden. Där i går det ange värden till x -och y-leden. X representerar antalet datapunkter medan Y representerar förändringen i värde.

2https://github.com/a18viksa/Examensarbete/commit/5f77

Problemet med koden i commit 5f77³är att datan hämtas från en CSV-fil.

I React-applikationen används JSON och därför måste även Python-applikationen använda data från JSON för att mätningarna ska kunna bli mer rättvisa. Detta problem löses i commit c8e7⁴. I Figur 21 går det se hur koden ser ut för att hämta JSON-datan och sedan applicera det till diagrammet. “update_xaxes” används för att lägga till viktiga element såsom rangeslider och knappar som används för att ändra tidsperioder i diagrammet.

stock_data = open('data/js.json') data = json.load(stock_data)

stock_line_chart = px.line(x='date', y=['company1'], data_frame=data, width=800, height=500)

stock_line_chart.update_xaxes(

rangeslider_visible=True, rangeselector=dict(

buttons=list([

dict(count=1, label="1m", step="month", stepmode="backward") ])

) )

Figur 21 Hämtning av JSON och applicering till diagram

En viktig del i programmet är koden som visas i Figur 22. För att kunna visualisera datan i en applikation används “st” som används som nyckelord för att hänvisa till biblioteket Streamlit.

Med hjälp av denna minimala kod skapas en applikation på localhost:8501. Det enda som krävs för att starta applikationen är att skriva in kommandot “streamlit run ‘namn på fil’.py” i terminalen. I Figur 23 går det se hur den färdiga applikationen i Python ser ut.

import streamlit as st

st.plotly_chart(stock_line_chart)

Figur 22 Importering samt applicering av Streamlit

4https://github.com/a18viksa/Examensarbete/commit/c8e7

3https://github.com/a18viksa/Examensarbete/commit/5f77

Figur 23 Screenshot på Python-applikationen innehållandes 20 företag 5.2.4 Datagenerering

För att arbeta runt det potentiella problemet med illegal användning av riktig aktiedata från företag i den verkliga världen beslutades det att skapa fiktiva företag med fiktiv aktiedata. För att skapa ett script som genererar data används varken React eller Python utan istället vanlig JavaScript eftersom det passade bäst för att lösa just det problemet. Datan ska användas i JSON-format men i det här fallet skrivs datan ut som text på browsern och datan genereras med hjälp av en knapp med tillhörande “onClick” där funktionen “createStockData()” kallas.

Datan som skrivs ut kan i efterhand transformeras till ett passande JSON-format innan datan kopplas till något av de linjediagram som skapas. I detta arbete användes webbsidan csvjson.com (csvjson 2021) för att konvertera CSV-filen till ett JSON-format.

I Figur 24 går det se en del av koden som används för att generera datan. Först skapas ett Date-objekt vars syfte är att tillåta utvecklaren att arbeta med tid och datum. Detta objekt kopplas sedan samman till tre olika variabler. En som ansvarar för dag, en som ansvarar för månad och en som ansvarar för år.

Variabeln “maxDataPoints” fungerar som en maxgräns för scriptet. Det är denna variabeln som bestämmer hur många datapunkter det är som ska genereras. Med hjälp av for-loopen utförs det så många iterationer som variabeln bestämt på förhand. Nästföljande variabel

“company” agerar som en startpunkt för varje företag som ska skapas. Värdet anger vilken aktiekurs företag har från första datapunkt. Möjligheten att kunna ändra en akties startvärde skapar ett mer verklighetstroget scenario där alla aktier utgår från sig själva och var de befinner sig idag snarare än att de utgår från samma startpunkt som alla andra företag.

var date = new Date(2000, 01, 01);

function createStockData() {

// set number of datapoints to generate var maxDataPoints = 100;

// change start value of variable company for randomness var company = 100;

var text = "";

for (var i = 0; i < maxDataPoints; i++) { var data = [];

var day = date.getDate() + 0;

var month = date.getMonth() + 1;

var year = date.getFullYear();

Figur 24 Generering av datum och aktiekurs

De datum som genereras i scriptet måste följa ett visst mönster för att de ska fungera som riktiga datum i en JSON-fil. Om datumen är formaterade på ett felaktigt sätt kommer Plotly inte förstå att det är faktiska datum. För att plotly ska kunna förstå måste alla värden under 10 skrivas med en nolla först. Detta är något som bara kommer påverka dagar och månader och det illustreras i Figur 25. När datumet är formaterat som det nedre datumet är det redo att användas.

Figur 25 Felaktig formatering och korrekt formatering av datum Med hjälp av if-satserna i Figur 26 går det undvika dåligt formaterade datum.

De säger helt enkelt att om värdet är mindre än 10 lägg till en nolla. I commit 298f⁵löstes detta problem.

// if-statements that puts 0 before values under 10 to mimic real dates if (day < 10) {

day = "0" + day;

}

if (month < 10) {

month = "0" + month;

}

Figur 26 If-satser för bättre formatering av datum

För att i en större utsträckning efterlikna en akties normala kursrörelser används

“Math.random * 20 - 10”. Vad detta gör är att begränsa rörelsen både uppåt och nedåt. Det är exempelvis inte rimligt att en aktie går från 100 till 1000 på en dag och det är inte heller rimligt att en aktie ökar/sjunker med alltför små värden varje dag. Eftersom aktier i den verkliga världen är volatila på en rimlig nivå måste den data som genereras bete sig på ett

5https://github.com/a18viksa/Examensarbete/commit/298f

liknande sätt.

Variabeln “data” är en tom array som med hjälp av metoden “push” lägger till företagets värde i arrayen vilket går att se i Figur 27.

company += Math.round(Math.random() * 20 - 10);

data.push({

company, });

Figur 27 Random värde + push till data array

För att få fram denna data måste den skrivas ut någonstans. Den tomma strängen “text” tar emot år, månad, dag och variabeln “company”. I Figur 28 går det även se hur

“date.setDate(date.getDate()+1)” ser till att efter varje iteration i for-loopen skjuta datumet en dag framåt. Den slutgiltiga och fullt fungerande koden finns att tillgå i commit e3fa⁶.

company += Math.round(Math.random() * 20 - 10);

data.push({

company, });

Figur 28 Utskrivning av datagenereringen 5.2.5 Tampermonkey Script

Med hjälp av programmet Tampermonkey går det skapa ett externt script som används för att mäta tid av olika slag i de båda applikationerna som skapats.

De script som skapats i Tampermonkey mäter tiden det tar att ladda in all data och sedan rendera om hela applikationen. All data som samlas in vid mätningarna lagras i local storage.

Tack vare detta går det återanvända mer eller mindre samma script så länge applikationerna använder samma browser. Nedan text kommer gå igenom scripten i sin helhet men specifikt för det script som mäter på React-applikationen.

I commit d759⁷går det se den kod som används specifikt för nämnda applikation.

I Figur 29 går det se de variabler som används. Variabeln “iterations” är till för att bestämma antalet iterationer som scriptet ska utföra och “counter” används som en räknare. Den räknar alltså antalet iterationer så det blir enkelt att se hur många mätpunkter scriptet genererade under mätningen. Variabeln “startData” används för att få ut ett mått innan applikationen har blivit renderad.

För att få ut datan från mätningarna i local storage används “localStorage.getItem” som returnerar ett värde från det objekt som specificeras i funktionen.

let iterations = parseInt(localStorage.getItem("iterations"));

let counter = parseInt(localStorage.getItem("counter"));

let startData = parseInt(localStorage.getItem("startData"));

Figur 29 Olika variabler i Tampermonkey-scriptet

7https://github.com/a18viksa/Examensarbete/commit/d759

6https://github.com/a18viksa/Examensarbete/commit/ef3af

För att räkna ut tid i mätningen används Date-objektet som blir tilldelad variabeln

“measurement”. Denna variabel tar sedan emot “getTime()”-metoden som används för att returnera ett värde i form av millisekunder. Alla mätningar som utförs måste visas i millisekunder för att det ska bli möjligt att se variationer i mätningarna.

let measurement = new Date();

measurement = measurement.getTime();

Figur 30 Date-objekt & getTime()-metod

I Figur 31 finns det en if-sats som säger att ifall värdet av “counter” överstiger värdet av

“iterations” ska den återställas till noll. Ifall “setItem” inte tar emot två argument, variabeln och nollställaren av variabeln, kommer programmet klaga eftersom den funktionen kräver minst två argument för att fungera.

Tidigare nämndes “getItem()” som används för att hämta ett värde. För att sedan applicera värdet används den motsatta metoden “setItem()”.

I slutet av else-satsen används “window.location.assign” för att ladda in ny version av samma URL. En iteration består helt enkelt av en uppdatering av browsern.

När URLen laddats om startas varje process om tills dess att variabeln “counter” överstiger värdet av “iterations”.

if(counter > iterations){

localStorage.setItem("counter", 0);

} else {

startData = localStorage.getItem("startData");

startData += measurement + "\n";

// Increase counter and save data to local storage counter++;

localStorage.setItem("counter", counter);

localStorage.setItem("startData", startData);

window.location.assign('http://localhost:3000/');

}

Figur 31 Kod som visar vad som hämtas och vad som händer när “counter” blir större än “iterations”

I Figur 32 går det se två if-satser som behandlar varsin variabel. If-satserna säger helt enkelt att om det som hämtas är lika med “null” sätt värdet till noll. Detta är nödvändigt eftersom

“getItem()” kommer returnera “null” ifall det som returneras inte existerar.

if (localStorage.getItem("counter") == null) { localStorage.setItem("counter", 0);

}

if (localStorage.getItem("iterations") == null) { localStorage.setItem("iterations", 0);

}

Figur 32 If-satser för getItem och setItem

Utöver den kod som är skriven i Tampermonkey används det ytterligare kod för de mätningar som utförs på React-applikationen. Koden i Figur 33 visar en funktion som används för att hämta värdet efter renderingen har ägt rum. Denna funktion kallas sedan på i den React-specifika metoden “componentDidMount()”. Anledningen till detta är för att den metoden anropas direkt efter att en React-komponent blivit monterad(Mount). Detta sker efter den första render()-cykeln.

Varför mätningen sker just där är för att det är tänkt att mäta först efter allting har blivit renderat. Om “endData” räknas ut innan “componentDidMount()” blivit initierad kommer mätningen helt enkelt utföras på fel ställe i processen. Lösningen på detta går att se i commit 51f0⁸.

Ett problem som uppstår i och med detta är att ingen delta räknas ut automatiskt. Deltan är något som får räknas ut manuellt. I detta fall räknas deltan ut i Google Sheets genom att ta

“startData” och subtrahera det med “endData”. Detta görs enkelt med Google Sheets-funktionen “=SUM(A1-B1)”.

function performanceMeasure() { let measurement = new Date();

let endData = localStorage.getItem("endData");

measurement = measurement.getTime();

endData = localStorage.getItem("endData");

endData += measurement + "\n";

localStorage.setItem("endData", endData);

}

Figur 33 Mätscript i React-applikationen

Eftersom React och Python är två helt olika programmeringsspråk går det inte använda samma mätscript rakt av. Däremot följer de mer eller mindre samma princip. Mätscriptet för Python-applikationen räknar ut allting direkt i Tampermonkey-scriptet som går att se i commit e9c3⁹.

Den enda skillnaden scriptet emellan är att Python-scriptet räknar ut deltan automatiskt.

Anledningen till detta är för att scriptet utförs på samma ställe och inte någonstans direkt i Python-applikationen. Ett potentiellt problem med denna skillnad är att scripten inte är identiska vilket potentiellt kan vara till en fördel för det ena scriptet gentemot det andra.

Detta är något som kommer undersökas i kommande pilotstudie.

5.3 Progression

När projektet först startade var tanken att jämföra Python-biblioteket Matplotlib med JavaScript-biblioteket Canvas.js. Som det går se i commit c126¹⁰ fanns det en fungerande applikation där linjediagrammet var skapat med Matplotlib. Det stora problemet med Matplotlib, som märktes av rätt omgående, var att diagrammet blev uppladdat på Streamlit-applikationen som en PNG. På grund av att diagrammet blir uppladdat som en bild förlorar den direkt all form av interaktivitet. Dessutom renderas aldrig diagrammet utan bara bilden som illustrerar diagrammet och därmed går det inte mäta diagrammets renderingstid

10https://github.com/a18viksa/Examensarbete/commit/c126b

9https://github.com/a18viksa/Examensarbete/commit/e9c3

8https://github.com/a18viksa/Examensarbete/commit/51f0

på browsern.

Efter detta togs ett beslut om att byta bibliotek och det bibliotek som valdes var Plotly då Plotly-diagram går att ladda upp på Streamlit-applikationen som vektorgrafik. Diagrammet blir med hjälp av detta desto mer interaktivt samt att det går mäta renderingstider då linjediagrammet renderas om varje gång applikationen uppdateras. I commit 5f77¹¹går det se den nya koden som används för att skapa linjediagram i Plotly.

Till en början var tanken att använda CSV och inte JSON. Anledningen var för att det fanns tidigare vetskap om hur CSV-filer hanteras i Python. Däremot var det svårare att integrera ett CSV-format i React men lättare med JSON. Tillslut valdes JSON utan någon särskild anledning mer än att det var lättare att arbeta med JSON-data i React.

Dessutom kändes det hela tiden mer logiskt att både React och Python skulle använda sig av samma format för att hantera data istället för olika. Detta för att inget av språken skulle gynnas alternativt hämmas av datan under en mätning.

I commit c8e7¹² har koden justerats så den hämtar data från en JSON-fil istället för en CSV-fil.

Biblioteket Canvas.js var först tänkt att användas i projektet och det skapades även en fullt fungerande applikation med ett interaktivt linjediagram vilket går att se i commit 3400¹³. Men efter lite forskning om Canvas.js visade det sig att det tydligen kostade pengar att använda deras bibliotek. Det går dock använda biblioteket som student men då krävdes det en ansökan. Den bästa och smidigaste lösningen på detta blev att istället använda den JavaScript-baserade version av Plotly. Den stora fördelen med detta är att det mer eller mindre är samma bibliotek som jämförs fast i olika programmeringsspråk. Därmed blir det intressant för frekventa Plotly-användare att se om klienten eller servern renderar linjediagram med kortast svarstid.

Under arbetets gång uppstod det flertalet problem med det script som genererar fiktiv aktiedata. Till en början var det bara värden för x och y som skrevs ut. I x-led var det värden från 0 till maxvärdet medan det i y-led skrevs ut den aktuella aktiekursen för det företaget. I Figur 34 går det se hur datan såg ut till en början och i Figur 35 går det se hur den färdiga datan ser ut.

13https://github.com/a18viksa/Examensarbete/commit/3400

12https://github.com/a18viksa/Examensarbete/commit/c8e7

11https://github.com/a18viksa/Examensarbete/commit/5f77

Figur 34 Genererad data utan datum

Att lösa problemet med att skapa datum som följer kalendern visade sig vara väldigt problematiskt. Men lösningen på problemet hittades i ett blogginlägg. Författaren av blogginlägget visade olika sätt hur det i JavaScript går att arbeta med olika datumhanterare för att skapa sin egen kalender. Detta togs även upp tidigare i litteraturstudien.

Efter att denna kod implementerades i scriptet blev det möjligt att använda Plotlys datumfunktioner som kopplas till knappar och sliders. Möjligheten att kunna välja data interaktivt med hjälp av knappar som bestämmer mängden data som ska visas i linjediagrammet är av största betydelse för experimentet eftersom det då går välja vilken data som ska visas direkt i applikationen istället för att behöva ändra det i källkoden.

Figur 35 Genererad data med datum

När allting var så gott som färdigt med scriptet för datagenereringen märktes det av stora problem med prestandan när det skulle genereras större mängder data. Gränsen var på ungefär 2000 datapunkter. Om det skulle genereras mer data än så kraschade browsern.

Efter en tid av felsökning visade det sig att den tomma strängen “text” som tog emot all data låg på fel ställe. Då strängen låg inuti for-loopen fylldes den på med data utöver den data strängen redan hade vilket gjorde att utrymmet tillslut blev fullt. Genom att flytta ut strängen

från for-loopen gick detta problem att lösa. Resultatet av lösningen går att se i commit 2226¹⁴. Skillnaden är extrem då koden i just denna commit kan generera 50000 datapunkter på mindre än en sekund.

5.4 Pilotstudie

Innan experimentet utförs måste det kontrolleras ifall det är fullt genomförbart och därför genomförs en pilotstudie där mätningar utförs på de båda applikationerna som har skapats.

De mätserier som skapas kommer bestå av olika mängder data för att se om graferna tar längre tid att rendera ju mer data de måste ta emot.

De mätningar som utförs i pilotstudien kommer mäta tiden det tar att ladda om browsern.

Detta görs för att se om applikationen i sin helhet påverkas av den data som diagrammet visualiserar. Alla mätningar som utförs baseras på ett script som är skapat i Tampermonkey och alla mätningar utförs även i browsern Google Chrome.

Ett ytterligare syfte med pilotstudien är att undersöka ifall scriptet fungerar väl för båda applikationerna. Detta kan undersökas i de resultat mätningarna genererar för att se vilka eventuella problem scriptet haft vid tillfället för mätningarna och utifrån detta förbättra de brister som finns för att skapa bättre mätningar framöver.

Alla mätningar i pilotstudien utförs på en och samma dator. Den nämnda datorn har en AMD Ryzen 5 3600 6-Core 3.60 GHz processor med 8 GB RAM-minne och grafikkortet är NVIDIAs GeForce GTX 1650. Den datamängd och de mätpunkter som testen kommer bestå av i pilotstudien är begränsad. Anledningen till detta är för att storleken på testen inte har någon större betydelse i nuläget. Det viktiga är att utföra testen för att se att allting fungerar som det ska. Pilotstudien kommer testa experimentets genomförbarhet genom att utföra tester där linjediagram renderade i klienten via React kommer jämföras med linjediagram renderade på servern via Python. I Tabell 1 går det se de mätningar som kommer utföras i pilotstudien.

Tabell 1 Mätningar för pilotstudien

Språk Mätning Antal

mätningar Datapunkter Storlek på JSON-fil i kb

React.js 1 100 10 000 517 kb

Python 1 100 10 000 517 kb

React.js 2 100 50 000 1180 kb

Python 2 100 50 000 1180 kb

I Figur 36 går det se renderingstiderna visualiserade i form av linjer i ett diagram.

I mätningen har Plotlys bibliotek i React jämförts med samma bibliotek i Python.

Linjediagramen i de båda applikationerna består av ett företag beståendes av 10000 datapunkter.

En snabb överblick av mätningarna visar att Python levererar en mer volatil mätning än React. Reacts mätning visar en nästintill perfekt mätserie utan några större avvikande värden

14https://github.com/a18viksa/Examensarbete/commit/2226

vilket är rätt uppseendeväckande när det jämförs med Pythons mätserie av den anledning att scripten som utför mätningarna är nästintill identiska samt att det är samma JSON-filer som används för att populera diagrammen som skapas med samma bibliotek. Samma mätning utfördes fem gånger för att se om mätningen var pålitlig och mätningen uppvisade nästintill samma resultat varje gång.

Figur 36 Renderingstider - 10000 datapunkter

Genom att räkna ut medelvärdet av båda mätningar och visualisera det i form av stapeldiagram blir det lättare att se skillnaden i renderingstiderna. Mätningen på bara 100 iterationer må vara väldigt kortfattad och i det stora hela obetydlig. Men det är ändå anmärkningsvärt att renderingstiden i React är mer än dubbelt så snabb än renderingstiden i Python.

Standardavvikelsen som går att se i Figur 37 visar, som även gick att se tydligt i linjediagrammet, att Reacts mätning har en väldigt låg volatilitet. Mätningen i Python visar att det förekommit fler och större avvikande värden. Däremot går det inte hitta några överdrivna spikar i datan och därför har datan inte heller justerats.

Figur 37 Medelvärde med standardavvikelse - 10000 datapunkter

I Figur 38 går det se mätning nummer två presenterat i form av linjer i ett diagram. Även i denna mätningen påvisas ungefär samma resultat. React är mindre volatil medan Python är mer volatil. Skillnaden gentemot den första mätningen är att mängden data nu är fem gånger större. Det som mäts är fem företag i ett och samma diagram där varje företag består av 10000 datapunkter. Men mätningarna blir mer eller mindre oförändrade.

Figur 38 Renderingstider - 50000 datapunkter