Rendering av linjediagram i React & Python med 20 företag

För att kunna få tydligare svar angående hur React och Python hanterar olika datamängder där fokus läggs på antalet linjer som renderas i ett diagram skapades diagram beståendes av 1 MB, 5 MB och 15 Mb där den stora skillnaden jämfört med mätningarna i test 1 och test 2 är antalet företag som visualiseras på en och samma gång. Detta blir intressant att mäta eftersom storleken på datan i JSON-filerna fortfarande är lika stor i test 3 och test 4 som det är i test 1 och test 2 med skillnaden att varje objekt i JSON-filen består av mer data.

I Figur 44 går det se medelvärde och standardavvikelse för både React och Python när det kommer till rendering av 1 MB, 5 MB och 15 MB. Det går tydligt se hur både medelvärdet och standardavvikelsen för Python ökar ju mer data det är som hanteras i diagrammet. För React är det mer eller mindre raka motsatsen. Medelvärdet för 1 MB är betydligt högre än medelvärdet för 5 MB och 15 MB. En ytterligare faktor som gör den här mätningen intressant är att testfall 3.3 har en mindre standardavvikelse än testfall 3.2.

En annan sak som sticker ut är det faktum att mätningen på 1 MB resulterade i ett lägre medelvärde för Python jämfört med React.

I Figur 44 går det se en tydlig likhet i medelvärde mellan 5 Mb och 15 MB i React.

Ett Anova-test resulterar i p-värdet 0,22 vilket inte ligger under gränsen 0,05. Detta innebär att det inte finns tillräckliga bevis för att förkasta nollhypotesen. Med andra ord finns det ingen signifikant statistisk skillnad i mätningarna.

Figur 44 Medelvärde och standardavvikelse för 20 företag

Linjediagrammet i Figur 45 visar att Python i stora drag har ett mindre medelvärde än React när det kommer till mätning av 1 MB. Däremot är båda mätningarna aningen volatila fast på olika sätt. I mätningen på Python-applikationen går det tydligt se i Figur 45 att det händer någonting runt 250 iterationer in i mätningen. Exakt vad det beror på är svårt att säga men mönstret gick att se i alla de mätningar som utfördes på 1 MB beståendes av 20 företag. För att undersöka varför detta mönster uppstod utfördes ett antal test med fokus på felsökning. Alla test som utfördes uppvisade samma mönster vilket gör det svårt att dra en slutsats kring

exakt vad det är som sker i mätningarna på 20 företag beståendes av 1 MB data. Men resultatet i sig, medelvärde och standardavvikelse som visas i Figur 44, är fortfarande viktigt för experimentet.

Mätningen på samma datamängd och antal företag i React-applikationen resulterade även den i en relativt svårtolkad data där det går se ett tydligt medelvärde runt 500 men där datan i ett konsekvent mönster genererar spikar med kortare renderingstider. Men eftersom det inte är enstaka spikar lämnas de kvar då mätningens mönster i sig är väldigt fascinerande och oväntat eftersom mätningarna på större datamängder resulterade i kortare renderingstider med en lägre standardavvikelse. Med hjälp av stapeldiagrammet i Figur 44 går det med enkelhet se att mätningen på 1 MB i React resulterar i högre renderingstider med högre standardavvikelse jämfört med mätningarna på 5 MB och 15 MB.

Figur 45 Linjediagram som visar rendering av 20 företag och 1 MB data

Figur 46 visualiserar den stora skillnaden mellan mätningarna i React och Python beståendes av 15 MB data fördelat på 20 olika företag. React levererar ett väldigt lågt medelvärde samt en minimal standardavvikelse medan mätningen på 15 MB i Python både har ett högt medelvärde samt en tydligt hög volatilitet i mätningen. Genom att gå tillbaka till stapeldiagrammet i Figur 44 går det se hur stor skillnad det är mellan React och Python vid mätning av 15 MB data där 20 företags aktiekurser visualiseras på samma gång.

React levererar ungefär fem gånger så kort renderingstid som Python medan skillnaden i standardavvikelse är väldigt påtaglig.

Figur 46 Linjediagram som visar rendering av 20 företag och 15 MB data

Av resultatet att döma verkar det finnas tydliga trender i de mätningar som utfördes i test 3 och test 4. I Figur 47 går det se hur de olika mätningarna rör sig linjärt snett uppåt för Python medan React tydligt skiftar trenden nedåt redan från 1 MB till 5 MB. Figur 47 går koppla samman med Figur 44 då det visas samma mätningar men syftet med detta diagram är att enbart visa medelvärdet för att kunna se hur det förändras när datamängden blir större.

Figur 47 Medelvärden för rendering av 20 företag i React och Python

6.3.3 Rendering av linjediagram i React & Python i olika webbläsare

