Comment je me simplifie la vie en dev mobile

L’écart de performance qui se réduit, le côté pratique, la communauté en expansion sont autant de paramètres qui font que j’utilise fréquemment Cordova pour mes dév mobiles « simples ». Et mon workflow me simplifie bien la vie !

Mes bonnes pratiques

Lors de mes premiers developpements sur Cordova, je développais tout au sein du dossier `www`. Même si au final, les sources compilées / concaténées étaient utilisées, cela grossissait fortement le poids de l’app. Je ne parles même pas du dossier node_modules, parcouru et packagé par Cordova à chaque build…

Erreur de débutant.

Le `www` ne contient que le strict nécesaire

Du coup, dès la création du projet avec

je crée un dossier spécifique pour mes sources « d’origine ».  Je le nomme généralement ‘app’, mais ‘src’ ca marche très bien aussi 🙂

Dans ce dossier, on retrouve généralement :

  • assets (index.html, fonts, images, fichiers de langues…) qui sont copiés au build.
  • styles (.css, .scss, .less, .styl etc.) compilés / concaténés dans `www` au build.
  • scripts (.js, .coffee etc.) compilés / concaténés dans `www` au build.
  • bower_components: tout le souk créé / géré par bower
  • node_modules: tout le souk créé / géré par npm
  • partials / templates (.html, .jade etc) compilés en html dans `www` au build

Du coup, je me retrouve un dossier `www` propre. Les assets sont recopiés dans leurs dossiers respectifs, les feuilles de style sont compilées (si besoin) et minifiées / concaténées dans un dossier styles (ou css, ca dépend), idem pour les scripts (dossier scripts ou js).

Au build, Cordova prend le dossier www, et fait le tri dans le reste, ne prenant que ce dont il a besoin (hooks, plugins, platforms…), gardant un poids d’appli raisonnable.

Utiliser un task runner

Je n’apporterai pas ici d’eau au moulin de la gué-guerre entre les différents task runners, chacun a ses qualités et ses défauts, et le meilleur est celui qui correspond à votre besoin !

Pas mal adepte de Gulp, je me suis mis depuis peu à Brunch , après avoir collaboré au projet Open Source Cozy Cloud, que je vous conseille au passage 🙂

A mon sens moins verbeux que les autres, et malgré des termes et une organisation déroutants au premier abord, l’outil est rapide et puissant, et répond parfaitement aux besoins découlant des bonnes pratiques ci-dessus. Je ne rentrerai pas dans les détails de ma config ici, mais de multiples templates sont disponibles.

Du coup,

et je ne me soucie plus du passage `app`-> `www`.

Tester rapidement

Les navigateurs

L’application Cordova n’est finalement qu’une application Web, encapsulée. On peut donc facilement la tester dans un navigateur. Généralement, Google Chrome ou Safari donnent des résultats proches des navigateurs Android / iOS. De nombreux outils existent pour nous permettre de tester notre application en mode ‘responsive’ et de voir l’adaptation sur les différents périphériques.

Le live-reload

Déjà largement utilisé en développement web classique, le live-reload est un life saver dont on peut difficilement se passer maintenant. Même si Cordova dispose de commandes pour cela (serve, par exemple), j’utilise personnellement Ionic, basant mes applications sur AngularJS. Ce framework est fluide, et se base sur cordova, donc les commandes CLI sont sensiblement les mêmes (ionic create, ionic serve / run / emulate, etc.). Cela étant, Ionic dispose je trouve d’une plus grande variété d’options, notamment depuis les dernières mises à jour.

Avec

Ionic m’ouvre une fenêtre comparative des rendus iOS et Android, deux colonnes côte-à-côte, chacune avec un fonctionnement indépendant.

Vue Ionic Lab

Vue Ionic Lab

En revenant sur la page principale, généralement http://localhost:8100, on peut naviguer sur son application, en disposant du live-reload (-l), de l’affichage des logs console (-c) et serveur (-s).

Le cas des plugins

