際際滷

際際滷Share a Scribd company logo
Vergelijkende studie van
frameworks voor de
ontwikkeling van mobiele
HTML5 applicaties
Tim Ameye          Sander Van Loock

       22 november 2012
Inhoud
   Inleiding

   Literatuurstudie

   jQuery Mobile

   Sencha Touch

   Tot slot
Inleiding
    Omkadering
    Thesis met twee
    Capgemini
    Situering en doelstelling
Omkadering
   Promotor
      prof. dr. E. Duval



   Begeleiders
      Gonzalo Parra (KU Leuven)
      Jan Verhulst (Capgemini)
Thesis met twee
   zo weinig mogelijk overhead
   zo goed mogelijk van elkaar op de hoogte
   eerste meeting (15/10)

   interviews (23/10)
      developer
      architect
      sales



   proof on concept (25/10)
      mockup (4/11)
      backend (10/11)
POC: Expense application
Situering en doelstelling
Literatuurstudie
    Inleiding
    Problemen
    Soorten frameworks / soorten
     applicaties
    Vergelijken van frameworks
Literatuurstudie
            http://www.w3schools.com
            http://www.whatwg.org
           Levende standaard
            http://www.html5rocks.com
            http://html5guy.com
            http://html5doctor.com
HTML5
1.   Multimedia
2.   Offline en opslag
3.   Performantie en integratie
4.   Semantiek
5.   CSS3
6.   3D, grafieken en effecten
7.   Verbinding
8.   Toegang tot het apparaat
Problemen
   HTML5 draft versie
   Heterogene landschap
   Snelle ontwikkelingen
Browsersupport
Detectie
 Zelf opzoeken: http://mobilehtml5.org/
 Modernizr


Resolutie
Progressive enhancement       Graceful degradation
 Build to stable version       Fallback (Pollyfills)
                                Up to developer
Frameworks
Soorten applicaties
Assumpties POC
Device: Smartphone + Tablet
OS: Android + iOS
Framework: jQuery Mobile & Sencha Touch
Vergelijken van frameworks
   ISO 25010 (vergelijken van software)
   Bestaande Use Cases
       Codefessions (score voor verglijkingscriteria)
            native experience
            performance
            cross-platform capabilities
            features
            ease of use
            code efficiency
            licences
            community en extensibility
       jQuery UI vs Kendo UI (vergelijkingstabel)
   Vergelijkinstabellen
jQuery Mobile
   Inleiding
   Geleverd werk
   Belangrijkste moeilijkheden
   Demo
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
Inleiding
   benodigde tools
      text editor, IDE, ...
      browser met developer tools



   aangeboden tools
      ThemeRoller
      Codiqua



   documentatie
      http://jquerymobile.com/demos/1.2.0/
Geleverd werk
   implementeren smartphone versie POC
      UI
      functionaliteit met backend




   plugins gezocht voor
      formuliervalidatie
      projectcode suggesties


                                          HTML5 formuliervalidatie
   logboek                                    21/11/2012
Belangrijkste problemen
   AJAX wordt ge誰mplementeerd met XMLHttpRequest
    (XHR) en is gebonden aan same origin policy

   parseJSON en parseXML parsen enkel valid formaten

   splitview

   signature
Demo
Sencha Touch
   Inleiding
   Geleverd werk
   Belangrijkste moeilijkheden
   Demo
Inleiding
   Javascript gedreven
   WebKit browser engine onderdersteuning
   MVC support
Geleverd werk
Ontwikkeling in Sencha Architect
Vervangen door IDE

   Views en Models klaar
      vbox
      sorters
      validaties
   Controllers voor data in/uit
Belangrijkste moeilijkheden
   Cross-domain requests (backend)
       Cross-domain POST request met parameters
       OPTIONS request als preflight
   Syntax en knopjes Sencha Touch / Architect
       Documentatie niet up-to-date
   Debuggen met Sencha Touch
Demo
Tot slot
   To do
   Planning
   Statistieken
To do
   volledig implementeren van POC

   toevoegen features aan POC

   andere frameworks
      The-M-Project
      Kendo UI Mobile
      ...
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
Statistieken
                              Tim Ameye   Sander Van Loock