Test 5 och test 6 utfördes för att ta reda på ifall det existerade någon form av skillnad vid byte av webbläsare. Syftet med dessa test är att ta reda på om t.ex. Python fungerar bättre i Mozilla Firefox jämfört med Google Chrome. Det är intressant för undersökningen ifall ett byte av webbläsare faktiskt gör någon större skillnad. Dels eftersom det visar vilken webbläsare som är bättre att använda för att uppnå kortare svarstider men även för att ta reda på vilken webbläsare som genererar lägre standardavvikelse.

I Figur 48 går det se resultatet av mätningarna i testfall 5.1 och 5.2 visualiserade i ett stapeldiagram som visar både medelvärde och standardavvikelse. Det som mäts är 5 MB data fördelat på fem olika företag. Detta är för att få ett mätresultat som tillfredsställer både en större datamängd men även mängden data som hanteras i varje iteration i mätningen. Fördelen med att utföra en sådan mätning jämfört med en mätning på lite data med få företag och en mätning på en större datamängd med många företag är att mätningen resulterar i ett generellt medelvärde där det tas med aspekter från båda håll. På så sätt behöver det inte utföras för många resurskrävande test.

Skillnaden i medelvärde är inte överdrivet stor men det går se en påtaglig skillnad i standardavvikelse mellan React i Chrome och React i Firefox. Eftersom skillnaden i medelvärde inte är stor samt att standardavvikelserna överlappar varandra utförs det även ett Anova-test. Anova-testet visar p-värdet 0,0 vilket innebär att det finns en statistisk skillnad mellan mätningarna.

Figur 48 Medelvärde och standardavvikelse för React i Chrome och Firefox med 5 MB Mätningarna som visas i Figur 48 är modifierade av den anledning att det förekom spikar i båda mätningarna. Linjediagrammet i Figur 49 illustrerar detta väldigt väl.

Eftersom spikarna är så få i antalet samt tydligt avvikande från medelvärdet valdes dessa att tas bort. I det här fallet definieras en spik som ett tydligt avvikande värde även fast värdet i sig inte skiljer sig överdrivet mycket från medelvärdet. I Figur 46 går det t.ex. se flertalet avvikande värden i mätningen på Python-applikationen. Men hela den mätningen visar ett konsekvent avvikande mönster till skillnad från mätningen i Figur 49. I det stora hela gör inte modifieringen av datan särskilt mycket för resultatet men det är viktigt att poängtera varför dessa spikar tagits bort då ohederlig exklusion av data inte bör förekomma i ett tekniskt experiment som detta då det kan förvränga resultaten från mätningarna.

Figur 49 Linjediagram som visar rendering av 5 företag och 5 MB data med spikar I Figur 50 går det se linjediagrammet för samma mätning som visualiseras i Figur 49 med den stora skillnaden att spikarna från mätningarna är borttagna. Tack vare detta går det få bort extremvärden som kan förstöra mätningens kredibilitet. Däremot är det viktigt att poängtera att dessa spikar var återkommande under varje mätning som utfördes på denna datamängd varpå det eventuellt kan existera ett underliggande problem i de mätningar som mäter just denna mängden data.

I testfall 6.1 0ch 6.2 utförs samma mätningar som i testfall 5.1 och 5.2. Anledningen är för att se hur även Python-applikationen fungerar i olika webbläsare. Resultaten som illustreras i Figur 51 visar ett liknande resultat som i Figur 48 där mätningen i Firefox resulterar i ett lägre medelvärde än mätningen i Chrome. Därtill är standardavvikelsen i Firefox betydligt lägre än standardavvikelsen i Chrome vilket visar att Python i Firefox levererar bättre resultat både i form av medelvärde och standardavvikelse vilket fallet inte var för mätningarna i testfall 5.1 och 5.2.

Figur 51 Medelvärde och standardavvikelse för Python i Chrome och Firefox med 5 MB

6.4 Slutsatser

Anledningen till varför undersökningen utfördes var för att få svar på den initiala frågeställningen om diagram som skapas i form av klientbaserad programmering resulterar i kortare renderingstider än diagram som skapas med serverbaserad programmering.

För att ta reda på detta har det utförts flertalet olika test som tillsammans ska utmynna i tydliga fördelar i olika scenarion vare sig det är positivt för den klientbaserade programmeringen eller den serverbaserade programmeringen.

Baserat på alla mätningar som har utförts går det se ett tydligt mönster där den klientbaserade programmeringen i form av React resulterar i kortare renderingstider än vad den serverbaserade programmeringen i form av Python gör. Men detta går inte fastställa i alla fall då mätningarna visar att Python levererar kortare svarstider än React när det kommer till en mindre mängd data (1 MB). Däremot blir Python segare när det kommer till större mängder data. React är i detta avseende betydligt bättre än python. Genom att titta på Figur 40 i kapitel 6.3.1 går det se att medelvärdet för React knappt rör sig när datamängden blir större. Python levererar väldigt volatila mätningar när datamängden blir större vilket indikerar att applikationen inte lämpar sig för hantering av större datamängder.

