6 Avslutande diskussion
6.3 Framtida arbete
I framtida arbete för denna studie finns det mer tester att genomföra. Som tidigare diskuterats skulle det vara intressant att se hur klientversionen och serverversionen skulle prestera på enheter med sämre prestanda än de enheter som presenterats i detta arbete.
Samt att se hur smarttelefoner, surfplattor och dylikt förhåller sig till båda versionerna, detta då även för att se över om eventuella vinster finns att hämta i svarstid och mängd överförd data vid 3G/4G-uppkopplingar. Mer spridning på testfall skulle vara en intressant aspekt att undersöka, genom att öka eller minska antalet datapunkter vid de angivna upplösningarna för att se hur detta skiljer sig, eller om det är så att själva upplösningen är huvudfaktorn för ökad eller minskad svarstid. Då även att testa på högre upplösningar då det går att se en ökande utveckling av exempelvis 4k eller högre upplösta på skärmar.
Även att testa på flertalet webbläsare och operativsystem. Detta för att se om det eventuellt är så att operativsystemet spelar en större roll mellan de olika webbläsarna och om det är hur operativsystemet spenderar sina resurser som spelar roll över hur resultaten blir, eller om det är så att det helt är en prestanda och hårdvarufråga. Med detta sagt då genomföra samma tester på en enhet med samma hårdvara där operativsystemet byts ut mellan testfallen.
Referenser
Bischoff, S., Hansson, A. & Al-Hashimi, B.M. (2013) Applying of Quality of Experience to system optimisation. 2013 23rd International Workshop on Power and Timing Modeling, Optimization and Simulation (PATMOS). September s. 91–98.
Eyraud-Dubois, L. & Uznanski, P. (2014) Point-to-Point and Congestion Bandwidth Estimation: Experimental Evaluation on PlanetLab Data. Parallel Distributed Processing Symposium Workshops (IPDPSW), 2014 IEEE International. Maj s. 89–96.
Fenopix. (2013) CanvasJS Charts, HTML5 JavaScript Charts. Tillgänglig på Internet:
http://www.canvasjs.com [Hämtad April 11, 2015].
Fulton, S. & Fulton, J. (2013) HTML5 Canvas. 2nd Edition. United States of America, O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472.
Gong, X., Jin, Y., Cui, Y. & Yang, T. (2012) Web visualization of distributed network measurement system based on HTML5. 2012 IEEE 2nd International Conference on Cloud Computing and Intelligent Systems (CCIS). Oktober s. 519–523.
Gude, S., Hafiz, M. & Wirfs-Brock, A. (2014) JavaScript: The Used Parts. Computer Software and Applications Conference (COMPSAC), 2014 IEEE 38th Annual. Juli s. 466–475.
Holowaychuk, T., Rajlich, N., Vagg, R. & Zaytsev (2015). Node-canvas (Version 1.1.6) [Programvara]. Tillgänglig på Internet: https://github.com/Automattic/node-canvas [Hämtad Januari 20, 2015].
Joyent Inc. (2015). Node.js (Version 0.10.35) [Programvara]. Tillgänglig på Internet:
http://nodejs.org [Hämtad Januari 15, 2015].
Kim, J., Levy, E., Ferbrache, A., Stepanowsky, P., et al. (2014) MAGI: a Node.js web service for fast microRNA-Seq analysis in a GPU infrastructure. Bioinformatics. 30 (19), s. 2826–
2827.
Loopia.se (2015). https://www.loopia.se [Hämtad Maj 9, 2015].
McLaughlin, B. (2011) What is NODE?. United States of America. 1005 Gravenstein Highway North, Sebastopol, CA 95472., O’Reilly Media, Inc.
Miller, C.A., Anthony, J., Meyer, M.M. & Marth, G. (2013) Scribl: an HTML5 Canvas-based graphics library for visualizing genomic data over the web. Bioinformatics. 29 (3), s. 381–
383.
Nilsson, P. & Reveman, D. (2004) Glitz: Hardware Accelerated Image Compositing Using
Poncela, J., Gómez, G., Hierrezuelo, A., Lopez-Martinez, F.J., et al. (2014) Quality Assessment in 3G/4G Wireless Networks. Wirel. Pers. Commun. 76 (3), s. 363–377.
Rajamony, R. & Elnozahy, E. (Mootaz) (2001) Measuring Client-Perceived Response Time
on the WWW. USITS. s. Tillgänglig på Internet:
https://www.usenix.org/event/usits01/full_papers/rajamony/rajamony.pdf [Hämtad Februari 13, 2015].
Rellermeyer, J.S., Lee, S.-W. & Kistler, M. (2013) Cloud platforms and embedded computing - The operating systems of the future. 2013 50th ACM / EDAC / IEEE Design Automation Conference (DAC). May s. 1–6.
Riiser, H., Vigmostad, P., Griwodz, C. & Halvorsen, P. al (2013) Commute Path Bandwidth Traces from 3G Networks: Analysis and Applications. Proceedings of the 4th ACM
Tiwari, D. & Solihin, D. (2012) Architectural characterization and similarity analysis of sunspider and Google’s V8 Javascript benchmarks. 2012 IEEE International Symposium on Performance Analysis of Systems and Software (ISPASS). April s. 221–232.
Wenzel, M., Gericke, L., Gumienny, R. & Meinel, C. (2013) Towards cross-platform collaboration - Transferring real-time groupware to the browser. 2013 IEEE 17th International Conference on Computer Supported Cooperative Work in Design (CSCWD).
Juni s. 49–54.
Wohlin, C., Runeson, P., Höst, M., Ohlsson, M.C., Regnell, B. & Wesslén, A (2012) Experiment in Software Engineering. Berlin Heidelberg: Springer. ISBN 978-3-642-29043-5.
Xu, C., Qiao, Y., Lee, B. & Murray, N. (2014) MOJA - Mobile offloading for JavaScript applications. 25th IET Irish Signals Systems Conference 2014 and 2014 China-Ireland International Conference on Information and Communications Technologies (ISSC 2014/CIICT 2014). Juni s. 59–63.
Yang, J., Qiao, Y., Zhang, X., He, H., et al. (2014) Characterizing User Behavior in Mobile Internet. IEEE Transactions on Emerging Topics in Computing. PP (99), s. 1–1.
Appendix A - diagramCanvas.js
Defines the canvas (mostly just for show when first entering the page).
Generates the color for the specified series.
*/
function generateColor(whichSeries){
var color;
var colorPalette;
colorPalette = ["red", "blue", "yellow", "green"];
color = colorPalette[whichSeries];
return color;
}
/*
Gets values from the specified series. How many values for chosen series
and defines which series that should be drawn.
*/
return;
//exportData(totalTime); // Only in the client version.
iteration2--;
a.href = window.URL.createObjectURL(new Blob(["Antal iterationer:
"+numIteration+"\n"+"Antal värden: "+
numValue+"\n"+iterationTime+"Total tid (MS): "+exportTime], {type:
'text/csv'}));
iterationTime += "Iteration: ," + numIteration + " ," + "Tid (MS): ," + time + "\n";
}
/*
Used to write the evaluation data to the console.
*/
function timeAndCoordinates(totalTime){
console.log(iterationTime + "\n" + " Totaltid: " + totalTime);
console.log(allCoordinates); // Used to get all coordinates used in the tests.
}
/*
Draws the values lines (X and Y lines).
*/
var nextSeries;
ctx.beginPath();
for(var i = 0; i < numValues; i++){
xCoordinates = divider;
yCoordinates = Math.floor((Math.random() * (canvas.height-1)) + 1);
saveCoords(xCoordinates,yCoordinates);
Function for the actual drawing of the diagram.
*/
function drawDiagram(x, y, whichSeries, nextSeries){
var gradient = true; // Set to false to turn off gradient.
var smoothLines = true; // Set to false to turn off smooth lines.
var valueDots = true; // Set to false to turn off dots at each value.
var valueText = true; // Set to false to turn off text values.
if(nextSeries){
ctx.lineWidth = 2; // Thickness of lines.
ctx.strokeStyle = generateColor(whichSeries); // Returns colors for each line.
ctx.lineTo(x, y);
if(smoothLines){
ctx.lineJoin = "round"; //Draws the connecting lines smoother.
}
if(valueDots){
ctx.arc(x, y, 1.5, 0, 2*Math.PI); //Draws dots at each max Y-value.
}
if(valueText){
ctx.font = "14px Cambria"
ctx.fillStyle = "#000000";
ctx.fillText(y, x-5, y-5);
} }
}
/*
Function used to save all the coordinates used in the test.
This is to make the tests possible of recurrence (återupprepningsbara).
*/
var allCoordinates = "";
function saveCoords(x,y){
allCoordinates += "X: ,"+x+","+" Y: ,"+y+"\n";
}
/*
Function for clearing the diagram.
*/
function clearDiagram(){
ctx.clearRect (0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#F5F5F5";
ctx.fillRect(0,0,canvas.width,canvas.height);
}
Appendix B - index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>*CLIENT* Exjobb Canvas Diagram</title>
</head>
<body>
<h2>Klient Rendering</h2>
<br/>
<canvas id="diagramCanvas" width="800" height="600"></canvas>
<script src="javascripts/diagramCanvas.js"></script>
</body>
</html>
Appendix C - serverDiagramCanvas.js
Defines the canvas (mostly just for show when first entering the page).
Generates the color for the specified series.
*/
function generateColor(whichSeries){
var color;
var colorPalette;
colorPalette = ["red", "yellow", "blue", "green"];
color = colorPalette[whichSeries];
return color;
}
/*
Gets values from the specified series. How many values for chosen series
and defines which series that should be drawn.
*/
var refreshId = setInterval(function getSeries(){
var totalTime;
if(iteration == ""){
var numValues; // Number of desired values.
var whichSeries; // Which series that should be drawn.
numValues = series[0] // First series values.
numValue = numValues;
//exportData(totalTime); // Only in the client version.
iteration2--;
function exportData(data){
var exportTime = data;
var a = window.document.createElement('a');
a.href = window.URL.createObjectURL(new Blob(["Antal iterationer:
"+numIteration+"\n"+"Antal värden: "+
iterationTime += "Iteration: ," + numIteration + " ," + "Tid: ," + time +
"\n";
}
/*
Used to write the evaluation data to the console.
*/
function timeAndCoordinates(totalTime){
console.log(iterationTime + "\n" + " Total tid: " + totalTime);
console.log(allCoordinates); // Used to get all coordinates used in the tests.
}
/*
Draws the values lines (X and Y lines).
*/
ctx.moveTo(x,canvas.height);
Generates the coordinates for the specified series.
*/
function generateCoordinates(numValues, whichSeries){
var xCoordinates; // Stores current X-coordinate.
var yCoordinates; // Stores current Y-coordinate.
var divider = 0; //Space between each value.
var dividingValue = canvas.width/numValues;
var nextSeries;
ctx.beginPath();
for(var i = 0; i < numValues; i++){
xCoordinates = divider;
yCoordinates = Math.floor((Math.random() * (canvas.height-1)) + 1);
saveCoords(xCoordinates,yCoordinates);
/*
Function for the actual drawing of the diagram.
*/
function drawDiagram(x, y, whichSeries, nextSeries){
var gradient = true; // Set to false to turn off gradient.
var smoothLines = false; // Set to false to turn off smooth lines.
var valueDots = true; // Set to false to turn off dots at each value.
var valueText = true; // Set to false to turn off text values.
if(nextSeries){
ctx.lineWidth = 1; // Thickness of lines.
ctx.strokeStyle = generateColor(whichSeries); // Returns colors for each line.
ctx.lineTo(x, y);
if(smoothLines){
ctx.lineJoin = "round"; //Draws the connecting lines smoother.
}
if(valueDots){
ctx.arc(x, y, 1, 0, 2*Math.PI); //Draws dots at each max Y-value.
var allCoordinates = "";
function saveCoords(x,y){
allCoordinates += "X: ,"+x+","+" Y: ,"+y+"\n";
}
/*
Function for clearing the diagram.
*/
function clearDiagram(){
ctx.clearRect (0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#F5F5F5";
ctx.fillRect(0,0,canvas.width,canvas.height);
}
/*---CREATING THE SERVER---*/
var ip_adress = "192.168.1.210"; // Where to host the server.
http.createServer(function (req, res) {
res.writeHead(200, { 'Content-Type': 'text/html' });
res.write(html);
res.end(''
+ '<img src="' + canvas.toDataURL() + '" />');
}).listen(8000,ip_adress);
console.log('Server started at '+ip_adress);
});
Appendix D - serverIndex.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>*SERVER* Exjobb Canvas Diagram</title>
</head>
<body>
<h2>Server Rendering</h2>
<br/>
</body>
</html>