To-Do with JavaScript MV* : A study into the differences between Backbone.js and AngularJS
Runeberg, Joakim (2013)
Runeberg, Joakim
Arcada - Nylands svenska yrkeshögskola
2013
All rights reserved
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:amk-201305076801
https://urn.fi/URN:NBN:fi:amk-201305076801
Tiivistelmä
Arbetet undersöker skillnader mellan de två mest populära JavaScript ramverken: An-gularJS och Backbone.js. Målet med undersökningen är att se ifall det ena gränssnittet är att föredra over det andra, och vilka arkitektoniska skillnader det finns emellan de två gränssnitten. Det här sker genom att använda det öppna projektet TodoMVC, med HTML5s localStorage för att lagra information. I samband med undersökningen utveck-lades automatiserade test med hjälp av PhantomJS, ett JavaScript gränssnitt ämnat för automatisering av test. Med hjälp av dessa test jämfördes prestandan mellan de två, till synes identiska applikationerna i en omgivning baserad på WebKit. Undersökningen visade att Backbone.js är bättre än AngularJS på att hantera stora mängder av samtidig data. Jämförelser i hur mycket kod som krävs för att uträtta samma funktionalitet fick AngularJS att framstå som en segrare. De ”heap profiling” tests som genomfördes visade sig vara otillräckliga för att kunna användas i undersökningen eftersom skillnaderna i resultaten var för små för att vara signifikanta. Undersökningen visar att skillnaderna i prestanda mellan den två gränssnitten i en vardaglig applikation är så små att de kan förbises, och att de arkitektoniska skillnaderna, som t.ex. dubbelriktad bindning, HTML mallar och tillägg, spelar en mer betydande roll i valet av gränssnitt. The thesis investigates the differences between the two currently most popular JavaScript architectural frameworks: AngularJS and Backbone.js. The aim of the study is to see if one framework is to prefer over the other, and what the most notable architectural differences are. This is done through the use of the open-source application TodoMVC with HTML5 localStorage as a persistence layer. Tests were developed in PhantomJS to measure the DOM performance between two behaviourally identical applications in a WebKit environment. The tests showed that Backbone.js is better at handling big amounts of simultaneous data than AngularJS. Additional SLOC tests were performed to compare the amount of source-code required to build each application, with the clear winner being AngularJS. Heap Profiling tests to examine memory usage between the two frameworks proved to be an unsuccessful research method because of the minimal differences in the obtained data. The conclusion of the thesis is that the performance differences in a real world application are too small to be of much importance, and that the architectural differences such as two-way data binding, HTML templating and extensions play a more important role when deciding between the two frameworks.