LE problème avec Cordova, c’est qu’on est vite limité si on se cantonne au « web only ». Rapidement, le besoin d’utiliser les fonctions du device apparaîssent, avec leur lot de soucis lors des tests. Car, évidemment, les navigateurs ne peuvent pas exécuter les actions de type « vibreur » ou « son » à la sauce cordova. On risque donc de se retrouver face à un cas extrèment pénible et souvent bien connu, la répétition à outrance du

par exemple, permettant de compiler et lancer l’appli sur le device final / l’émulateur. De fait, les plugins sont fonctionnels, mais le process est long et répétitif. Même si le build ne prend qu’une dizaine de secondes sur une machine performante, la productivité est ralentie.

Là encore, j’appele Ionic à la rescousse. Grâce à

Ionic modifie de lui-même le fichier `config.xml` de notre projet, adaptant la balise

et lui indiquant l’adresse du serveur local, avec le live-reload activé. Pas d’inquiétude pour la suite, la modification est automatiquement annulée en fin de process. On retrouve alors une productivité digne de ce nom, la moindre modification sur les sources étant repliquée sur le device / l’émulateur.

Au passage, concernant Android, je ne peux que vous conseiller d’utiliser GenyMotion en lieu et place de l’émulateur traditionnel. La version gratuite est efficace et souvent suffisante pour des tests rapides.

Si, toutefois, le livereload ne se faisait pas, assurez-vous qu’Ionic utilise la même interface / IP que votre emulateur / device, en tapant

 Débugger

Avec les logs console et serveur retranscrits par Ionic, on dispose souvent de pas mal d’informations. Toutefois, il arrive d’avoir besoin de débugger l’application qui tourne directement sur le périphérique (soucis css par exemple).

Pas de souci: Android et iOS disposent tous deux de la fonctionnalité, par le biais de leur navigateur respectif, Chrome et Safari.

Android

Une fois le débug USB autorisé sur le périphérique et l’application lancée, il suffit d’ouvrir Chrome et de taper

Le périphérique devrait apparaître, avec un lien « inspect ». L’inspecteur d’élément se comporte comme sur une page Web classique: survol des éléments, modifications de style, etc…

USB debug Android

USB debug Android

iOS

Sur un périphérique iOS, il faut activer l’inspecteur Web dans les options avancées Safari. Sur le Safari « desktop » ensuite, activer l’affichage des outils de développement (Préférences -> Avancées -> Afficher le menu Développement…)

Une fois le périphérique connecté,il devrait apparaître dans le menu « Développement ». Lorsque l’application est lancée, elle apparaît dans le sous-menu.

iOS Safari Inspecteur Web

iOS Safari Inspecteur Web

Versionning

Et le versionning dans tout ca ? C’est tout aussi important qu’un workflow efficace. Comme beaucoup, je ne versionne jamais les dossiers node_modules ou bower_components, qui peuvent être réinstallés en CLI grâce au package.json et au bower.json.

Je ne versionne généralement pas non plus le dossier `www`, qui peut être intégralement recompilé / recréé via le dossier `app` et brunch.

Enfin, je ne versionne pas les plugins de cordova. N’ayant encore pas trouvé d’outil performant du type « package.json » pour garder une trace des plugins installés, j’ai pris l’habitude de créer un script `init.sh` dans lequel je rentre les `cordova plugin add xxxxxx` utilisés, et que j’exécute après le clonage du dépôt.

On pourrait aller plus loin en ne versionnant pas les dossiers de build dans chacune des plateforme installée, mais je ne pousse pas si loin.

En résumé

Quand tout marche bien, la modification de fichier(s) source dans mon editeur entraîne son (leur) traîtement immédiat par Brunch, le task runner. Dans la foulée, Ionic détecte un changement dans le dossier `www`et les modifications sont répliquées directement dans mon navigateur / mon émulateur / mon périphérique.

Workflow magnifiquement représenté dans l’infographie suivante 🙂

Mon workflow dev mobile

Mon workflow dev mobile

Le gain de temps est non négligeable. Je suis certain que des choses pourraient être modifiées et / ou améliorées, aussi n’hésitez pas à commenter !

1 comment

  • nbeydoon

    Merci pour l’article, je viens d’apprendre comment debug sur ios et ton idée de séparé completement src est cool aussi, et sa facilite pas mal de chose

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *