comparatif de frameworks html/javascript pour le développement
Post on 28-Jan-2017
228 Views
Preview:
TRANSCRIPT
Comparatif de frameworks HTML/Javascript pour le développement d’applications mobiles. Com-paratif de frameworks HTML/Javascript pour le développement d’applications mobiles. Compa-ratif de frameworks HTML/Javascript pour le déve-loppement d’applications mobiles. Comparatif de frameworks HTML/Javascript pour le développe-ment d’applications mobiles
Comparatif de frameworks HTML/Javascript pour le développement d’applications mobilesLI
VRE
BLAN
C
Benoit DesnosResponsable de l’offre MobileBenoit.desnos@netapsys.fr
02
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©
Sommaire 1. Introduction 04 Le multiplateforme 04
Les applications mobiles en HTML/Javascript 05
Objectifs du livre blanc 05
2. Les frameworks 07 Les « natifs like » 07
Sencha Touch 08
JQuery mobile 09
Dojo mobile 10
GWTMobile 12
Les pro-Apple 13
ChocolateChip-ui 13
Webapp-net 14
Les non natifs 15
Wink toolkit 15
DhtmlX Touch 16
Qooxdoo 17
The-m-project 18
Les minimalistes 19
BkRender 20
Zepto 21
Xui 22
Les autres 23
3. Langage de programmation utilisé 24
4. Fonctionnalités générales 25
5. Interface 26 Élément de navigation par framework 27
Éléments de présentation des données par framework 27
Éléments de formulaire par framework 28
Disponibilité des fenêtres pop up par framework 28
Thèmes disponibles par framework 29
03
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©
6. Interactivité 30 Disponibilité des évènements par framework 30
Disponibilité des animations de transition par framework 30
7. Données 31 Technologies d’accès aux données distantes par framework 31
Disponibilité de fonctionnalités concernant la gestion
des données par framework 32
8. Compatibilité avec les navigateurs mobiles 34 Compatibilité des frameworks avec les principaux navigateurs
mobiles des plateformes iOS et Android 34
Le cas Opéra Mini 35
9. Conclusion 36 Application mobile 36
Site mobile 37
10. Annexe 1 : Terminologie 38 Présentation des frameworks 39
Fonctionnalités générales par frameworks 39
Élément de navigation par framework 40
Éléments de présentation des données par framework 41
Éléments de formulaire par framework 43
Disponibilité des fenêtres pop up par framework 45
Thèmes disponibles par framework 46
Disponibilité des évènements par framework 46
Disponibilité des animations de transition de page par framework 46
Disponibilité de fonctionnalités concernant la gestion
des données par framework 47
11. Annexe 2 : Méthodologie 48
12. À propos de Netapsys 49
04
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©
1.
Introduction
Avec l’arrivée de l’iPhone, la notion de smartphone a brusquement prit
une nouvelle dimension. Apple a brusquement imposé un nouveau
standard avec écran tactile, icônes, absence de stylets, etc. Un nouveau
marché a été inventé de façon durable. Depuis lors la concurrence
s’est alignée et a repris les choix fondamentaux faits par Apple en
commençant par copier dans un premier temps, puis en se permettant
des originalités comme Windows Phone ou les dernières versions
d’Android.
Après des débuts difficiles, la concurrence s’est organisée. D’abord
dominé par Apple, le marché est désormais de nouveau fragmenté et se
partage entre deux acteurs principaux et plusieurs outsiders. Android et
Apple représentent le gros du marché, RIM perd continuellement des
parts de marché avec son BlackBerry tandis que Microsoft n’arrive pas à
imposer Windows Phone 7 et semble miser désormais sur Windows 8.
Le marché a muri, les outils et les méthodes de développement aussi.
Développer des applications pour smartphone ciblant uniquement
la plateforme Apple est un choix souvent remis en question et le
développement multiplateforme s’impose petit à petit.
Le multiplateforme
05
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©
Fort de ce constat, Netapsys a réalisé un premier livre blanc sur le
développement multiplateforme.
Il a résulté de cette étude qu’il y avait une catégorie à part dans le
développement multiplateforme : le développement de l’application en
HTML5, Javascript et CSS.
En effet, les outils permettant de faire des applications à base d’HTML,
comme Phonegap, ne fournissent aucun service pour réaliser le cœur
de l’application, à savoir la partie HTML et Javascript. Ils s’appuient pour
cela sur l’utilisation d’un framework tiers choisi par le développeur.
Il reste donc à choisir ce framework Javascript.
Ce livre blanc a pour objectif de classer et de comparer les différents
frameworks d’aide à la réalisation d’une application mobile en HTML5/
Javascript/CSS pour smartphone ou tablette.
Sont exclues de cette étude les frameworks trop peu spécialisés, comme
par exemple SmartClient. En effet, ces frameworks offrent des services
spécialisés mobiles mais ils ne sont pas suffisants car ils ne proposent
pas en particulier de ressources graphiques permettant d’obtenir
facilement un aspect « natif » pour l’application finale. Ces frameworks
sont souvent suffisants pour faire des sites mobiles, mais ils réclament
Les applications mobiles en HTML/Javascript
Objectifs du livre blanc
06
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©
trop de travail pour faire une application pouvant passer pour une
application native de la plateforme ciblée.
Dans la liste des solutions retenues se trouvent des frameworks qui
sont des évolutions de frameworks pour machines de bureau, et des
nouveaux entrants uniquement présents dans le mobile.
On trouve des solutions riches offrant une organisation complète
du développement et des frameworks simples pouvant être utilisés
ponctuellement.
L’étude se consacre plus particulièrement à iOS et Android. Ils
représentent la très grande majorité des smartphones et surtout sont les
plateformes ciblées en exclusivité par la majorité des bibliothèques. Au
contraire, le BlackBerry et Windows Phone ne sont supportés que par une
minorité de ces frameworks.
Ce document est découpé en deux parties : dans un premier temps nous
présentons rapidement les frameworks, puis nous les comparons à l’aide
de grilles de comparaison explicitées en annexe.
07
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©
2.
Les frameworks
Dans cette partie nous allons présenter les différents frameworks retenus.
Ils sont classés en 5 catégories :
• Les « natifs like »
• Les pro-Apple
• Les non natifs
• Les minimalistes
• Les inclassables
Ces frameworks sont ceux qui offrent une expérience utilisateur proche
d’une application native. Ils ont été créés par des groupements ayant
déjà fait leur preuve sur des frameworks « desktop » et sont parmi les
solutions les plus pérennes de ce comparatif. La compatibilité de la
plupart d’entre eux avec leur version « desktop » permet d’accéder à
une quantité impressionnante de fonctionnalités déjà créées par les
communautés via des plugins. Le bémol est le pendant de cet avantage :
ces frameworks sont parfois lourds à charger, ce qui peut affecter le
confort de navigation.
Les « natifs like »
08
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©
Sencha Touch est la version mobile du bien connu ExtJs. C’est
actuellement la solution la plus indiquée si l’on souhaite réaliser une
application HTML/Javascript esthétiquement identique à une application
mobile native. Il est particulièrement exhaustif et ses thèmes iOs et
Android sont soignés. Il est construit sur une architecture objet Javascript
entièrement créée par l’équipe de Sencha et permet d’utiliser le design
pattern « Model View Controller » pour une meilleure maintenabilité et
une meilleure évolutivité. Il faut prévoir un peu de temps pour le prendre
en main car si une utilisation basique est plutôt bien documentée, il
faudra souvent consulter les sources pour traiter les situations plus
compliquées. Mais le forum est assez réactif bien que la priorité de
l’équipe Sencha aille au support payant.
L’équipe Sencha propose également d’autres produits en relation directe
avec Sencha touch : Sencha.io, service gratuit de « Cloud » permettant de
gérer les données, le login, les messages et le déploiement d’applications
Sencha Touch. Sencha Animator (199$) est une application facilitant
la création d’animations, de créer des transitions et des boutons en
respectant les standards grâce à CSS3.
JSBuilder, gratuit et indispensable, est un outil permettant d’optimiser le
code des projets Ext JS pour la production. Le code est ainsi beaucoup
plus léger.
Sencha Touch
CRITÈRE DESCRIPTION
URL http://www.sencha.com/products/touch/
Communauté facebook.comsencha.com/forum/
Démonstration http://dev.sencha.com/deploy/touch/examples/kitchensink/
Version V 1.1.1
Langage Javascript
09
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©
On ne présente plus jQuery, et sa version mobile a déjà fait de nombreux
émules. Il semble d’ailleurs avoir actuellement la communauté la plus
importante des frameworks testés ici. La version v1 de ce framework vient
de sortir et jouit de nombreux composants. Cependant, il lui manque
quelques finitions pour permettre une bonne simulation d’application
native. Le défilement par exemple reste géré par le navigateur ce qui
empêche de mettre deux listes déroulantes dans la même page. On
trouve aussi des incohérences sur les barres de défilement fixes qui
disparaissent sur Android mais fonctionnent parfaitement sur iOS. La
communauté est très active et le développement avance vite. Comme
dit précédemment, les nombreux plugins de jQuery sont compatibles
avec la version mobile ce qui apporte une quantité importante de
fonctionnalités.
Voici le lien vers deux thèmes créés par la communauté afin d’approcher
au mieux les visuels d’iOS et Android : thème iOS, thème Android.
JQuery mobile
Spécialité mobile Non
Licence GPL V3 et commerciales
Open Source Oui
Popularité Excellente
Documentation Référence de l’API
Outils de support Forum
Formation Vidéos et tutoriels
Produits associés Sencha.io, JS Builder, Sencha Animator
Formule Commercial Software licence, Commercial OEM Licence
Prix Gratuit, À négocier
Contenu de l’offre Création de sa propre application commerciale, Création de son propre SDK commerciale
10
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©
CRITÈRE DESCRIPTION
URL http://jquerymobile.com/
Communauté forum.jquery.com/jquery-mobilefacebook.comtwitter.com
Démonstration http://jquerymobile.com/test/
Version V 1.0 Finale
Langage Javascript
Spécialité mobile Non
Licence Licence MIT ou GL2
Open Source Oui
Popularité Excellente
Documentation Référence de l’API
Outils de support Forum
Formation Laissé à la communauté pour le moment. Plusieurs tutoriels ont déjà émergés sur la toile, on peut en trouver les liens sur le forum et dans le Blog.
Produits associés Themeroller, jQuery
Formule Licence MIT ou GL2
Prix Gratuit
Contenu de l’offre Création de sa propre application commerciale
La version mobile de dojo présente une solution intéressante bien que
méconnue. Le framework apporte un nombre important de composants
et des thèmes ressemblant à une application native. De plus, comme
jQuery, il hérite de la bibliothèque Dojo standard et de tous ses plugins
existants. Pour information, Dojo est un framework un peu particulier
permettant de ne charger que les classes dont on a besoin ce qui allège
le poids de l’application. Une grande partie du code se fait directement
dans le code HTML5 en y ajoutant des attributs, Dojo faisant ensuite de
la manipulation de DOM en fonction de ces attributs. Par exemple, pour
créer un magasin de données et une liste dynamique à partir de celle ci
Dojo mobile
11
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©
il suffira de faire :
<div data-dojo-type=»dojo.data.ItemFileReadStore»
jsId=»sampleStore» url=»data/monFichierDeDonnée.json»></div>
<ul id=»list» data-dojo-type=»dojox.mobile.EdgeToEdgeDataList»
store=»sampleStore» query=»{text: ‘*’}»></ul>
Le seul Javascript qu’il faudra ajouter est l’ajout des classes utilisées en
début de fichier soit « dojo.data.ItemFileReadStore » et « dojox.mobile.
EdgeToEdgeDataList ».
CRITÈRE DESCRIPTION
URL http://dojotoolkit.org/
Communauté twitter.com dojotoolkit.org/community/
Démonstration archive.dojotoolkit.orgchrism.dojotoolkit.org/androidchrism.dojotoolkit.org/iphone
Version V 1.7.1
Langage HTML
Spécialité mobile Non
Licence NewBSD et AFL open source
Open Source Oui
Popularité Moyenne
Documentation Référence et guide de l’API, documentation
Outils de support Forum, chat
Formation Tutoriels
Produits associés Dojo
Formule Licence NewBSD et AFL open source
Prix Gratuit
12
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©
GWTMobileGWT Mobile est l’ensemble de trois éléments. GWT Mobile UI est
le système de widgets graphiques. GWT Mobile Persistence est un
« wrapper » de l’ORM javascript « persistence.js », il fournit une persistance
des objets coté client à la manière de ce qu’Hibernate fournit côté serveur.
GWT Mobile Phonegap est un « wrapper » de la bibliothèque Phonegap
qui permet l’accès aux ressources natives des terminaux mobiles.
Les principaux avantages de GWT Mobile sont de permettre de coder et
de tester en Java, et d’avoir accès aux plugins et éléments du framework
GWT. Les thèmes iOs et Android sont assez éloignés de l’aspect natif mais
ils fonctionnent. Le thème Android est à peu près au point mais le thème
iOS est pour le moment difficilement utilisable. La principale lacune du
framework est la documentation très parcellaire : il faut constamment
se référer au code source fourni en démonstration ou à la mailing list.
Le projet n’est pas très actif et il reste beaucoup de choses à faire pour
disposer d’une panoplie complète de composants. Il constitue cependant
la meilleure solution autour de GWT.
CRITÈRE DESCRIPTION
URL github.com/dennisjzh/GwtMobile
Communauté groups.google.com/forum/
Démonstration ambigtion.com/gwtmobileui/
Version V1.1
Langage Java
Spécialité mobile Non
Licence Apache v2
Open Source Oui
Popularité Faible
Documentation Les deux applications de démonstrations fournies avec les sources.
Outils de support google group
Formation dojotoolkit.org/documentation/
13
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©
Produits associés GWT
Formule Apache v2
Prix Gratuit
Les frameworks de cette partie sont focalisés sur la plateforme iOS et
l’esthétique iOS.
Les pro-Apple
Chocolate chip UI ou « Chui » est un framework orienté mobile. Il
est donc léger et se focalise sur la compatibilité avec les navigateurs
mobiles plutôt que les navigateurs desktop. Si la partie Javascript de
Chui resemble à jQuery, la partie la plus intéressante est certainement
son langage de balise WAML (Web App Markup Language) spécialement
conçu pour l’HTML5. Ce langage permet un peu à la manière de Dojo de
créer des composants sans une ligne de Javascript. Mais contrairement à
Dojo, les balises utilisées ont été créées pour l’occasion en reprenant les
noms des widgets d’iOS. On utilisera donc des <panel>, <tableview> ou
encore <slider>. Chui est basé sur la libraire Javascript ChocolateChip.js
mais il existe deux portages, un pour jQuery et un pour Zepto (Zepto étant
lui même compatible jQuery).
ChocolateChip-ui
CRITÈRE DESCRIPTION
URL chocolatechip-ui.com
Version V1.0
Langage WAML
Spécialité mobile Oui
14
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©
Webapp.net est un framework Javascript léger au fonctionnement
similaire à Dojo : on ajoute des classes et des ids particuliers aux balises
HTML et celles-ci obtiennent alors un aspect mobile. Il y a toutefois peu
de composants et seul un thème iOS existe. La documentation disponible
gratuitement est très pauvre en particulier parce que l’auteur a publié
un livre sur le sujet : « Beginning iPhone and iPad Web Apps ». Le support
d’Android est inexistant. Cependant il n’y a rien de superflu dans ce
framework qui peut constituer une base pour faire de petites applications
ou pour démarrer.
Webapp-net
Licence BSD
Open Source Faible
Popularité Documentation, et les d’exemples dans le dossier d’installation.
Documentation support.bkrender.com/forums
Outils de support Tutoriaux
Formation Jquery, Zepto
Produits associés BSD
Formule Gratuit
Prix Gratuit
CRITÈRE DESCRIPTION
URL webapp-net.com
Version twitter.comforums.chrilith.com
Langage demo.webapp-net.com
Spécialité mobile V0.5.2
Licence HTML
Open Source Oui
Popularité BSD
15
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©
Ces Frameworks ne recherchent pas à obtenir un aspect natif.
Les non natifs
Le projet a démarré début 2009 à Orange Labs. Depuis le 17 juin
2010, Wink est un projet de la « Dojo foundation ». Il fournit toutes les
fonctionnalités élémentaires d’un framework Javascript : depuis la
manipulation du DOM jusqu’aux requêtes HTTP asynchrones mais
également quelques fonctions mobiles comme la gestion du « touch » et
des « gestures ». Wink n’est pas livré prêt pour imiter l’aspect natif : il n’a
pas de thème iOS ou Android, il offre de nombreux composants mais peu
sont ceux que l’on trouve dans les applications natives. Wink veut faire
du web et pas du natif. Il y a cependant des composants très intéressants
que nous n’avons pas trouvé ailleurs comme la reconnaissance de
« gestures » complexes, l’orientation du terminal dans l’espace et le
chargement des éléments d’une liste a posteriori lors du défilement.
Il faut noter enfin que nous avons noté des problèmes de compatibilité
de plusieurs composants sur Android (trace, accordion, flip etc.).
Wink toolkit
Documentation Oui
Outils de support Moyenne
Formation Le livre
Produits associés demo.qooxdoo.org
Formule BSD
Prix Gratuit
16
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©
CRITÈRE DESCRIPTION
URL winktoolkit.org
Communauté winktoolkit.org/discussion/twitter.com
Démonstration winktoolkit.org/documentation/wink/winktoolkit.org/webapps/lajax
Version V 1.4
Langage Javascript
Spécialité mobile Oui
Licence BSD Licence
Open Source Oui
Popularité Moyenne
Outils de support Forum, blog
Formation Tutoriaux
Formule BSD Licence
Prix Gratuit
DHTMLX touch offre de nombreux composants pour créer une
application web mobile fonctionnelle. La stratégie de ce framework est
de fournir des composants compatibles avec DHTMLX suite (la version
desktop), il n’y a donc pas de thème iOS ou Android, même si parfois le
résultat ressemble un peu à iOs (barre de titre). DHTMLX est assez réputé
et possède une bonne communauté de développeurs. En outre il offre
de nombreux outils aidant à la création de l’application. Mais Visual
Designer n’est pas encore tout à fait au point en particulier sous Chrome
et changer la valeur d’une propriété est difficile, alors qu’avec les autres
navigateurs certains composants ne s’affichent simplement pas. Il permet
cependant de créer avec une facilité déconcertante les vues de son
application dans un éditeur en ligne WYSIWYG et on ne peut qu’attendre
impatiemment une version mieux stabilisée. Skinbuilder quant à lui
DhtmlX
Touch
17
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©
permet de choisir son jeu de couleurs pour l’application et Touch UI
inspector donne accès au contenu des objets DHTMLX d’une application
même lorsque l’application est passive, ce qui constitue un excellent outil
de débuggage.
CRITÈRE DESCRIPTION
URL dhtmlx.com/touch/
Communauté forum.dhtmlx.com/facebook.comtwitter.com
Démonstration dhtmlx.com/touch/samples/
Version V1.0
Langage Javascript
Spécialité mobile Non
Licence Free
Open Source Oui
Popularité Excellente
Documentation Documentation, API référence
Outils de support Forum, Tickets.
Formation «Developer’s guide» et tutoriaux
Produits associés DHTMLX, Visual designer, skinbuilder, touch ui inspector
Formule « Free »
Prix Gratuit
Qooxdoo est un SDK utilisant un système complet de classes Javascript.
Il permet de gérer les environnements. On peut développer en découpant
son application en plusieurs fichiers et classes, débugger, vérifier et
optimiser son code avec les outils en ligne de commande. Il contient son
propre framework, « testrunner », pour créer des tests unitaires. Il permet
de générer une documentation du projet similaire à JAVAdoc et JSDoc.
Qooxdoo
18
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©
Le framework est créé par l’hébergeur 1and1 et est déjà assez abouti.
Notons que le framework est utilisé pour des applications Desktop mais
que les composants mobiles ont été particulièrement soignés et qu’ils
sont jusqu’à six fois plus rapides.
CRITÈRE DESCRIPTION
URL qooxdoo.org
Communauté twitter.comforum.qooxdoo.org
Démonstration qooxdoo.org/demo
Version V1.6
Langage Javascript
Licence LGPL (GNU lesser General public Licence) ou EPL (Eclipse public licence)
Open Source Oui
Popularité Bonne
Documentation Référence API, manuel, glossaire
Outils de support Mailing list, irc, forum
Formation Tutorial, playground
Produits associés playground
Formule LGPL (GNU lesser General public Licence) ou EPL (Eclipse public licence)
Prix Gratuit
Framework MVC incluant jQuery mobile, Modernizr, Underscore,
Mobiscroll et des concepts de Sproutcore et Persistance.js.
Le framework présente une interface graphique ludique avec de
nombreuses options et l’architecture MVC qu’il met en avant est un
avantage pour les applications de taille conséquente. Cependant, la
version testée est loin d’être stable et nous avons rencontré de nombreux
bugs. Un framework donc déconseillé en production actuellement mais
très prometteur.
The-m-project
19
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©
CRITÈRE DESCRIPTION
URL the-m-project.net
Communauté facebook.comtwitter.com
Démonstration the-m-project.net/apps/kitchensink
Version V0.8 alpha
Langage Javascript
Licence MIT
Open Source Oui
Popularité Bonne
Documentation Roadmap, JSDoc, Wiki, Blog, doc
Formation Tutoriels
Formule MIT
Prix Gratuit
Ces petits frameworks sont nombreux sur internet, nous avons
sélectionné ceux qui semblent être les plus intéressants actuellement.
Ces mini frameworks n’ont pas de composants évolués tout prêts. Ils
sont très légers et fournissent des fonctionnalités élémentaires et de bas
niveau, telles que la manipulation du DOM et des CSS, ou une navigation
HTML habituelle avec chargement de page mais avec l’aspect d’une
application mobile.
Les minimalistes
20
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©
BkRender permet de développer son site en BKML, un langage de balise
proche du HTML. Ce langage est interprété par un serveur Bkrender qui
renvoie un fichier html adapté au terminal qui l’appelle. De cette manière,
le site peut s’adapter aux spécificités du terminal de sorte qu’il soit
toujours parfaitement rendu quel que soit le terminal. Les sites conçus
avec Bkrender ont clairement un aspect de site web, ils ne ressemblent
pas particulièrement à une application native. Le passage d’une page à
l’autre se fait par rechargement de la page et les animations se font rares.
Ce framework a l’avantage d’offrir une grande compatibilité au prix d’un
confort de navigation moindre.
BkRender
CRITÈRE DESCRIPTION
URL bkrender.com
Communauté support.bkrender.com/forumstwitter.com
Démonstration bkrender.mobi
Version V4.5.3
Langage BKML
Spécialité mobile Oui
Licence BKML
Open Source Non
Popularité Bonne
Documentation Documentation
Outils de support Forum
Formation 2 jours 3500 euros pour 5 personnes max
Produits associés demo.qooxdoo.org
Formule Free, Basic, Licence exécution
Prix Gratuit, 500 euros/m, non défini
Contenu de l’offre Pour 1 mois (domaine en bkrender, 10K PV), jusqu’à 5 alias + 100K PV, bande passante illimitée + alias illimités.
21
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©
Zepto est un petit framework Javascript fonctionnant avec les
navigateurs webkit (iOS et Android en particulier) assez riche malgré sa
petite taille. Uniquement orienté mobile, il n’offre pas le support des
versions d’Internet Explorer qui peuvent représenter parfois jusqu’à la
moitié d’un framework javascript. Zepto permet de manipuler le DOM,
les CSS, de créer des animations et de gérer les évènements « tap »,
« doubletap », « swipe », et « pinch ». L’API de Zepto est la même que
celle de jQuery ce qui permet de facilement passer à jQuery Mobile si le
projet devient important. A noter qu’il y a quelques petites fonctions bien
pratiques comme par exemple : isFunction(), isArray, onReady, extends
(pour étendre un objet).
Zepto
CRITÈRE DESCRIPTION
URL zeptojs.com
Communauté github.comtwitter.com
Version V0.8
Langage Javascript
Spécialité mobile Oui
Licence MIT
Open Source Oui
Popularité Bonne
Documentation Sur la page Github
Outils de support Outils Github (issues, requests)
Formation winktoolkit.org/tutorials/
Formule MIT
Prix gratuit
22
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©
Xui a été créée en 2008 par l’équipe du framework PhoneGap qui avait
besoin d’avoir un framework DOM solide prenant en compte la latence
du web mobile et compatible avec un maximum de plateformes mobiles.
En effet, contrairement à bon nombre de ses confrères, Xui n’est pas
limité aux seuls navigateurs Webkit. Il permet de gérer le DOM, les CSS
et les animations CSS. Il permet de gérer les évènements « touchstart »,
« touchmove », « touchend », « touchcancel », « gesturestart »,
« gesturechange », « gestureend », et « orientationchange ».
Xui
CRITÈRE DESCRIPTION
URL xuijs.com
Communauté groups.google.comgithub.com/xui/
Version V2.3.2
Langage Javascript
Spécialité mobile Oui
Licence MIT
Open Source Oui
Popularité Faible
Outils de support Github, google group de phonegap, IRC (irc.freenode.net#pho-negap).
Formation winktoolkit.org/tutorials
Formule MIT
Prix Gratuit
23
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©
Il y a de nombreux autres frameworks orientés mobiles sur la toile :
on en a dénombré une quarantaine ! Cependant, beaucoup sont
l’initiative de petits groupes de développeurs et sont trop récents ou trop
incomplets pour l’instant. Il y a également des projets dont la pérennité
est compromise comme jqTouch très certainement remplacé à terme
par jQuery Mobile. Nous nous sommes donc concentrés sur ceux qui
nous paraissaient les plus intéressants à traiter, ceux dont la pérennité, la
popularité et le nombre de fonctionnalités sont suffisants.
Nous avons noté quelques framework pas assez aboutis mais
intéressants et qui peuvent percer à l’avenir : embedJS, unify, Jo et
mootools mobile.
Les autres
24
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©
3.
Langage de programmation
utilisé
BKRE
NDE
R
CHO
COLA
TE C
HIP
UI
DHTM
LX
DOJO
MO
BILE
GWTM
OBI
LE
JQU
ERY
MO
BILE
QO
OXD
OO
SEN
CHA
TOU
CH 1
THE
M P
ROJE
CT
WEB
APP-
NET
WIN
K
Javascript
Javascript et HTML (ou assimilé)
Java
Langage de programmation à utiliser pour le développement
25
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©
4.
Fonctionnalités générales BK
REN
DER
CHO
COLA
TE C
HIP
UI
DHTM
LX
DOJO
MO
BILE
GWTM
OBI
LE
JQU
ERY
MO
BILE
QO
OXD
OO
SEN
CHA
TOU
CH 1
THE
M P
ROJE
CT
WEB
APP-
NET
WIN
K
Support des tablettes
Barre url masquée en permanence
Barres d'outils ancrable
Stockage de donnée local v
Support de l'historique
Drag and drop
Internationalisation v
Patron de conception MVC
Fonctionnalités générales par framework
26
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©
5.
Interface
Dans les tableaux suivants, la présence des icônes Apple et Android indique
si un équivalent au composant Apple ou Android en question existe ou pas.
Un framework peut par exemple proposer une barre d’onglet fonctionnelle
mais différente de celle d’iOS ou d’Android. Les composants natifs auxquels
nous nous sommes référés sont décrits dans la section terminologie à la fin
de ce document.
Légende Disponible
Non disponible
Équivalents Apple et Android disponibles
Équivalents Apple et Android non disponibles
Équivalent Apple disponible
Équivalent Android disponible
27
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©
BKRE
NDE
R
CHO
COLA
TE C
HIP
UI
DHTM
LX
DOJO
MO
BILE
GWTM
OBI
LE
JQU
ERY
MO
BILE
QO
OXD
OO
SEN
CHA
TOU
CH 1
THE
M P
ROJE
CT
WEB
APP-
NET
WIN
K
Onglets (tabs)
Carrousel
Overlays slideup (action sheet, option menu)
Pop over avec liste
Barre de navigation
Barre d’outils
Barre de recherche
Élément de navigation par framework
BKRE
NDE
R
CHO
COLA
TE C
HIP
UI
DHTM
LX
DOJO
MO
BILE
GWTM
OBI
LE
JQU
ERY
MO
BILE
QO
OXD
OO
SEN
CHA
TOU
CH 1
THE
M P
ROJE
CT
WEB
APP-
NET
WIN
K
Vue scindée (split view)
Liste simple
Liste groupée
Vue de défilement (Scrollview)
Cartes (map)
Accordéon
Éléments de présentation des données par framework
28
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©
BKRE
NDE
R
CHO
COLA
TE C
HIP
UI
DHTM
LX
DOJO
MO
BILE
GWTM
OBI
LE
JQU
ERY
MO
BILE
QO
OXD
OO
SEN
CHA
TOU
CH 1
THE
M P
ROJE
CT
WEB
APP-
NET
WIN
K
Bouton radio
Checkbox
Bouton Segmenté
Interrupteur
Boite de sélection (Select)
Curseur (Slider)
Zone de texte une ligne (Text input)
Zone de texte multi ligne (Textarea)
Boite de sélection de date (date picker)
Éléments de formulaire par framework
BKRE
NDE
R
CHO
COLA
TE C
HIP
UI
DHTM
LX
DOJO
MO
BILE
GWTM
OBI
LE
JQU
ERY
MO
BILE
QO
OXD
OO
SEN
CHA
TOU
CH 1
THE
M P
ROJE
CT
WEB
APP-
NET
WIN
K
Fenêtre d'alerte paramétrable
Fenêtre de dialogue (avec boutons)
Fenêtre de popup complètement paramétrable (vue modale)
Disponibilité des fenêtres pop up par framework
29
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©
BKRE
NDE
R
CHO
COLA
TE C
HIP
UI
DHTM
LX
DOJO
MO
BILE
GWTM
OBI
LE
JQU
ERY
MO
BILE
QO
OXD
OO
SEN
CHA
TOU
CH 1
THE
M P
ROJE
CT
WEB
APP-
NET
WIN
K
iOS
Android
Autres
Thèmes disponibles par framework
30
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©
6.
Interactivité BK
REN
DER
CHO
COLA
TE C
HIP
UI
DHTM
LX
DOJO
MO
BILE
GWTM
OBI
LE
JQU
ERY
MO
BILE
QO
OXD
OO
SEN
CHA
TOU
CH 1
THE
M P
ROJE
CT
WEB
APP-
NET
WIN
K
Taphold
Double tap
Pinch
Swipe
Rotation
Barre de recherche
BKRE
NDE
R
CHO
COLA
TE C
HIP
UI
DHTM
LX
DOJO
MO
BILE
GWTM
OBI
LE
JQU
ERY
MO
BILE
QO
OXD
OO
SEN
CHA
TOU
CH 1
THE
M P
ROJE
CT
WEB
APP-
NET
WIN
K
Slide
Fade
Flip
Pop
Disponibilité des évènements par framework
Disponibilité des animations de transition par framework
31
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©
7.
Données BK
REN
DER
CHO
COLA
TE C
HIP
UI
DHTM
LX
DOJO
MO
BILE
GWTM
OBI
LE
JQU
ERY
MO
BILE
QO
OXD
OO
SEN
CHA
TOU
CH 1
THE
M P
ROJE
CT
WEB
APP-
NET
WIN
K
Xml-rpc ou Json-rpc
Json-p
Yql
Technologies d’accès aux données distantes par framework
Remarque
On ne parle pas ici d’xhr (ajax) qui est supporté par tous ces frameworks mais d’appels plus spécifiques simplifiant le code d’accès à des webservices ou en « cross-domain »
32
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©
BKRE
NDE
R
CHO
COLA
TE C
HIP
UI
DHTM
LX
DOJO
MO
BILE
GWTM
OBI
LE
JQU
ERY
MO
BILE
QO
OXD
OO
SEN
CHA
TOU
CH 1
THE
M P
ROJE
CT
WEB
APP-
NET
WIN
K
Websql (sqlite)
Localstorage
Disponibilité de fonctionnalités concernant la gestion
des données par framework
Il y a quatre façons de stocker des données de manière persistante dans un
navigateur. Les données étaient historiquement stockées dans des Cookies,
mais les limitations de ce format ont poussé le W3C à proposer d’autres
solutions dans l’HTML5.
Le « Localstorage » permet le stockage de données de type « clé-valeur
» et convient au stockage de quantités éventuellement importantes de
données peu structurées. Concernant le stockage de données structurées
de type SQL, une guerre des standards a eu lieu. Web sql, qui est une
implémentation directe de SQLite dans le navigateur, est aujourd’hui
supportée par tous les navigateurs sauf Firefox mais est « dépréciée » par le
W3C. C’est Indexed DB qui a été choisie pour le standard HTML5, mais cette
dernière n’est supportée par aucun navigateur mobile à l’heure actuelle.
Il existe des bibliothèques Javascript compatibles avec les frameworks
testés permettant de facilement gérer la persistance des données grâce
à une forte couche d’abstraction. Ces solutions s’adaptent au navigateur
et s’occupent de stocker les données de façon optimale. Deux de ces
solutions sont particulièrement intéressantes: persistence.js (persistencejs.
org/) qui stocke en WebSQL par défaut et Lawnchair qui stocke en
Localstorage par défaut.
33
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©
BKRE
NDE
R
CHO
COLA
TE C
HIP
UI
DHTM
LX
DOJO
MO
BILE
GWTM
OBI
LE
JQU
ERY
MO
BILE
QO
OXD
OO
SEN
CHA
TOU
CH 1
THE
M P
ROJE
CT
WEB
APP-
NET
WIN
K
Comet
Web socket
Disponibilité de fonctionnalités concernant la gestion
des données par framework
Le « Push » de données est une technique permettant au serveur
d’envoyer des données au client, ce qui permet une réactivité accrue.
Dans une application de chat par exemple l’utilisateur pourra recevoir le
message peu de temps après qu’il a été tapé par l’interlocuteur sans que
l’application aie à envoyer une requête explicite au serveur.
Ces technologies ne sont pas implémentées par les versions standards des
frameworks que nous avons testées. Ils sont uniquement disponibles via
des plugins.
34
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©
8.
Compatibilité avec les
navigateurs mobiles
Les applications web mobiles sont embarquées dans une application
native, comme Phonegap, et elles utilisent toujours le navigateur natif du
mobile. Mais il est intéressant de voir si le site embarqué peut aussi être
utilisé de façon indépendante comme simple site web mobile utilisé depuis
un navigateur standard.
PLATEFORME NAVIGATEUR
BKRE
NDE
R
CHO
COLA
TE C
HIP
UI
DHTM
LX
DOJO
MO
BILE
GWTM
OBI
LE
JQU
ERY
MO
BILE
QO
OXD
OO
SEN
CHA
TOU
CH 1
THE
M P
ROJE
CT
WEB
APP-
NET
WIN
K
iOs Natif
Android Natif
Netfront live
Opera mobile
Firefox
Compatibilité des frameworks avec les principaux
navigateurs mobiles des plateformes iOS et Android
35
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©
Le cas Opéra Mini
On peut constater que Gecko (Firefox) et Presto (Opera) sont mis de côté
au profit de Webkit (les trois autres). Le message est clair, les frameworks
mobiles évolués aujourd’hui sont à destination des plateformes Webkit.
On peut comprendre ce choix du fait que les navigateurs Opéra mobile et
Firefox ne sont pas totalement optimisés pour le mobile, ils consomment
beaucoup de mémoire et semblent être de rapides adaptations de leur alter
ego desktop.
Opéra Mini est actuellement le navigateur le plus utilisé sur Android (source)
devant le navigateur natif de la plateforme. Mais le fonctionnement d’Opéra
Mini est spécifique : le navigateur ne contient pas de moteur de rendu car
la plupart du travail est effectué en amont par un proxy depuis lequel une
page statique est transmise au smartphone. Il est par exemple impossible
de réaliser des transitions animées. Pour naviguer de page en page il faut
recharger chaque page en passant par le proxy. On peut donc constater
que les frameworks permettant de faire des applications imitant au mieux
l’aspect natif ne marchent tout simplement pas sur Opéra Mini.
PLATEFORME NAVIGATEUR
BKRE
NDE
R
CHO
COLA
TE C
HIP
UI
DHTM
LX
DOJO
MO
BILE
GWTM
OBI
LE
JQU
ERY
MO
BILE
QO
OXD
OO
SEN
CHA
TOU
CH 1
THE
M P
ROJE
CT
WEB
APP-
NET
WIN
K
iOs et Android Opéra Mini
36
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©
9.
Conclusion
Les deux frameworks qui offrent la plus grande similitude avec une
application native sont Sencha Touch et Dojo Mobile. Ils offrent
tous deux un bon niveau fonctionnel avec une bibliothèque de
composants suffisante et une qualité esthétique du résultat proche
de l’environnement natif. Utilisés encapsulés dans une application
Phonegap par exemple ils permettront d’obtenir un résultat proche
d’une application native. Sencha Touch permet de tout faire en
Javascript et structure l’application grâce à MVC et son système de
classe. Dojo Mobile permet de reprendre un site existant et d’adapter
le code html par simple ajout de balise pour en faire une application
mobile.
jQuery Mobile et Zepto sont deux choix alternatifs intéressants. Ils
fournissent une bibliothèque de composants suffisante mais un résultat
esthétique plus éloigné de l’environnement natif. Ils seront intéressants
par exemple dans le cas où l’application n’a pas de besoins d’aspect
natif. Zepto est minimaliste, léger, flexible et permet de commencer
un petit projet et le basculer sous jQuery si les besoins se font plus
importants. Jquery Mobile permet de reprendre une application HTML
existante mais en faisant majoritairement du javascript.
Si l’équipe a des compétences en Java et qu’elle ne souhaite pas
s’investir dans le Javascript, GWTMobile est une solution recommandée.
Il faudra cependant anticiper une charge de travail afin d’ajouter les
fonctionnalités manquantes à ce framework en devenir.
Application mobile
37
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©
Bien que la réalisation d’un site mobile ne soit pas tout à fait le sujet de
ce livre blanc, il est intéressant de noter que les frameworks testés ici
peuvent aussi être utilisés pour un site mobile non embarqué dans une
application.
Le cas des sites mobiles pose un problème particulier sur Android.
En effet, plus de la moitié des utilisateurs d’Android naviguent sur
Opera mini plutôt que sur Chrome, et les frameworks testés ici sont
généralement dépendants de Webkit et pratiquement tous réfractaires
à Opera Mini. Le support de ce navigateur est donc une contrainte forte
dans le choix du framework pour faire un site mobile pour Android.
Le problème ne se pose pas dans le cas d’une application mobile
embarquée comme une application native car c’est le navigateur natif
d’Android (Chrome) qui sera utilisé dans ce cas.
Site mobile
38
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©
10.
Annexe 1 : Terminologie
Domaine de définition
les notes qui suivent concernent les frameworks étudiés, et
éventuellement leur framework père et leurs plugins. Si par exemple
« dojo.mobile » ne continent pas de méthode pour stocker de
l’information localement, « dojo.io » lui dispose de ces méthodes. Le
framework Dojo Mobile sera donc considéré comme ayant accès à cette
fonctionnalité. De même jquery mobile ne supporte pas « comet » en lui-
même, cependant un plugin disponible sur le site officiel le permet, il sera
donc considéré comme le supportant.
Cependant nous nous arrêterons à ces limites et donc si le composant
n’est ni disponible dans les plugins officiels, ni dans le framework père
alors il sera considéré comme indisponible même si il est possible de
l’intégrer en le codant directement en Javascript dans le framework.
39
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©
CRITÈRE TERMINOLOGIE
Version Version du framework testée
Langage Langage de programmation principal utilisé lors de la création d'application avec le framework
Spécialisé Mobile Est-ce que le framework a été conçu pour les mobiles
Licence Licences avec lesquelles le framework est disponible
Open Source Le framework est-il open source
Popularité Estimation de la popularité en fonction des outils de communication et de la popularité sur le web
Documentation Outils de documentations disponibles.
Support Outils de support disponibles
Formation Outils de formation disponibles
Produits associés Produits en relation étroite avec le framework publié par le même éditeur
Formule Formules ou licences proposées par l'éditeur
Prix Prix par formule
Contenu de l'offre Contenu de l'offre pour la formule
CRITÈRE TERMINOLOGIE
Support avancé des tablettes Existence d'un composant de vue scindée et de pop-over.
Barre url masquée Lors de la navigation dans l'application l barre d'url est masquée. Elle n'apparait que lorsque l'on produit une action spécifique pour la voir.
Barres d'outils ancrable Possibilité d'ancrer un ou plusieurs type de barre en haut et/ou en bas de l'écran.
Stockage de donnée local Possibilité de stocker des données en base de données locale -websql, indexdb- et/ou en « locals-torage ».
Support de l'historique Possibilité lors de la navigation dans l'application d'utiliser le bouton « back » pour revenir à la page précédente de l'application.
Drag and drop Existence d'une api pour gérer le drag and drop.
Internationalisation i18n Existence d'une api pour permettre l'internationalisation de l'application.
Patron de conception MVC Invitation ou obligation d'un découpage du code en modèles, vues et contrôleurs.
Présentation des frameworks
Fonctionnalités générales par frameworks
40
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©
CRITÈRE TERMINOLOGIE
Onglets Existence d'un composant permettant de naviguer entre plusieurs pages grâce à des onglets simi-laires à ceux d'ios et/ou d'Android.
Carrousel Existence d'un composant permettant de naviguer entre des pages en plein écran grâce à un Swipe sur celles-ci.
Overlays slideup (action sheet, option menu)
Existence d'un composant permettant d'afficher un menu modal remontant du bas de l'écran.
Pop over avec liste Existence d'un composant permettant d'afficher un pop up contenant une liste ou un menu.
Barre de navigation Existence d'une barre de type iOS incluant un titre et deux boutons optionnels placés aux extrémités.
Barre d'outils Existence d'une barre pouvant contenir plus de deux boutons de toute sorte.
Barre de recherche Existence d'une barre contenant un champ de texte et un bouton.
CRITÈRE IOS ANDROID
Onglets
Overlays slideup (action sheet, option menu)
Élément de navigation par framework
41
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©
Pop over avec liste
Barre de navigation
Barre d'outil
Barre de recherche
CRITÈRE TERMINOLOGIE
Vue scindée (split view) Existence d'un moyen de créer un équivalent à une iOS splitview. Soit la division horizontale de l'écran en deux vues distinctes.
Liste simple Existence d'un composant permettant de créer des listes simple de donnée avec un visuel appro-chant celui des tableviews iOS et/ou des listviews Android.
Liste groupée Existence d'un composant permettant de créer une page contenant des listes groupées et intitulées.
Vue de défilement (Scrollview) Il y a un composant conteneur qui permet de faire défiler une vue à l’intérieur de lui même.
Cartes (map) Le framework prévoit l'utilisation de google mapkit d'une manière ou d'une autre.
Accordéon Existence d'un composant permettant de faire un menu accordéon. Lors de la sélection d'un des éléments du menu celui-ci se déploie pour afficher le contenu lié.
Barre de recherche Existence d'une barre contenant un champ de texte et un bouton.
Éléments de présentation des données par framework
42
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©
CRITÈRE IOS ANDROID
Liste simple
Liste groupée
43
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©
Éléments de formulaire par framework
CRITÈRE TERMINOLOGIE
Bouton radio Existence d'un bouton radio personnalisé par le framework.
Checkbox Existence d'un bouton checkbox personnalisé par le framework.
Bouton Segmenté Existence d'un bouton segmenté soit plusieurs boutons côte à côte. Ils sont généralement utilisés pour faire office de checkbox ou de bouton radio sur iOS.
Interrupteur Existence d'un composant correspondant au Switch d’iOS.
Boite de sélection (Select) Le framework gère les boites de sélection et leur donne le visuel de celles que l'on peut rencontrer dans iOS ou Android.
Curseur (Slider) Existence d'un composant slider.
Zone de texte une ligne (Text input) Existence d'un composant de champ de texte ayant un visuel proche de ceux d'iOS et Android.
Zone de texte multi ligne (Textarea) Existence d'un composant de champ de texte multiligne ayant un visuel proche de ceux d'iOS et Android.
Boite de sélection de date (date picker) Existence d'un composant permettant la sélection d'une date tel que le picker d'iOS ou le calen-drier d'Android.
CRITÈRE IOS ANDROID
Bouton radio
44
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©
Checkbox
Bouton Segmenté
Interrupteur
Boite de sélection (Select)
Zone de texte une ligne (Text input)
Zone de texte multi ligne (Textarea)
45
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©
Boite de sélection de date (date picker)
Disponibilité des fenêtres pop up par framework
CRITÈRE TERMINOLOGIE
Fenêtre d'alerte paramétrable Existence d'un composant permettant de créer une fenêtre d'alerte et d'en configurer le titre et le message.
Fenêtre de dialogue (avec boutons) Existence d'un composant permettant de créer une fenêtre de dialogue et d'en configurer le titre, le message et les boutons.
Fenêtre de popup complètement paramé-trable (vue modale)
Existence d'un composant permettant de créer un pop up entièrement configurable.
CRITÈRE IOS ANDROID
Fenêtre d'alerte paramétrable
Fenêtre de dialogue (avec boutons)
46
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©
Thèmes disponibles par framework
Disponibilité des évènements par framework
Disponibilité des animations de transition de page par framework
CRITÈRE TERMINOLOGIE
IOS Le framework fournit un thème permettant d'imiter le visuel des applications iOS.
Android Le framework fournit un thème permettant d'imiter le visuel des applications Android.
Autres Le framework fournit un ou des thèmes cohérents n'étant ni des thèmes iOS ni des thèmes Android même si souvent ils s'en rapprochent d'une manière ou d'une autre.
CRITÈRE TERMINOLOGIE
Taphold Le framework permet d'utiliser l’événement taphold qui se déclenche lorsque l'utilisateur main-tient son doigt sur l'écran pendant quelques secondes.
Double tap Le framework permet d'utiliser l’événement Double tap qui se déclenche lorsque l'utilisateur enchaine rapidement deux tap sur l'écran.
Pinch, stretch Le framework permet d'utiliser l’événement Pinch qui se déclenche lorsque l'utilisateur pose deux doigts sur l'écran et les rapproche ou les écarte.
Swipe Le framework permet d'utiliser l’événement Swipe qui se déclenche lorsque l'utilisateur pose son doigt sur l'écran et le fait glisser d'un côté ou de l'autre.
Rotation Le framework permet d'utiliser l’événement Rotation qui se déclenche lorsque l'utilisateur pose deux doigts sur l'écran et effectue une rotation.
CRITÈRE TERMINOLOGIE
Slide La page un est collée côte à côte avec la page 2. Seule la page un est visible à l'écran. Lors de l'animation, les deux pages coulissent en même temps sur le côté jusqu'à ce que la page 2 soit en plein écran.
Fade La page un est au-dessus de l'autre et devient peu à peu transparente laissant apparaître la seconde.
Flip Les 2 pages sont dos à dos, les 2 page se retournent simultanément par le côté.
Pop La 2ieme page apparaît en effectuant un zoom depuis le milieu de la page.
47
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©
Disponibilité de fonctionnalités concernant la gestion
des données par framework
CRITÈRE TERMINOLOGIE
Xml-rpc ou Json-rpc Le framework offre une méthode pour communiquer avec XML-RPC ou JSON-RPC.
Json-p Le framework offre une méthode pour communiquer avec JSON-P.
Yql Le framework offre la possibilité d'utiliser le Yahoo Query Language.
Websql (sqlite) Le framework offre la possibilité d'utiliser une base de données sur le terminal. Généralement Websql ou IndexDB.
Localstorage Le framework offre la possibilité d'utiliser le localstorage du navigateur.
Comet Le framework offre la possibilité d'utiliser le push de données grâce à Comet.
Web socket Le framework offre la possibilité d'utiliser le push de données grâce aux web sockets.
48
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©
11.
Annexe 2 : Méthodologie
Pour les tests sur les navigateurs nous avons utilisé une tablette Samsung
galaxy 10.1, un Acer liquid metal S120 et un iPhone 4.
Les informations contenues dans ce document ont été trouvées sur
Internet, dans la documentation des solutions, via leurs outils de
support ou en utilisant les solutions. L’évaluation de la popularité a été
estimée en prenant en compte la densité d’utilisation de leurs outils
de communication et leur réputation sur internet (Google et Vrank
principalement).
49
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©
Web/CMSUsines
logicielles
12.
À propos de Netapsys
Netapsys est une société d’ingénierie informatique spécialiste des
nouvelles technologies (Java J2EE, Microsoft .NET, PHP, Javascript, ...).
Fondée en 2004 par deux experts des nouvelles technologies, Netapsys
a développé et cultive un savoir-faire unique de production logicielle.
S’inscrivant dans un principe d’amélioration continue, Netapsys capitalise
à la fois sur les hommes et sur un outillage avancé d’intégration continue
et de mesure permanente de la qualité de ses développements.
La société s’appuie sur sa capacité d’écoute et sur une veille
technologique de pointe pour apporter à ses clients PME, grands comptes
et services publics une prise en charge clés en main de leurs projets
applicatifs, ou de l’évolution de leur système d’information.
Netapsys vous accompagne sur toutes les solutions technologiques
créatrices de valeur pour les entreprises et institutions :
Business
Intelligence E-commerce Collaboratif
Ingénierie logicielle
GED
Mobilité
50
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©
Présente à Paris, Nantes, Lyon, Strasbourg et Madagascar, Netapsys
compte 350 collaborateurs et a réalisé en 2013 un chiffre d’affaires de
22 millions d’euros. Si vous souhaitez en savoir plus, ou tout simplement
nous rencontrer, n’hésitez pas à nous contacter contact@netapsys.fr.
Retrouvez également toute l’actualité de Netapsys sur notre site internet
www.netapsys.fr.
Netapsys Atlantique
Netapsys Rhône-Alpes
Netapsys Grand Est
Netapsys Madagascar
Netapsys Conseil
124-126, rue de Provence
75008 Paris
Tél. : +33(0)1 70 64 27 33
17, rue Sanlecque
44000 Nantes
Tél. : +33(0)2 40 89 82 09
18, rue Bourgelat
69002 Lyon
Tél. : +33(0)4 72 16 88 88
11, rue de la Haye
Espace Européen de l’Entreprise
67300 Schiltigheim - Strasbourg
Tél. : +33(0)3 68 00 17 58
Porte B22, Immeuble ARO Ampefiloha
101 Antananarivo
Tél : +261 20 22 552 99
contact@netapsys.fr
www.netapsys.fr
blog.netapsys.fr
top related