1. Vergelijkende studie van
raamwerken voor de
ontwikkeling van mobiele
HTML5 applicaties
Tim Ameye Sander Van Loock
26 maart 2013

2. Inhoud
● Inleiding
● Vergelijkingscriteria
● Raamwerken
● Evaluatie
● Slot

3. Inleiding

4. Doel
Vergelijkende studie van
raamwerken voor de ontwikkeling van
mobiele HTML5 applicaties

5. Doel
Vergelijkende studie van
raamwerken voor de ontwikkeling van
mobiele HTML5 applicaties
Productiviteit
Performantie Gebruik
Omkadering Ondersteuning

6. Doel
Vergelijkende studie van
raamwerken voor de ontwikkeling van
mobiele HTML5 applicaties

7. Doel
Vergelijkende studie van
raamwerken voor de ontwikkeling van
mobiele HTML5 applicaties

8. Doel
Vergelijkende studie van
raamwerken voor de ontwikkeling van
mobiele HTML5 applicaties

9. Vergelijkingscriteria
● Omkadering
● Productiviteit
● Gebruik
● Ondersteuning
● Performantie

10. Omkadering

11. Productiviteit
● tijd opmeten
○ implementatie POC
○ implementatie loginscherm
● vermelden tools, achtergrond, ...

12. Gebruik
● uitdagingen met score
○ 2: ondersteund door raamwerk
○ 1: ondersteund via plugin
○ 0: niet ondersteund
Forms (C1,C2,C3,C4,C5)
C1: Create forms with placeholders, but without labels.
C2: Use the text, number and email as form types.
C3: Custom datepicker with data range.
C4: Custom datepicker only with month and year.
C5: Clearing the form.

13. Ondersteuning
● uitdagingen testen op toestellen HCI
○ HTCDesireZ - Android 2.3.3
○ GalaxyTab - Android 2.3.6
○ Galaxy Gio - Android 2.3.6
○ GalaxySII - Android 4.1.2
○ Nexus 7 - Android 4.2.1
○ iPad3 4GWiFi - iOS 6.0.1
○ iPhone 3GS - iOS 6.0.1
○ iPhone 3GS - iOS 6.0.1
● native look-and-feel van webapplicatie

14. Performantie
● Google PageSpeed
● Dummy page met UI elementen
● AJAX request
● Loginschermen

15. Raamwerken
● jQuery Mobile
● Sencha Touch
● Lungo
● Kendo UI

16. 2012 versie 1.2
2013 versie 1.3
● Autocomplete is nu standaard aanwezig
● Input file veld heeft layout
● Splitview
● Handtekening
● Opslaan expense op backend
● Offline maken

17. ● Demo

18. ● Nieuwe update file upload plugin [Smirnov]
● Sencha Cmd voor bouwen applicatie
○ Minify JavaScript
○ Manifest voor local storage
[Smirnov] Constantine V. Smirnov. File-uploading-component-for-Sencha-Touch.
https://github.com/kostysh/File-uploading-component-for-Sencha-Touch, 2012.

19. ● Demo

20. ● Markup gedreven
● Gebouwd op QuoJS
● Gemaakt door Tapquo
● GPLv3 en commercieel
2011 versie 1.0
nu versie 2.1

21. ● Core
● Data
● DOM
● Element
● Notification
● Router
● Service
● View

22. ● Product van Telerik
● Hoog kostenplaatje
○ $ 699 Kendo UI Complete (per ontwikkelaar)
○ $ 999 Kendo UI Complete met server side wrappers
● Versie 2013 Q1

24. ● Mark-up & JavaScript gedreven
● Steunt op de jQuery bibliotheek
● MVVM architectuur (cfr. Sencha Touch MVC architectuur)

25. Evaluatie
● Gemeenschap
● Productiviteit
● Gebruik

26. Evaluatie - Gemeenschap
● Sociale netwerken
● GitHub ?
● Up-to-date informatie ophalen?

27. Evaluatie - Productiviteit
● Implementatie POC in nieuwe raamwerken bezig
● Loginschermen jQM en ST klaar
● Alles te vinden op tinyurl.com/htmobiel

28. Evaluatie - Gebruik
Formulier vullen:
jQuery Mobile Sencha Touch
Vul velden met data Zelf te MVC ondersteuning
programmeren
Maak velden read- Elementen uit select read-only
only veld verwijderen eigenschap
Score 0+0=0 2+2=4

29. Evaluatie - Gebruik
Handtekening:
jQuery Mobile Sencha Touch
Handtekening Plugin [Bradley] Plugin [SimFla]
Score 1 1
[Bradley] Thomas Bradley. Signature Pad. http://thomasjbradley.ca/lab/signature-pad/. [Online;
accessed 22/02/2013]
[SimFla] SimFla. SimFla-signaturePad. https://github.com/SimFla/SimFla-signaturePad, 2011.

30. Evaluatie - Gebruik
Layout aanpassen aan toestel:
jQuery Mobile Sencha Touch
Toestel herkennen CSS3 Media query Methoden voor
herkenning
Split view CSS3 Media query vbox layout
Smartphone menu Klikbare subheader extra knop
Score 1+1+1=3 2+2+0=4

31. Slot
● Status
● Planning
● Statistieken

32. Status november 2012
● afgerond
○ gedeeltelijke implementatie POC (jQM & ST)
○ hoofdstuk 1
● werkpunt
○ vergelijkingscriteria

33. Huidige status
● afgerond
○ volledige implementatie POC (jQM & ST)
○ vergelijkingscriteria
○ draft paper
○ thesisstructuur

34. Planning
● nu - week 15/4
○ afwerken login
○ afwerken POC
○ afwerken hoofdstukken 1-3
● week 22/4
○ vergelijking uitvoeren (performantie, ondersteuning)
○ spiderweb maken
● week 27/4 - 17/5
○ poster
○ hoofdstukken 4-5
○ herschrijven artikel

35. Statistieken
Tim Ameye Sander Van Loock
Blogposts 11 8
Comments 23 25
Tweets 64 44
Uren totaal 386 425
- lezen 75 85,5
- schrijven 72 64,5
- social network activities 30 12,5
- meetings 53 46
- reflectie 11 6
- ontwerp 2,5 1
- implementatie 118,5 192
- evaluatie 1 0
- presentatie 23 14,5
Score: 14/20