Blogposts                     5           4
Comments                      16          11
Tweets                        45          28

Uren totaal                   160,5       158,8

- lezen                       56          77,5
- schrijven                   25          20
- social network activities   12,5        7,5
- meetings                    29          23,5
- reflectie                   3,5         0
- ontwerp                     1,5         0
- implementatie               23,5        30
- evaluatie                   0,5         0
- presentatie                 9           5




Score: 14/20
Tussentijdse presentatie 22/11/2012

More Related Content

Viewers also liked (14)

Manual bsic per utilitzar el nostre espai wiki
Manual bsic per utilitzar el nostre espai wikiManual bsic per utilitzar el nostre espai wiki
Manual bsic per utilitzar el nostre espai wiki
edu
Important role of e agriculture by Allah Dad Khan
Important  role of e  agriculture by Allah Dad Khan Important  role of e  agriculture by Allah Dad Khan
Important role of e agriculture by Allah Dad Khan
Mr.Allah Dad Khan
Egypt Strategy Support Program: Institutions and social inclusion
Egypt Strategy Support Program: Institutions and social inclusionEgypt Strategy Support Program: Institutions and social inclusion
Egypt Strategy Support Program: Institutions and social inclusion
International Food Policy Research Institute (IFPRI)
What's measured, matters: Lessons from the WEAI - GAAP2 Inception Workshop
What's measured, matters: Lessons from the WEAI - GAAP2 Inception WorkshopWhat's measured, matters: Lessons from the WEAI - GAAP2 Inception Workshop
What's measured, matters: Lessons from the WEAI - GAAP2 Inception Workshop
IFPRI Gender
20150912 windows 10 tips tricks
20150912 windows 10  tips  tricks20150912 windows 10  tips  tricks
20150912 windows 10 tips tricks
Company_Profile_V4
Company_Profile_V4Company_Profile_V4
Company_Profile_V4
Rania Mohamed
Oracle Storage Innovation and cost cutting bundle
Oracle Storage  Innovation and cost cutting bundleOracle Storage  Innovation and cost cutting bundle
Oracle Storage Innovation and cost cutting bundle
ORACLE USER GROUP ESTONIA
Identifying gender issues in your research
Identifying gender issues in your researchIdentifying gender issues in your research
Identifying gender issues in your research
IFPRI Gender
隆劉留 了侶
隆劉留 了侶隆劉留 了侶
隆劉留 了侶
Michalis Kapetanis
Clampett Personality Assessment DISC
Clampett Personality Assessment DISCClampett Personality Assessment DISC
Clampett Personality Assessment DISC
Michael Clampett
Seminar on Hololens
Seminar on HololensSeminar on Hololens
Seminar on Hololens
Uma Sankar Nayak
僚凌厦硫侶粒溜留
僚凌厦硫侶粒溜留僚凌厦硫侶粒溜留
僚凌厦硫侶粒溜留
atavar
Manual bsic per utilitzar el nostre espai wiki
Manual bsic per utilitzar el nostre espai wikiManual bsic per utilitzar el nostre espai wiki
Manual bsic per utilitzar el nostre espai wiki
edu
Important role of e agriculture by Allah Dad Khan
Important  role of e  agriculture by Allah Dad Khan Important  role of e  agriculture by Allah Dad Khan
Important role of e agriculture by Allah Dad Khan
Mr.Allah Dad Khan
What's measured, matters: Lessons from the WEAI - GAAP2 Inception Workshop
What's measured, matters: Lessons from the WEAI - GAAP2 Inception WorkshopWhat's measured, matters: Lessons from the WEAI - GAAP2 Inception Workshop
What's measured, matters: Lessons from the WEAI - GAAP2 Inception Workshop
IFPRI Gender
20150912 windows 10 tips tricks
20150912 windows 10  tips  tricks20150912 windows 10  tips  tricks
20150912 windows 10 tips tricks
Company_Profile_V4
Company_Profile_V4Company_Profile_V4
Company_Profile_V4
Rania Mohamed
Oracle Storage Innovation and cost cutting bundle
Oracle Storage  Innovation and cost cutting bundleOracle Storage  Innovation and cost cutting bundle
Oracle Storage Innovation and cost cutting bundle
ORACLE USER GROUP ESTONIA
Identifying gender issues in your research
Identifying gender issues in your researchIdentifying gender issues in your research
Identifying gender issues in your research
IFPRI Gender
Clampett Personality Assessment DISC
Clampett Personality Assessment DISCClampett Personality Assessment DISC
Clampett Personality Assessment DISC
Michael Clampett
僚凌厦硫侶粒溜留
僚凌厦硫侶粒溜留僚凌厦硫侶粒溜留
僚凌厦硫侶粒溜留
atavar

