Comparatif de frameworks HTML/Javascript pour le développement d'applications mobiles
←
→
Transcription du contenu de la page
Si votre navigateur ne rend pas la page correctement, lisez s'il vous plaît le contenu de la page ci-dessous
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
BLANC
Comparatif de frameworks
LIVRE
HTML/Javascript pour
le développement
d’applications mobiles
Benoit Desnos
Responsable de l’offre Mobile
Benoit.desnos@netapsys.fr
02
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
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©
03
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
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©
04
1.
Introduction
Le multiplateforme
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.
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©
05
Les applications mobiles en HTML/Javascript
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.
Objectifs du livre blanc
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
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©
06
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.
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©
07
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
Les « natifs like »
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.
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©
08
Sencha Touch est la version mobile du bien connu ExtJs. C’est
Sencha Touch
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.
CRITÈRE DESCRIPTION
URL http://www.sencha.com/products/touch/
Communauté facebook.com
sencha.com/forum/
Démonstration http://dev.sencha.com/deploy/touch/examples/kitchensink/
Version V 1.1.1
Langage Javascript
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©
09
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
On ne présente plus jQuery, et sa version mobile a déjà fait de nombreux
JQuery mobile é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.
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©
10
CRITÈRE DESCRIPTION
URL http://jquerymobile.com/
Communauté forum.jquery.com/jquery-mobile
facebook.com
twitter.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
Dojo mobile 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
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©11
il suffira de faire :
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.org
chrism.dojotoolkit.org/android
chrism.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
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©12
GWT Mobile est l’ensemble de trois éléments. GWT Mobile UI est
GWTMobile 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/
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©13
Produits associés GWT
Formule Apache v2
Prix Gratuit
Les pro-Apple
Les frameworks de cette partie sont focalisés sur la plateforme iOS et
l’esthétique iOS.
Chocolate chip UI ou « Chui » est un framework orienté mobile. Il
ChocolateChip-ui 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 , ou
encore . 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).
CRITÈRE DESCRIPTION
URL chocolatechip-ui.com
Version V1.0
Langage WAML
Spécialité mobile Oui
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©14
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
Webapp.net est un framework Javascript léger au fonctionnement
Webapp-net 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.
CRITÈRE DESCRIPTION
URL webapp-net.com
Version twitter.com
forums.chrilith.com
Langage demo.webapp-net.com
Spécialité mobile V0.5.2
Licence HTML
Open Source Oui
Popularité BSD
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©15
Documentation Oui
Outils de support Moyenne
Formation Le livre
Produits associés demo.qooxdoo.org
Formule BSD
Prix Gratuit
Les non natifs
Ces Frameworks ne recherchent pas à obtenir un aspect natif.
Le projet a démarré début 2009 à Orange Labs. Depuis le 17 juin
Wink toolkit 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.).
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©16
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
DhtmlX application web mobile fonctionnelle. La stratégie de ce framework est
de fournir des composants compatibles avec DHTMLX suite (la version
Touch
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
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©17
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.com
twitter.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.
Qooxdoo 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.
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©18
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.com
forum.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,
The-m-project 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.
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©19
CRITÈRE DESCRIPTION
URL the-m-project.net
Communauté facebook.com
twitter.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
Les minimalistes
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.
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©20
BkRender permet de développer son site en BKML, un langage de balise
BkRender 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.
CRITÈRE DESCRIPTION
URL bkrender.com
Communauté support.bkrender.com/forums
twitter.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.
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©21
Zepto est un petit framework Javascript fonctionnant avec les
Zepto 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).
CRITÈRE DESCRIPTION
URL zeptojs.com
Communauté github.com
twitter.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
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©22
Xui a été créée en 2008 par l’équipe du framework PhoneGap qui avait
Xui 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 ».
CRITÈRE DESCRIPTION
URL xuijs.com
Communauté groups.google.com
github.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
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©23
Les autres
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.
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©24
3.
Langage de programmation
utilisé
Langage de programmation à utiliser pour le développement
CHOCOLATE CHIP UI
SENCHA TOUCH 1
JQUERY MOBILE
THE M PROJECT
DOJO MOBILE
WEBAPP-NET
GWTMOBILE
BKRENDER
QOOXDOO
DHTMLX
WINK
Javascript
Javascript et HTML (ou assimilé)
Java
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©25
4.
Fonctionnalités générales
Fonctionnalités générales par framework
CHOCOLATE CHIP UI
SENCHA TOUCH 1
JQUERY MOBILE
THE M PROJECT
DOJO MOBILE
WEBAPP-NET
GWTMOBILE
BKRENDER
QOOXDOO
DHTMLX
WINK
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
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©26
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
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©27
Élément de navigation par framework
CHOCOLATE CHIP UI
SENCHA TOUCH 1
JQUERY MOBILE
THE M PROJECT
DOJO MOBILE
WEBAPP-NET
GWTMOBILE
BKRENDER
QOOXDOO
DHTMLX
WINK
Onglets (tabs)
Carrousel
Overlays slideup (action sheet, option menu)
Pop over avec liste
Barre de navigation
Barre d’outils
Barre de recherche
Éléments de présentation des données par framework
CHOCOLATE CHIP UI
SENCHA TOUCH 1
JQUERY MOBILE
THE M PROJECT
DOJO MOBILE
WEBAPP-NET
GWTMOBILE
BKRENDER
QOOXDOO
DHTMLX
WINK
Vue scindée (split view)
Liste simple
Liste groupée
Vue de défilement (Scrollview)
Cartes (map)
Accordéon
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©28
Éléments de formulaire par framework
CHOCOLATE CHIP UI
SENCHA TOUCH 1
JQUERY MOBILE
THE M PROJECT
DOJO MOBILE
WEBAPP-NET
GWTMOBILE
BKRENDER
QOOXDOO
DHTMLX
WINK
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)
Disponibilité des fenêtres pop up par framework
CHOCOLATE CHIP UI
SENCHA TOUCH 1
JQUERY MOBILE
THE M PROJECT
DOJO MOBILE
WEBAPP-NET
GWTMOBILE
BKRENDER
QOOXDOO
DHTMLX
WINK
Fenêtre d'alerte paramétrable
Fenêtre de dialogue (avec boutons)
Fenêtre de popup complètement
paramétrable (vue modale)
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©29
Thèmes disponibles par framework
CHOCOLATE CHIP UI
SENCHA TOUCH 1
JQUERY MOBILE
THE M PROJECT
DOJO MOBILE
WEBAPP-NET
GWTMOBILE
BKRENDER
QOOXDOO
DHTMLX
WINK
iOS
Android
Autres
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©30
6.
Interactivité
Disponibilité des évènements par framework
CHOCOLATE CHIP UI
SENCHA TOUCH 1
JQUERY MOBILE
THE M PROJECT
DOJO MOBILE
WEBAPP-NET
GWTMOBILE
BKRENDER
QOOXDOO
DHTMLX
WINK
Taphold
Double tap
Pinch
Swipe
Rotation
Barre de recherche
Disponibilité des animations de transition par framework
CHOCOLATE CHIP UI
SENCHA TOUCH 1
JQUERY MOBILE
THE M PROJECT
DOJO MOBILE
WEBAPP-NET
GWTMOBILE
BKRENDER
QOOXDOO
DHTMLX
WINK
Slide
Fade
Flip
Pop
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©31
7.
Données
Technologies d’accès aux données distantes par framework
CHOCOLATE CHIP UI
SENCHA TOUCH 1
JQUERY MOBILE
THE M PROJECT
DOJO MOBILE
WEBAPP-NET
GWTMOBILE
BKRENDER
QOOXDOO
DHTMLX
WINK
Xml-rpc ou Json-rpc
Json-p
Yql
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 »
Remarque
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©32
Disponibilité de fonctionnalités concernant la gestion
des données par framework
CHOCOLATE CHIP UI
SENCHA TOUCH 1
JQUERY MOBILE
THE M PROJECT
DOJO MOBILE
WEBAPP-NET
GWTMOBILE
BKRENDER
QOOXDOO
DHTMLX
WINK
Websql (sqlite)
Localstorage
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.
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©33
Disponibilité de fonctionnalités concernant la gestion
des données par framework
CHOCOLATE CHIP UI
SENCHA TOUCH 1
JQUERY MOBILE
THE M PROJECT
DOJO MOBILE
WEBAPP-NET
GWTMOBILE
BKRENDER
QOOXDOO
DHTMLX
WINK
Comet
Web socket
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.
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©34
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.
Compatibilité des frameworks avec les principaux
navigateurs mobiles des plateformes iOS et Android
CHOCOLATE CHIP UI
SENCHA TOUCH 1
JQUERY MOBILE
THE M PROJECT
DOJO MOBILE
WEBAPP-NET
PLATEFORME NAVIGATEUR
GWTMOBILE
BKRENDER
QOOXDOO
DHTMLX
WINK
iOs Natif
Android Natif
Netfront live
Opera mobile
Firefox
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©35
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.
Le cas Opéra Mini
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.
CHOCOLATE CHIP UI
SENCHA TOUCH 1
JQUERY MOBILE
THE M PROJECT
DOJO MOBILE
WEBAPP-NET
PLATEFORME NAVIGATEUR
GWTMOBILE
BKRENDER
QOOXDOO
DHTMLX
WINK
iOs et Android Opéra Mini
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©36
9.
Conclusion
Application mobile
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.
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©37
Site mobile
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.
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©38
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.
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©39
Présentation des frameworks
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
Fonctionnalités générales par frameworks
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.
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©40
Élément de navigation par framework
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 Existence d'un composant permettant d'afficher un menu modal remontant du bas de l'écran.
menu)
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)
Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©Vous pouvez aussi lire
