Inhoudstafel en thesistitel

Hieronder kan je de inhoudstafel van onze thesistekst vinden. Momenteel zijn we hoofdstuk 2 (literatuurstudie) aan het herschrijven en hoofdstuk 3 (raamwerken) en 4 (vergelijking) aan het aanvullen. We hopen een draft van deze 3 hoofdstukken aan het einde van deze week naar onze begeleider en Capgemini te kunnen doorsturen.

  • Voorwoord
  • Samenvatting
  • Lijst van figuren
  • Lijst van tabellen
  • Lijst van afkortingen
  • 1 Inleiding
  • 2 Literatuurstudie
    • 2.1 Mobiele apparaten
    • 2.2 Mobiele besturingssystemen
    • 2.3 Mobiele applicaties
    • 2.4 Mobiele webbrowsers
    • 2.5 HTML5, CSS3 en JavaScript
    • 2.6 Mobiele HTML5 raamwerken
    • 2.7 Vergelijken van raamwerken
  • 3 Mobiele HTML5 raamwerken
    • 3.1 jQuery Mobile
    • 3.2 Sencha Touch
    • 3.3 Kendo UI
    • 3.4 Lungo
    • 3.5 Overzicht
  • 4 Vergelijking
    • 4.1 POC
    • 4.2 Vergelijkingscriteria
  • 5 Evaluatie
    • 5.1 Omkadering
    • 5.2 Productiviteit
    • 5.3 Gebruik
    • 5.4 Ondersteuning
    • 5.5 Performantie
  • 6 Besluit
  • Bibliografie

Onze thesistitel is ook gefinaliseerd.
Nederlands:

Vergelijkende studie van raamwerken voor de ontwikkeling van mobiele HTML5-applicaties

Engels:

Comparative study of frameworks for the development of mobile HTML5 applications

Update

Na het indienen van onze wetenschappelijke paper, is het hier een tijdje stil geweest maar hebben we evenmin stil gezeten.

Momenteel zijn we bezig met de implementatie van onze POC in het tweede framework.  Na een jQuery Mobile implementatie waagt Tim zich nu aan Lungo JS.  Sander stapte over van Sencha Touch naar Kendo UI.  Al ons work in progress kan gevonden worden op tinyurl.com/htmobiel.  We verwachten al het implementeerwerk na de paasvakantie af te ronden.

Ook zijn we reeds aan de vergelijkende studie bezig.  Om de productiviteit van het raamwerk te testen implementeren we ook het loginscherm van de POC in de andere bestudeerd raamwerk.  Sander zal dus een jQuery Mobile en Lungo JS login maken,  Tim een Sencha Touch en Kendo UI login.  Ook deze resultaten zijn te vinden op  tinyurl.com/htmobiel.

Verder zijn we ook bezig om de feedback op onze paper te verwerken en onze paper te herschrijven.  Sommige inhoud staat nu ook al samengevat in de paper en moet nog vertaald en herschreven worden in onze thesis tekst.
De structuur van deze thesis tekst ligt wel al vast en is gecorrigeerd door onze begeleider.  Op aangeven van onze begeleider willen we voor de officiële deadline (17 mei) afzonderlijke hoofdstukken ter correctie doorsturen.  Hierbij hoort zeker onze herwerkte literatuurstudie,  het vergelijkingshoofdstuk en het hoofdstuk over de gekozen mobiele HTML5 raamwerken.

Ten slotte denken we ook aan onze presentaties van volgende week.  Eentje op dinsdag 26 maart om 11u met de HCI groep als publiek en eentje donderdag 28 maart in het bijzijn van Capgemini.

Tim zal deze week niet aan de thesis kunnen werken omdat hij op Athens cursus is.

Vergelijkingscriteria

De titel van onze thesis bestaat uit twee delen: ‘Comparative study of frameworks’ en ‘for the development of mobile HTML5 applications’. Aan beide moet evenveel aandacht worden besteed, dus concentreerden we ons nu eens op het eerste deel: hoe gaan we de mobiele HTML5 raamwerken vergelijken.

Na veel opzoekwerk en lange discussies hebben we samen beslist aan welke criteria we het best de raamwerken onderwerpen om een zo goed mogelijke vergelijking te maken. We bedachten 5 categorieën: gemeenschap, productiviteit, gebruik, ondersteuning en performantie. Elk raamwerk krijgt voor elke criteria een score. Als besluit zullen we een ‘spiderweb’ van de criteria creëren waar de scores van de raamwerken opstaan. Hoe we deze criteria exact zullen onderzoeken wordt in onderstaande secties uitgelegd.

Echter, alle verschillen tussen de raamwerken zijn niet volledig in deze 5 criteria onder te brengen. Sommige eigenschappen van het raamwerk staan reeds in onze literatuurstudie vermeld. We hebben besloten om deze informatie niet te dupliceren in deze sectie. Deze criteria bevatten:

  • Het bedrijf dat het raamwerk aanbiedt
  • De marktadoptatie van het raamwerk (belangrijkste klanten)
  • De licenties en kosten die samen gaan bij het gebruik van het raamwerk
  • Betalende probleemoplossingen (professionele ondersteuning)
  • De laatste nieuwe versie van het raamwerk
  • De documentatie, handleidingen en voorbeelden die voorhanden zijn
  • Bibliotheken waar het raamwerk op steunt
  • De tools die de programmeur kan gebruiken om sneller te ontwikkelen