Similar to Tussentijdse presentatie 22/11/2012 (20)

Meetup ASP.NET 5 19/11/2015
Meetup ASP.NET 5 19/11/2015Meetup ASP.NET 5 19/11/2015
Meetup ASP.NET 5 19/11/2015
Digipolis Antwerpen
Workshop Online en social media projectmanagement seminar 1403 - handout
Workshop Online en social media projectmanagement   seminar 1403 - handoutWorkshop Online en social media projectmanagement   seminar 1403 - handout
Workshop Online en social media projectmanagement seminar 1403 - handout
TRAININGONLINEMARKETING
Webinar programmeren c# java php python c++ r nodejs
Webinar programmeren c# java php python c++ r  nodejsWebinar programmeren c# java php python c++ r  nodejs
Webinar programmeren c# java php python c++ r nodejs
Eduvision Opleidingen
Infomoment tetra html5
Infomoment tetra html5Infomoment tetra html5
Infomoment tetra html5
psimoens
際際滷s webinar werken in de IT
際際滷s webinar werken in de IT際際滷s webinar werken in de IT
際際滷s webinar werken in de IT
Eduvision Opleidingen
Ontwikkelen van online platformen met Drupal 8
Ontwikkelen van online platformen met Drupal 8Ontwikkelen van online platformen met Drupal 8
Ontwikkelen van online platformen met Drupal 8
Raymond Muilwijk
Front end development - Les 01
Front end development - Les 01Front end development - Les 01
Front end development - Les 01
Atticus
Webinar python datascience
Webinar python datascienceWebinar python datascience
Webinar python datascience
Eduvision Opleidingen
EMS Ehsal - production in a digital world 2013
EMS Ehsal - production in a digital world 2013EMS Ehsal - production in a digital world 2013
EMS Ehsal - production in a digital world 2013
Hans Palmers
Bb Open Source S Mi
Bb Open Source S MiBb Open Source S Mi
Bb Open Source S Mi
Christiaan Lam
Moderne Software Engineering
Moderne Software EngineeringModerne Software Engineering
Moderne Software Engineering
guestf2fc08
Web applicatie van scratch
Web applicatie van scratchWeb applicatie van scratch
Web applicatie van scratch
Hanzehogeschool
RealDolmen @ Karel De Grote Hogeschool Antwerp about projects
RealDolmen @ Karel De Grote Hogeschool Antwerp about projectsRealDolmen @ Karel De Grote Hogeschool Antwerp about projects
RealDolmen @ Karel De Grote Hogeschool Antwerp about projects
Bart Keybergh
Kansen met workvoices!
Kansen met workvoices!Kansen met workvoices!
Kansen met workvoices!
WorkVoices
Mobpro - Uitschalen binnen de Ad-Tech wereld
Mobpro - Uitschalen binnen de Ad-Tech wereldMobpro - Uitschalen binnen de Ad-Tech wereld
Mobpro - Uitschalen binnen de Ad-Tech wereld
BigDataExpo
Creating sustainable solutions with SharePoint 2013 - Yuri Burger
Creating sustainable solutions with SharePoint 2013 - Yuri BurgerCreating sustainable solutions with SharePoint 2013 - Yuri Burger
Creating sustainable solutions with SharePoint 2013 - Yuri Burger
Delta-N
DSD-NL 2019 Het iMOD-X project - strategie en plannen - Icke
DSD-NL 2019 Het iMOD-X project - strategie en plannen - IckeDSD-NL 2019 Het iMOD-X project - strategie en plannen - Icke
DSD-NL 2019 Het iMOD-X project - strategie en plannen - Icke
Deltares
Hoe kies ik het juiste javascript front end framework?
Hoe kies ik het juiste javascript front end framework?Hoe kies ik het juiste javascript front end framework?
Hoe kies ik het juiste javascript front end framework?
Eduvision Opleidingen
Opensource als alternatief
Opensource als alternatiefOpensource als alternatief
Opensource als alternatief
Peter Langenberg
Sdb Presentatie
Sdb PresentatieSdb Presentatie
Sdb Presentatie
menfey
Workshop Online en social media projectmanagement seminar 1403 - handout
Workshop Online en social media projectmanagement   seminar 1403 - handoutWorkshop Online en social media projectmanagement   seminar 1403 - handout
Workshop Online en social media projectmanagement seminar 1403 - handout
TRAININGONLINEMARKETING
Webinar programmeren c# java php python c++ r nodejs
Webinar programmeren c# java php python c++ r  nodejsWebinar programmeren c# java php python c++ r  nodejs
Webinar programmeren c# java php python c++ r nodejs
Eduvision Opleidingen
Infomoment tetra html5
Infomoment tetra html5Infomoment tetra html5
Infomoment tetra html5
psimoens
際際滷s webinar werken in de IT
際際滷s webinar werken in de IT際際滷s webinar werken in de IT
際際滷s webinar werken in de IT
Eduvision Opleidingen
Ontwikkelen van online platformen met Drupal 8
Ontwikkelen van online platformen met Drupal 8Ontwikkelen van online platformen met Drupal 8
Ontwikkelen van online platformen met Drupal 8
Raymond Muilwijk
Front end development - Les 01
Front end development - Les 01Front end development - Les 01
Front end development - Les 01
Atticus
EMS Ehsal - production in a digital world 2013
EMS Ehsal - production in a digital world 2013EMS Ehsal - production in a digital world 2013
EMS Ehsal - production in a digital world 2013
Hans Palmers
Bb Open Source S Mi
Bb Open Source S MiBb Open Source S Mi
Bb Open Source S Mi
Christiaan Lam
Moderne Software Engineering
Moderne Software EngineeringModerne Software Engineering
Moderne Software Engineering
guestf2fc08
Web applicatie van scratch
Web applicatie van scratchWeb applicatie van scratch
Web applicatie van scratch
Hanzehogeschool
RealDolmen @ Karel De Grote Hogeschool Antwerp about projects
RealDolmen @ Karel De Grote Hogeschool Antwerp about projectsRealDolmen @ Karel De Grote Hogeschool Antwerp about projects
RealDolmen @ Karel De Grote Hogeschool Antwerp about projects
Bart Keybergh
Kansen met workvoices!
Kansen met workvoices!Kansen met workvoices!
Kansen met workvoices!
WorkVoices
Mobpro - Uitschalen binnen de Ad-Tech wereld
Mobpro - Uitschalen binnen de Ad-Tech wereldMobpro - Uitschalen binnen de Ad-Tech wereld
Mobpro - Uitschalen binnen de Ad-Tech wereld
BigDataExpo
Creating sustainable solutions with SharePoint 2013 - Yuri Burger
Creating sustainable solutions with SharePoint 2013 - Yuri BurgerCreating sustainable solutions with SharePoint 2013 - Yuri Burger
Creating sustainable solutions with SharePoint 2013 - Yuri Burger
Delta-N
DSD-NL 2019 Het iMOD-X project - strategie en plannen - Icke
DSD-NL 2019 Het iMOD-X project - strategie en plannen - IckeDSD-NL 2019 Het iMOD-X project - strategie en plannen - Icke
DSD-NL 2019 Het iMOD-X project - strategie en plannen - Icke
Deltares
Hoe kies ik het juiste javascript front end framework?
Hoe kies ik het juiste javascript front end framework?Hoe kies ik het juiste javascript front end framework?
Hoe kies ik het juiste javascript front end framework?
Eduvision Opleidingen
Opensource als alternatief
Opensource als alternatiefOpensource als alternatief
Opensource als alternatief
Peter Langenberg
Sdb Presentatie
Sdb PresentatieSdb Presentatie
Sdb Presentatie
menfey

