1. Vergelijkende studie van
frameworks voor de
ontwikkeling van mobiele
HTML5 applicaties
Tim Ameye Sander Van Loock
29 november 2012

2. Inhoud
● Inleiding
● jQuery Mobile
● Sencha Touch
● Tot slot

3. Inleiding
● Situering en doelstelling
● Vergelijken van frameworks

4. Situering en doelstelling

5. Vergelijken van frameworks
● ISO 25010 (vergelijken van software)
● Bestaande Use Cases
○ Codefessions (score voor vergelijkingscriteria)
■ native experience
■ performance
■ cross-platform capabilities
■ features
■ ease of use
■ code efficiency
■ licences
■ community en extensibility
○ jQuery UI vs Kendo UI (vergelijkingstabel)
● Vergelijkingstabellen

6. jQuery Mobile
● Inleiding
● UI
● Backend
● Demo

7. Inleiding
● Mark-up gedreven
● Gebouwd op jQuery
● Smartphone, tablet en desktop
● Browsers
○ Mobile Graded Browser Support
○ Progressive enhancement
2010 start
2011 versie 1.0
nu versie 1.2.0

8. Inleiding
● Benodigde tools
○ Teksteditor, IDE, ...
○ Browser met developer tools
● Aangeboden tools
○ ThemeRoller
○ Codiqa
● Documentatie
○ http://jquerymobile.com/demos/1.2.0/

9. UI: Geleverd werk
● Maand/jaar
● Alleen lezen
● Nummer
● Selectiemenu
● E-mail
● Validatie

10. UI: Geleverd werk
● Tabbar
● Datepicker
● Automatisch aanvullen
● Radio buttons
● Nummer
● Textarea
● Validatie

11. UI: Geleverd werk
● Textarea
● Flip toggle switch
● Groene knop

12. UI: Belangrijkste problemen
● Splitview
● Formuliervalidatie
● Kalender maand/jaar
HTML5 formuliervalidatie
caniuse.com 28/11/2012
● Native datepicker (+ placeholder)
● Projectcode suggesties
● Handtekening
● (Dialoogvenster)
HTML5 date/time
caniuse.com 28/11/2012

13. Backend: Geleverd werk
● UserService
○ login
○ logout
○ getEmployee
● ExpenseService
○ getProjectCodeSuggestion
○ saveExpense
○ getExpenseFormPDF
○ getExpenseForms

14. Backend: Belangrijkste problemen
● AJAX wordt geïmplementeerd met XMLHttpRequest
(XHR) en is gebonden aan zelfde domein
● parseJSON en parseXML parsen enkel geldige
formaten

15. Demo

16. Sencha Touch
● Inleiding
● UI
● Backend
● Demo

17. Inleiding
● JavaScript gedreven
● WebKit browser engine ondersteuning
● MVC ondersteuning

18. Geleverd werk (ontwikkeling)
Ontwikkeling in Sencha Architect
Nu, Eclipse
Logboek

19. UI: Geleverd werk
● Vbox layout
● Geen 'Home' scherm
● Toolbar titel

20. UI: Geleverd werk
● Navigationview
● Sorteren op datum

21. UI: Geleverd werk
● Layout formulier
● Datepicker

22. UI: Geleverd werk
● Toggleveld

23. UI: Belangrijkste problemen
● Lijst met vaste elementen
● Afgekorte titel
● Handtekening
● Mapping Sencha Touch / Sencha Architect

24. Backend: Geleverd werk
● UserService
○ login
○ logout
○ getEmployee
● ExpenseService
○ getProjectCodeSuggestion
○ saveExpense
○ getExpenseFormPDF
○ getExpenseForms

25. Backend: Belangrijkste problemen
● Cross-domain requests
○ Cross-domain POST request met parameters
○ OPTIONS request als preflight
● Verschil AJAXReader >< AJAXRequest
● Parameters doorgeven
● Debuggen met Sencha Touch

26. Demo

27. Tot slot
● Onduidelijkheden
● To do
● Planning

28. Onduidelijkheden
● Currency conversie cross-domein
● Units dropdown list
● Aanpassen jaar bij infoveld
● Hergebruik formulier read-only/write of nieuwe pagina
● Abroad/Domestic expense als 2 verschillende pagina's
● Weglaten Home
● Uitklapbaar menu voor smartphone

29. To do
● Volledig implementeren van POC
● Toevoegen features aan POC
● Andere frameworks
○ The-M-Project
○ Kendo UI Mobile
○ ...

30. Planning
● nu - dec: volledig implementatie POC
● jan - feb: implementatie in twee andere frameworks
● 28 feb: draft wetenschappelijk artikel
● maart-april: evaluatie frameworks, schrijven thesistekst
● 17 mei: indienen draft thesistekst