När det kommer till rendering av mer data på en och samma gång blir det än mer tydligt att Python presterar bättre än React när den totala mängden data är mindre (1 MB). Anledningen till varför det utfördes mätningar på ett kontra 20 företag i ett och samma diagram fast med samma totalmängd i form av MB var för att se hur väl de olika formerna av programmering hanterar situationer där lite data renderas vid varje omladdning samt hur väl de klarar av en större mängd data som renderas på samma gång. I kapitel 1.2.2 om relaterade arbeten togs en artikel skriven av Lei et al. (2014) upp där det utfördes systematiska test mellan PHP, Python och Node.js. Författarna av artikeln kom fram till att Node.js, som är Reacts backend, presterar bättre än PHP i situationer med hög samtidighet. Hög samtidighet är absolut något som blir till verklighet när 20 företag visualiseras i samma diagram. Med hjälp av artikelns slutsatser blir det tydligt varför React presterar bättre än Python när det kommer till hantering av mer samtidig data. Däremot förklaras det aldrig i artikeln om Node.js överlag är bättre än Python och det är därför resultatet från denna undersökning blir intressant. Figur 47 i kapitel 6.3.2 visar hur medelvärdet för Python ökar linjärt ju mer data det är som behandlas. Detta är inget överraskande. Det är snarare logiskt med tanke på att mätningarna bör ta längre tid att utföra ju mer data som renderas vid varje iteration i mätningen. Utöver medelvärdet ökar även standardavvikelsen när datamängden blir större. I Figur 47 går det även se hur React levererar kortare svarstider vid rendering av 5 MB och 15 MB jämfört med 1 MB. Samtidigheten är fortfarande lika hög oavsett datamängden men av resultatet att döma presterar React sämre när den totala mängden data är mindre. Med hjälp av resultaten från mätningarna på 20 företag går det dra slutsatsen att React är bättre än Python när det kommer till hantering av större mängder samtidig data. Men det går även dra slutsatsen att Python presterar bättre än React när det kommer till hantering av mindre mängder samtidig data.

För att kunna utesluta ifall valet av webbläsare påverkar mätningarna utfördes det mätningar i både Google Chrome och Mozilla Firefox. Under hela undersökningens gång har Chrome varit standardwebbläsaren och alla mätningar som utförts har ägt rum i Chrome. Därför blir det intressant att jämföra Chrome med en annan populär webbläsare för att se hur stor påverkan valet av webbläsare har på klientbaserad respektive serverbaserad programmering. I alla mätningar som utfördes i test 5 och test 6 som behandlar just webbläsare visade det sig att Firefox resulterar i kortare svarstider jämfört med Chrome. Detta gäller inte minst för Python där skillnaden är kraftig med nästan 3 gånger kortare medelvärde när det kommer till renderingstid. Bytet av webbläsare påverkade även standardavvikelsen för Python som nästintill halverades.

För React blev inte skillnaden överdrivet stor vid byte av webbläsare. Medelvärdet sjunker en aning i Firefox medan standardavvikelsen ökar. Detta tyder på att det tar kortare tid att rendera innehållet i applikationen men att datan är mer oberäknelig och volatil.

För att få ett bredare och mer pålitligt mätresultat hade det förmodligen behövts utföras fler test på de olika webbläsarna för att få en klarare bild kring hur väl React och Python fungerar i Chrome och Firefox när det kommer till liten data med mindre samtidighet samt större mätningar innehållandes både en större datamängd men även mer samtidighet i form av fler företag som visualiseras samtidigt. Men de slutsatser som går att dra av detta är att det faktiskt existerar en statistisk skillnad mellan mätningarna då Anova-testet som utfördes på mätningarna i React visade ett p-värde på 0,0. Med andra ord går det säga att Firefox, se Figur 48, är den webbläsare som bör användas när det kommer till en mellanstor mätning (5 MB) innehållandes en del samtidighet (fem företag). Däremot var båda mätningar som utfördes i test 5 relativt slagiga då det uppstod en del spikar under mätningen. Detsamma

gällde för test 6 där Firefox visade sig vara det bättre alternativet men där datan i båda mätningarna visar på en oförklarligt hög instabilitet som går att se i Figur 52.

Figur 52 Linjediagram som visar rendering av 5 företag och 5 MB data

Den hypotes som togs fram till experimentet grundade sig i tidigare nämnda artikel skriven avLei et al. (2014). Hypotesen varatt de grafer som skapas 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. Hypotesen går i detta fall bekräfta då React i det stora hela uppvisar kortare renderingstider än Python inte minst när stora mängder data renderas.

7 Avslutande diskussion