Sammanfattning
Arbetets syfte har varit att undersöka hur valet av vy-baserade ramverk i förhållande till handskriven JavaScript påverkar exekveringstiden för sortering av interaktiva tabeller. För att komma fram till hur dessa tekniker står sig mot varandra har ett tekniskt experiment utförts.
Tre webbapplikationer skapades för experimentet, en för var och en av de olika teknikerna.
Webbapplikationerna bestod av sorteringsbara tabeller i olika storlekar. Tester gjordes senare där de olika tabellerna sorterades medan exekveringstiden för detta sparades för att sedan kunna jämföras med de andra teknikerna.
Resultatet visade att valet av ramverk spelar stor roll när låg exekveringstid för sortering av interaktiva tabeller eftersträvas. Det visade sig också att handskriven JavaScript utförde sorteringarna långsammare än Angular, men snabbare än Backbone. Webbapplikationen för Angular utförde samtliga tester snabbast. Backbone-applikationen var den enda som kom upp i så höga exekveringstider att tabellerna började bli oanvändbara. Experimentet har visat att exekveringstiden kan skilja så mycket som över 50 gånger beroende på vilket ramverk som väljs när sorteringsbara tabeller ska implementeras.
Diskussion
Att välja rätt ramverk vid implementeringen av en ny webbapplikation har stor betydelse kan konstateras efter de resultat som fastslåtts i experimentet. Om väldigt stora interaktiva tabeller ska användas på sidan så kan exekveringstiden skilja väldigt mycket beroende på vilket val som görs. I de tester som gjorts har exekveringstider strax under en och en halv sekunder uppmätts. Vilket betyder att om tabellens storlek dubbleras eller ökar i storlek ännu mer så kan det ta över två sekunder eller ännu längre tid att utföra en sortering. Enligt (Mickens, 2010) har detta stor betydelse då många användare väljer att lämna en webbsida om laddningstiden tar mer än tre sekunder. Det betyder att fel val av ramverk kan resultera i att användare lämnar sidan, när ett annat ramverk hade fått användaren att stanna kvar. För en stor organisation eller andra stora sidor kan detta få stora oönskade konsekvenser.
Experimentet kan därmed vara till samhällelig nytta för de som funderar över vilken teknik som ska användas för just deras webbplats. I förlängningen kan samtliga enheter där man kan använda sig av webbapplikationer få ner exekveringstider på nästan allt, då väldigt mycket av all data visas i någon typ av tabell på nätet.
Det kan finnas risker med att använda ramverk istället för handskriven JavaScript som inte har nämnts tidigare i arbetet. Problem som kan finnas med att använda ramverk på olika sätt är att koden i sig för webbapplikationen kan föråldras då ramverken uppdateras över tid.
Webbapplikationen i sig kan då sluta fungera om ramverket automatiskt hämtas och uppdateras, vilken kan leda till att hela applikationen måste göras om på nytt. Sådana saker slipper man tänka på som utvecklare om vanlig handskriven JavaScript kan användas istället.
24
Richard-Foy m.fl. (2013) nämner att koden för en webbapplikation skriven med ett JavaScript-ramverk är mer långsam än en skriven med ren JavaScript. Att detta inte behöver vara sant ser vi i experimentets resultat. Det har betydelse vad som ska utföras och hur det implementeras. Det finns nämligen inte bara ett sätt att utföra de sorteringar som gjorts i experimentet. Den kod som exekverade snabbast i de tester som gjorts skulle exempelvis kunna implementeras på ett annat sätt och därmed ta längre tid att exekvera än de webbapplikationer som enligt experimentet var långsammast.
Man kan diskutera om tillräckligt med data från experimentet finns. Hittills har endast två ramverk testats mot handskriven JavaScript med ett fåtal olika dataset. Dessa har i sin tur endast testats i en typ av webbläsare. Därför kan det vara svårt att fastställa ett säkert resultat, när olika ramverk exempelvis fungerar olika bra på olika webbläsare. Det ramverk som enligt experimentet visade sig vara snabbast, kanske bara är det i den webbläsare som valts.
För att experimentet ska kunna återupprepas och vara forskningsetiskt rätt ligger all kod (förutom för själva ramverken) för de olika webbapplikationerna i rapportens appendix A-F.
Som det har diskuterats tidigare kan dock samma versioner av ramverkens bakomliggande kod försvinna över tid då de blir utdaterade. De olika versioner av de ramverk för respektive webbapplikation som använts finns antecknat i appendix under respektive ramverks webbapplikation. Dessa måste dock hämtas från nätet för att kunna återskapa samma experiment. Övrig hård- och mjukvara som använts i experimentet finns att se under utvärdering (kapitel 5).
Framtida arbete
Om arbetet hade fortsatt ett tag till hade det varit intressant att göra större och fler tester där tabeller inte bara innehåller text, utan även bilder och eller andra filer. Vad som också borde göras vid ett fortsatt arbete är att förfina koden för varje applikation och testa olika sorteringsalgoritmer. Det borde också genomföras tester på andra sorters enheter som mobiltelefoner och surfplattor då dessa är väldigt vanligt förekommande idag. Experimentet är utfört i endast en webbläsare, och därför borde även testerna köras i fler webbläsare. Vid ett fortsatt arbete borde även anledningarna till de olika spikar och andra mönster som kan ses i analysen undersökas. Däribland exempelvis varför den första mätpunkten för Angular-applikationen alltid är långsammare än den andra.
Ett fortsatt arbete på samma tema fast i större skala skulle kunna resultera i en jämförelsetjänst för utvecklare som utefter valt användningsområde får hjälp att välja rätt ramverk. Då skulle jämförelser för just interaktiva sorteringsbara tabeller vara en liten del av det hela. Om en sådan tjänst finns och fungerar på ett bra sätt har alla något att vinna på detta.
Utvecklarens arbete hade underlättats samtidigt som många typer av fel kan förebyggas. Men även för slutanvändaren får detta endast positiva konsekvenser i form av snabbare laddningstider och mindre buggar i samtliga webbapplikationer. Det skulle kunna fungera på det sättet att utvecklaren matar in en kravlista på vad webbapplikationen ska kunna göra.
Exempelvis hur stor mängd data som kommer användas, hur många som kommer använda webbapplikationen och vad som ska kunna utföras. Därefter kommer tjänsten med det ultimata förslaget för vilken typ av kod som behövs för att göra arbetet.
Referenser
Chuan, Y. & Wang, H. (2009) Characterizing insecure Javascript practices on the web.
Proceedings of the 18th international conference on World wide web WWW ’09. New York, NY, USA, ACM. s. 964-965.
Gizas, A., Christodoulou, S. & Papatheodorou, T. (2012) Comparative evaluation of
Javascript frameworks. Proceedings of the 21st international conference companion on World Wide Web WWW ’12. New York, NY, USA, ACM. s. 513-514.
Gupta, S., Kaiser, G., Neistadt, D. & Grimm, P. (2003) DOM-based content extraction of HTML documents. Proceedings of the 12th international conference on World Wide Web WWW ’03. New York, NY, USA, ACM. s. 207-214.
Hermansson, D. (2014) DOM-manipulering i interaktiva tabeller med JavaScript-ramverk.
2014 Kandidatavhandling Skövde, Sverige: Högskolan i Skövde.
James Mickens, Silo: exploiting JavaScript and DOM storage for faster page loads,
Proceedings of the 2010 USENIX conference on Web application development, p.9-9, June 23-24, 2010, Boston, MA
Mardan, A. (2015) Full Stack JavaScript: Learn Backbone.js, Node.js and MongoDB. 1st edition. Apress Berkely, CA, USA. ISBN 14842175009781484217504
Muin, M., Fontelo, P. & Ackerman, M. (2006) PubMed Interact: an interactive search application for MEDLINE/PubMed. Proceedings of the international symposium on Biomedical and Health Informatics AIMA ’06, 11-15 november, 2006, Washington, DC, USA.
Osmani, A. (2013). Developing Backbone. js applications. " O'Reilly Media, Inc.".
Ratanaworabhan, P., Livshits, B. & Zorn, B. (2010) JSMeter: Comparing the behavior of Javascript benchmarks with real web applications. Proceedings of the USENIX
conference on Web application development, Boston, Massachusetts, 23-24 juni, 2010.
Reine.se (2014) Client-side table sorting using DOM scripting. Tillgänglig på Internet:
http://minkmachine.reine.se/2003/09/client-side-table-sorting-using-dom-scripting/
[Hämtad: 15 april 2016]
Richard-Foy, J., Barais, O. & Jézéquel, J. (2013) Efficient high-level abstractions for web programming. Proceedings of the 12th international conference on Generative
programming: concepts & experiences GPCE ’13. New York, NY, USA, ACM. s. 53-60.
Sevilleja, C. (2015) Sort and Filter a Table Using Angular. Tillgänglig på Internet:
https://scotch.io/tutorials/sort-and-filter-a-table-using-angular [Hämtad: 17 april 2016]
26
StackOverflow (2008) When should I use Inline vs. External Javascript? Tillgänglig på Internet: http://stackoverflow.com/questions/138884/when-should-i-use-inline-vs-external-javascript [Hämtad 15 april 2016].
Wohlin, C., Runeson, P., Höst, M., Ohlsson, M., Regnell, B. & Wesslén, A. (2012) Experimentation in Software Engineering. Springer, Heidelberg, Berlin. s. 16-17.
Xu, W., Yang, X. & Shi, Y. (2010) Enhancing browsing experience of table and image elements in web pages. Proceedings of the international conference on Multimodal
Interfaces and the Workshop on Machine Learning for Multimodal Interaction ICMIMLMI
’10. New York, NY, USA, ACM.
Appendix A - JavaScript-applikation. Index.html
II
<tr>
<td>4</td>
<td>Profondeville</td>
<td>Jaden</td>
</tr>
<tr>
<td>5</td>
<td>Morvi</td>
<td>Barrett</td>
</tr>
</tbody>
</table>
<script src="js.js"></script>
<script>
var i = 0;
var myTimer = setInterval(function(){
SortTable(0);
i++;
if(i == 10){
clearInterval(myTimer);
console.log(i);
} },500);
</script>
</body>
</html>
Appendix B - JavaScript-applikation. Js.js
// initial column must be pre-sorted var previousColumnIndex = 0;
// Get the data of selected column
var originalColumnArray = new Array();
for (var i=0; i < tableRows.length; i++) {
// User clicked on the same column again, reverse sort direction.
originalColumnArray.reverse();
} else {
// Select sorting method depending on column type if (selectedColumnIndex == 2)
// Create a new tbody and copy old rows using the sorted index var sortedTableBody = document.createElement("tbody");
for (var i=0; i < originalColumnArray.length; i++) {
sortedTableBody.appendChild(tableRows [originalColumnArray[i].oldIndex].
cloneNode(true));
}
IV // Replace old table with new one
table.replaceChild(sortedTableBody, tableBody);
var endTime = performance.now();
console.log(endTime - startTime);
}
function Compare(x, y) {
var xValue = x.value;
var yValue = y.value;
return (xValue == yValue ? 0 : (xValue > yValue ? 1 : -1));
}
function CompareDigits(x, y) {
var xValue = parseInt(x.value);
var yValue = parseInt(y.value);
return (xValue - yValue);
}
Appendix C - Angular-applikation. htmlPage1.html
<table class="table table-bordered table-striped">
<tr>
<th>
<button id="myCheck" ng-click="order('id')">id</button>
<span class="sortorder" show="predicate === 'id'" ng-class="{reverse:reverse}"></span>
</th>
<th>
<button ng-click="order('city')">city </button>
<span class="sortorder" show="predicate === 'city'" ng-class="{reverse:reverse}"></span>
</th>
<th>
<button ng-click="order('name')">name</button>
<span class="sortorder" show="predicate === 'name'" ng-class="{reverse:reverse}"></span>
</th>
<!--<th>
<button >country</button>
<span class="sortorder" show="predicate === 'country'" ng-class="{reverse:reverse}"></span>
</th>
<th>
<button >comment </button>
<span class="sortorder" show="predicate === 'comment'" ng-class="{reverse:reverse}"></span>
</th>
<th>
<button >company</button>
<span class="sortorder" show="predicate === 'company'" ng-class="{reverse:reverse}"></span>
</th>-->
</tr>
<tr ng-repeat="data in tableData">
VI <td>{{data.id}}</td>
<td>{{data.city}}</td>
<td>{{data.name}}</td>
<!--<td>{{data.country}}</td>
<td>{{data.comment}}</td>
<td>{{data.company}}</td>-->
</tr>
</table>
</div>
<script>
var i = 0;
var myTimer = setInterval(function(){
document.getElementById("myCheck").click();
i++;
if(i == 10){
clearInterval(myTimer);
} },500);
</script>
</body>
</html>
Appendix D - Angular-applikation. Script.js
(Backbone.js 1.3.3)
angular.module('sortApp', [])
.controller('mainController', function($scope, $filter) {
// Intercept filter routine, define manually var orderBy = $filter('orderBy');
// Order function
$scope.order = function(predicate) { var start = performance.now();
$scope.predicate = predicate;
$scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;
$scope.tableData = orderBy($scope.tableData, predicate, $scope.reverse);
var end = performance.now();
var execTime = end - start;
console.log(execTime);
"city": "Tsiigehtchic", "name": "Walker"
VIII },
{
"id": 5,
"city": "Machalí", "name": "Octavius"
} ];
})
Appendix E - Backbone-applikation. Index.html
<style>
#movies th { white-space: nowrap; cursor: pointer; }
#movies th span { display: inline-block; margin-left: 5px; }
#movies [column="id"] { width: 50px; }
#movies [column="city"] { width: 35%; }
#movies [column="name"] { width: 80px; }
#movies [column="country"] { width: 100px; }
#movies [column="comment"] { width: 80px; }
#movies [column="company"] { width: 80px; } .icon-none { visibility: hidden; }
</style>
<script id="movie-table" type="text/template">
<thead>
<tr>
<th column="id" ><div id="myCheck">id</div></th>
<th column="city"><div>city</div></th>
<th column="name"><div>name</div></th>
<th column="country"><div>country</div></th>
<th column="comment"><div>comment</div></th>
<th column="company"><div>comment</div></th>
</tr>
<td><div><%= id %></div></td>
<td><div><%= city %></div></td>
<td><div><%= name %></div></td>
<td><div><%= country %></div></td>
<td><div><%= comment %></div></td>
<td><div><%= company %></div></td>
</script>
X sortAttribute: "id", sortDirection: 1,
sortUpIcon: 'ui-icon-triangle-1-n', sortDnIcon: 'ui-icon-triangle-1-s', events: {
"click th": "headerClick"
},
initialize: function() {
this.template = _.template( $('#movie-table').html() );
this.listenTo(this.collection, "sort", this.updateTable);
},
.end()
$el.closest('thead').find('span').attr('class', 'ui-icon icon-none');
if (this.collection.sortDirection == 1) {
$el.find('span').removeClass('icon-none').addClass(this.sortUpIcon);
} else {
$el.find('span').removeClass('icon-none').addClass(this.sortDnIcon);
}
this.collection.sortMovies(ns);
var endTime = performance.now();
_.invoke(this._movieRowViews, 'remove');
$table = this.$('tbody');
this._movieRowViews = this.collection.map(
function ( obj ) {
XII
this.$el.html( this.template( this.model.toJSON()) );
return this;
} });
</script>
<div class="wrapper"></div>
<script>
$(function() {
var movieList = new Movies(movieData);
var movieView = new MovieTable({ collection: movieList });
$('.wrapper').html( movieView.render().$el.attr('id', 'movies') );
});
</script>
<script>
var startTime2 = performance.now();
var i = 0;
var myTimer = setInterval(function(){
document.getElementById("myCheck").click();
i++;
if(i == 10){
clearInterval(myTimer);
var endTime2 = performance.now();
console.log(endTime2 - startTime2 + " total time (milliseconds)");
} }, 700);
</script>
Appendix F - Backbone-applikation. Moivedata.js
var movieData = [
{"id": 1, "city": "O'Higgins", "name": "Clayton", "country": "Mongolia", "comment":
"elementum purus, accumsan", "company": "Neque Venenatis Associates"},
{"id": 2, "city": "Edinburgh", "name": "Patience", "country": "Saint Vincent and The Grenadines", "comment": "viverra. Maecenas iaculis", "company": "Purus Ac Tellus Inc."}, {"id": 3, "city": "Glabais", "name": "Maya", "country": "Korea, South", "comment":
"nonummy ac, feugiat", "company": "Mauris Institute"},
{"id": 4, "city": "Coldstream", "name": "Armand", "country": "Anguilla", "comment":
"urna convallis erat,", "company": "Odio Sagittis Semper LLP"},
{"id": 5, "city": "Völkermarkt", "name": "Dora", "country": "New Zealand", "comment":
"rutrum urna, nec", "company": "Odio LLP"},
{"id": 6, "city": "Gresham", "name": "Herman", "country": "Barbados", "comment": "nunc est, mollis", "company": "Suspendisse Aliquet Sem Foundation"},
{"id": 7, "city": "Neubrandenburg", "name": "Deirdre", "country": "Namibia", "comment":
"Nunc ac sem", "company": "Odio Incorporated"},
{"id": 8, "city": "Fahler", "name": "Peter", "country": "Brazil", "comment": "Aenean massa.
Integer", "company": "Molestie Tellus Limited"},
{"id": 9, "city": "San Marcello Pistoiese", "name": "Marcia", "country": "Liechtenstein",
"comment": "sem mollis dui,", "company": "Sed Institute"},
{"id": 10, "city": "Olathe", "name": "Regan", "country": "Lebanon", "comment": "elit sed consequat", "company": "Orci Lobortis Augue LLP"},
];