Wel zullen we proberen één grote vergelijkingstabel te maken als appendix die alle verschillen, dus ook de hier voornoemde, zal bevatten.

Gemeenschap

De gemeenschap en populariteit van een raamwerk is makkelijk in cijfers uit te drukken. We voorzien een tabel waar we per raamwerk het aantal volgers op Twitter, watchers/forkers van GitHub en aantal likes van Facebook zullen onderbrengen [1;2]. Een grafiek van Google Trends, die het zoekvolume op Google uitzet per tijd, zal voor elk raamwerk na deze tabel worden toegevoegd.
De som van volgers, watchers en likes vormt de score voor het gemeenschapscriteria.

Productiviteit

De productiviteit moet een indicatie geven hoe lang het duurt om met het raamwerk vertrouwd te raken. Hiervoor gaan we het feit uitbuiten dat we deze thesis met twee maken. Elk zullen we de proof-of-concept (POC) in twee verschillende raamwerken maken wat het totaal op 4 raamwerken brengt. De tijd die nodig is om de volledige POC te implementeren is een indicatie voor de productiviteit. Ook zal elk van ons een loginscherm maken in de andere twee raamwerken [3]. Als Tim de POC implementeert in raamwerken A en B en Sander in raamwerken C en D, zal dus Tim ook een loginscherm maken in raamwerken C en D en vice versa.  Dit scherm bevat UI-elementen, validaties en backend integratie. We kunnen dit dus als voldoende steekproef beschouwen om ervaring met een raamwerk te testen. De tijd die ieder nodig heeft om dit scherm te bouwen, geeft ook een indicatie van de nodige leertijd.
De som van de uren voor het implementeren van de POC en het loginscherm vormt de score voor de productiviteit.

Gebruik

Om het verschil in gebruik van de raamwerken te onderzoeken, zullen we steunen op de logboeken die we hebben bijgehouden tijdens het implementeren van de POC. We gaan er vanuit dat de POC relevante kenmerken bevat om de raamwerken zoveel mogelijk uit te buiten. We zullen bij het vergelijken de moeilijkheden groeperen zodat het snel duidelijk wordt welke functionaliteit in een bepaald raamwerk moeilijker/makkelijker te implementeren is. Een hogere score wordt toegekend wanneer bepaalde functionaliteit reeds aangeboden wordt door het raamwerk. Een lagere score betekent dat een plugin werd gezocht. Wanneer een hack noodzakelijk was om de functionaliteit te beogen, zal de laagste score worden toegekend.

Ondersteuning

We zullen een scenario uitwerken waarbij we het gebruik van de POC doorlopen. Dit scenario zullen we op een reeks van verschillende mobiele apparaten herhalen [1]. Bij het mislukken van een stap in het scenario, zal een punt worden afgetrokken. Hierdoor kunnen we een score bekomen hoe goed de applicatie, geïmplementeerd in een bepaald raamwerk, scoort op een bepaald apparaat. De gebruikte apparaten en versies van besturingssystemen en browsers zullen worden bepaald aan de hand van de marktaandeel en de beschikbaarheid van deze apparaten aan het departement HCI.
Een kanttekening hierbij is of het raamwerk ondersteunt de webapplicatie om te vormen tot een native applicatie. Ook bekijken we of de native look-and-feel per besturingssysteem door het raamwerk kan worden benaderd.

Performantie

Een laatste criterium is de performantie. Dit zal worden uitgedrukt in de tijd nodig om te applicatie te renderen. Hierbij zullen we verschillende testen doen. Ten eerste zullen we gebruik maken van de volledige POC. We zullen kijken naar de rendertijd van de applicatie aan de hand van Google Page Speed [4]. Daarnaast zullen we een geïsoleerde test doen met het verzenden van een AJAX request, omdat sommige raamwerken altijd eerst een OPTION request sturen. Verdergaand op het versturen van requests zullen we kijken hoe lang het duurt vooraleer een expense daadwerkelijk verzonden is naar de backend. Vervolgens zullen we ook geïsoleerde testen doen met UI-elementen. Hierbij zullen we een pagina voorzien van 1000 buttons en meten hoe lang het duurt tot deze pagina gerendert wordt. Als laatste zullen we een test op de aparte loginschermen uitvoeren. Hier kunnen we dan ook het aantal lijnen code bekijken en de bijhorende performantie. De redenen waarom we ook deze geïsoleerde applicatie gebruiken is omdat we ervan uitgaan dat niet de volledige POC in ieder raamwerk zal kunnen worden geïmplementeerd. Dit is in tegenstelling tot de geïsoleerde login applicatie, waarbij we exact kunnen vergelijken.

—–

Referenties

[1] Sarrafi, A. (2012). Mobile JavaScript frameworks, Evaluation and Comparison. Codefessions. Retrieved February 19, 2013, from http://www.codefessions.com/2012/04/mobile-javascript-frameworks-evaluation.html

[2]Ayuso, A. (2012). Mobile Frameworks Comparison. Monocaffe. Retrieved February 19, 2013, from http://monocaffe.blogspot.be/2012/06/mobile-frameworks-comparison.html

[3]Burris, C. (2012). Sencha Touch vs. JQuery Mobile Cage-Fight REMATCH ! Retrieved February 19, 2013, from http://stvjqm.mobivant.com/presentations/svj/

[4] Morgan, J. (2011). How to Measure Website Performance with Three Free Tools. Retrieved February 19, 2013, from http://usabilityetc.com/2011/08/measure-website-performance-with-free-tools/