Tussentijdse presentatie 22/11/2012

  • 1. Vergelijkende studie van frameworks voor de ontwikkeling van mobiele HTML5 applicaties Tim Ameye Sander Van Loock 22 november 2012
  • 2. Inhoud Inleiding Literatuurstudie jQuery Mobile Sencha Touch Tot slot
  • 3. Inleiding Omkadering Thesis met twee Capgemini Situering en doelstelling
  • 4. Omkadering Promotor prof. dr. E. Duval Begeleiders Gonzalo Parra (KU Leuven) Jan Verhulst (Capgemini)
  • 5. Thesis met twee zo weinig mogelijk overhead zo goed mogelijk van elkaar op de hoogte
  • 6. eerste meeting (15/10) interviews (23/10) developer architect sales proof on concept (25/10) mockup (4/11) backend (10/11)
  • 9. Literatuurstudie Inleiding Problemen Soorten frameworks / soorten applicaties Vergelijken van frameworks
  • 10. Literatuurstudie http://www.w3schools.com http://www.whatwg.org Levende standaard http://www.html5rocks.com http://html5guy.com http://html5doctor.com
  • 11. HTML5 1. Multimedia 2. Offline en opslag 3. Performantie en integratie 4. Semantiek 5. CSS3 6. 3D, grafieken en effecten 7. Verbinding 8. Toegang tot het apparaat
  • 12. Problemen HTML5 draft versie Heterogene landschap Snelle ontwikkelingen
  • 13. Browsersupport Detectie Zelf opzoeken: http://mobilehtml5.org/ Modernizr Resolutie Progressive enhancement Graceful degradation Build to stable version Fallback (Pollyfills) Up to developer
  • 16. Assumpties POC Device: Smartphone + Tablet OS: Android + iOS Framework: jQuery Mobile & Sencha Touch
  • 17. Vergelijken van frameworks ISO 25010 (vergelijken van software) Bestaande Use Cases Codefessions (score voor verglijkingscriteria) native experience performance cross-platform capabilities features ease of use code efficiency licences community en extensibility jQuery UI vs Kendo UI (vergelijkingstabel) Vergelijkinstabellen
  • 18. jQuery Mobile Inleiding Geleverd werk Belangrijkste moeilijkheden Demo
  • 19. 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
  • 20. Inleiding benodigde tools text editor, IDE, ... browser met developer tools aangeboden tools ThemeRoller Codiqua documentatie http://jquerymobile.com/demos/1.2.0/
  • 21. Geleverd werk implementeren smartphone versie POC UI functionaliteit met backend plugins gezocht voor formuliervalidatie projectcode suggesties HTML5 formuliervalidatie logboek 21/11/2012
  • 22. Belangrijkste problemen AJAX wordt ge誰mplementeerd met XMLHttpRequest (XHR) en is gebonden aan same origin policy parseJSON en parseXML parsen enkel valid formaten splitview signature
  • 23. Demo
  • 24. Sencha Touch Inleiding Geleverd werk Belangrijkste moeilijkheden Demo
  • 25. Inleiding Javascript gedreven WebKit browser engine onderdersteuning MVC support
  • 26. Geleverd werk Ontwikkeling in Sencha Architect Vervangen door IDE Views en Models klaar vbox sorters validaties Controllers voor data in/uit
  • 27. Belangrijkste moeilijkheden Cross-domain requests (backend) Cross-domain POST request met parameters OPTIONS request als preflight Syntax en knopjes Sencha Touch / Architect Documentatie niet up-to-date Debuggen met Sencha Touch
  • 28. Demo
  • 29. Tot slot To do Planning Statistieken
  • 30. To do volledig implementeren van POC toevoegen features aan POC andere frameworks The-M-Project Kendo UI Mobile ...
  • 31. 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
  • 32. Statistieken Tim Ameye Sander Van Loock Blogposts 5 4 Comments 16 11 Tweets 45 28 Uren totaal 160,5 158,8 - lezen 56 77,5 - schrijven 25 20 - social network activities 12,5 7,5 - meetings 29 23,5 - reflectie 3,5 0 - ontwerp 1,5 0 - implementatie 23,5 30 - evaluatie 0,5 0 - presentatie 9 5 Score: 14/20