Ce billet fait un bilan des impressions sur phonegap et sencha touch. Dans un précédent billet nous avons vu comment utiliser PhoneGap dans le cadre d’un projet multiplateforme. Pour rappel PhoneGap permet de construire des applications hybrides (mixant code html et natif) ayant accès aux fonctionnalités natives du téléphone, mais ce n’est en aucun cas un framework permettant de structurer l’interface graphique (la partie web). Il y a plusieurs solutions pour parvenir à ce but : Sencha Touch, Appcelerator, JQueryMobile, JQTouch, Codename, etc. Nous allons voir dans cet article comment utiliser Sencha Touch avec PhoneGap. La combinaison peut en effet sembler intéressante: on a d’une part un outil pour construire l’interface web (Sencha) et d’autre part un outil permettant l’accès aux éléments natifs (PhoneGap). Le résultat devrait donner une application fortement mutualisée entre les différentes plateformes.
Présentation de Sencha Touch
Sencha Touch est disponible selon plusieurs licences, il faut choisir celle-ci en fonction de son utilisation. Cette librairie est disponible gratuitement pour la construction d’applications mobiles (si moins de 5000 devices), c’est la partie centrale de l’offre Sencha autour de laquelle gravite les produits payants tels que Sencha Architect et Sencha Complete. Le premier peut être considéré comme un IDE WYSIWYG et le second en est une version évoluée contenant un plugin Eclipse pour éditer le code source. Ce framework comporte plusieurs points intéressants:
- Utilisation du design pattern MVC,
- Utilisation de composants pour la construction des vues,
- Documentation claire et bien fournie,
- Le SDK embarque le nécessaire : exécutable, documentation, exemples (on peut travailler dans le train sans problème, j’ai testé pour vous),
- L’utilisation de profiles permet de personnaliser l’application en fonction de son contexte,
- Plusieurs modes de Packaging : 1. Mode pour les applications natives, disponible pour iOS et Android (pour iOS il faut au moins un Mac pour créer le certificat de signature et le simulateur ne peut être utilisé que sur un Mac équipé du SDK iOS),
- Mode permettant de lancer l’application sans serveur web
- Accès aux API natives des devices : orientation, appareil photo, notification, état de la connexion réseau.
L’accès aux API natives via Sencha limite l’intérêt de sa combinaison avec PhoneGap. Toutefois PhoneGap conserve son intérêt soit pour des questions de performances (écriture de code natif), soit pour profiter du système de plugin, ou afin de déployer l’application sur plusieurs plateformes (autre que iOS et Android, les seules supportées par Sencha). Nous allons maintenant voir une implémentation possible.
Initialisation du projet PhoneGap/Sencha
Il faut tout d’abord télécharger le SDK Sencha Touch et les outils du SDK. Le SDK doit être dézippé et accessible depuis un serveur web, tandis que les outils doivent être installés via l’exécutable téléchargé. On passe ensuite à la création du projet. En ligne de commandes placez-vous dans le répertoire bin du SDK Sencha, et créez votre projet de la façon suivante :
sencha app create Nom-de-votre-Projet chemin-de-votre-application all
Pour pouvoir profiter de PhoneGap, on va copier les fichiers cordova-2.1.0-android.js, cordova-2.1.0-ios.js et** cordova-loader.js** de notre précédent billet dans le répertoire de travail. On obtient alors l’arborescence suivante : 
Si le répertoire build n’existe pas créez-le. Nous allons ensuite configurer le projet pour pouvoir utiliser ces fichiers. Pour cela il faut modifier le fichier app.json pour :
- Avoir le chargement du fichier cordova-loader.js au lancement de l’application.
- Inclure les fichiers cordova-2.1.0-android.js et cordova-2.1.0-ios.js dans le packaging de l’application.
- Configurer le packaging de l’application.
C’est le “packaging build path” qui nous intéresse particulièrement. Nous générerons le contenu grâce à la commande sencha app build package et l’utiliserons comme source web pour nos applications natives. Plusieurs possibilités sont offertes pour exploiter ces sources dans nos projets d’applications natives :
- Sous modules git,
- Utilisation des svn Externals,
- Lien symbolique,
- Copie de répertoire.
De mon côté j’ai choisi d’utiliser des liens symboliques avec l’arborescence suivante : 
Le répertoire www contient les sources web, les répertoires iOS et Android, les projets spécifiques à ces plateformes. Il nous reste à créer les projets PhoneGap pour Android et iOS à ces emplacements, pour cela je vous renvoie au précédent billet. Une fois les projets créés, j’ai choisi d’effectuer un lien symbolique entre :
- Les répertoires package/www et package/iOS/www
- Les répertoires package/www et package/Android/assets/www
On peut ainsi avoir dans un seul repository :
- Le code de l’application Sencha
- Le code des applications Android et iOS
Afin d’alléger ce repository, on peut choisir de positionner dans le fichier .gitignore le contenu du package package/www. En effet comme indiqué précédemment, il suffit d’exécuter la commande sencha app build package à la racine du projet Sencha pour regénérer le contenu de ce package. On peut tester l’intégration avec PhoneGap en utilisant le code suivant dans la page index.html: //
Démonstration des possibilités de Sencha
Afin de se faire une idée plus précise de Sencha, je vous propose de se servir de l’exemple kitchensink fournit dans le SDK de Sencha (répertoire examples/kitchensink du SDK). Pour l’utiliser avec PhoneGap, on va remplacer nos répertoires app et resources par ceux de cet exemple. Puis on modifiera le fichier app.js pour avoir : // On remarque que cet exemple utilise les profiles. Ils permettent de définir les classes à utiliser dans un contexte précis, on peut ainsi avoir une ergonomie différente entre des téléphones et des tablettes et/ou entre Android et iOS. Il ne nous reste plus qu’à reconstruire le package web et lancer notre exemple via nos projets Android et iOS.
Tests et ressentis utilisateur…
J’ai réalisé les tests avec les périphériques suivant:
- iPhone 4S avec iOS6
- Un téléphone Google Samsung Nexus S avec Android 4.1
- Une tablette Motorola Xoom avec Android 3.2
Au final, malgré les possibilités de Sencha Touch je suis assez déçu par le rendu et les performances. Quel que soit le matériel testé les transitions (passage d’un écran à l’autre) sont lentes, et l’application est peu réactive. Je préconiserais donc Sencha pour un développement rapide et économique, qu’il soit multi-plateforme ou non. Mais en aucun cas pour avoir une application clinquante ou réactive. Voici un exemple de rendu de l’application sur la Xoom: 
Pour aller plus loin..
Vous pouvez effectuer vos propres tests en clonant mon repository. Il vous faudra alors:
- Recréer les liens symbolique pointant vers le répertoire build/package/www
- Créer le répertoire resources/images (le répertoire étant vide, git ne l’a pas commité)
- Avoir installé les outils du SDK.
Mes ressources principales ont été :
- La documentation officielle Sencha.
- Un billet de Robert Dougan (architecte Sencha) sur l’utilisation de PhoneGap avec Sencha.
