Pour ceux qui suivent un peu l’actu des applications mobiles hybrides, et plus particulièrement celles qui utilisent la plateforme Cordova / Phonegap, il y a un blog incontournable, celui de Holly Schinsky.
Récemment, nous avons commencé à dispenser des formations AngularJS à OXiane, ainsi que des projets de développement.
Je suis très porté sur le développement mobile, et l’opportunité de développer pour mobile via Angular permet de faire une jonction logique entre deux mondes très proches : le web et le mobile.
Venons-en au fait : que choisir pour designer son application hybride ?
Nous avons choisi un framework mobile encore très jeune, toujours en beta à la date de rédaction, c’est Ionic.
A vrai dire j’avais commencé à designer les écrans avant d’avoir lu ce très bon article de Holly.
Son article expose très bien les qualités de ce framework UI, mais pour apporter ma petite contribution, je dirais que ses points forts sont :
- La réflexion autour d’AngularJS, avec l’utilisation de directives spécifiques en s’appuyant sur des plugins Angular.
- La gestion des états via AngularJS pour afficher ou non un bouton back
- La légèreté du code d’une manière générale (par rapport à un jQuery mobile par exemple).
- Les nombreux widgets qui viennent répondre aux besoins les plus courants d’un designer d’interface mobile : listes, boutons, blocs avec ou sans padding, éléments de type « cards » avec header et footer … etc.
- Un joli menu de type NavigationDrawer Android, très sympa.
- L’utilisation de SASS pour décorer son application suivant sa propre charte graphique.
- L’utilisation d’icônes ionicons basées sur des polices, et donc parfaitement adaptées à des multiples résolutions.
Bon, pour ce qui est de SASS, on pourrait imaginer un mode un peu plus souple, car pour l’instant, il faut modifier un ou plusieurs fichiers livrés avec le framework pour lancer le build de sa CSS finale, c’est très simple, mais lors d’une nouvelle version du framework (et c’est très souvent) il faudra faire une fusion des fichiers … pas top.
Le montage d’une application est très simple et des ressources bien faites permettent de commencer. Ce qui est essentiel pour Ionic, c’est de s’intégrer sur la plateforme Cordova, ce qui permet en quelques lignes de code de préparer un projet et de le lancer sur un device. Une petite page permet de se rendre compte de la facilité d’utilisation. En fait les lignes de commande ionic sont des portages de cordova, qui a évolué depuis quelques versions pour une grande rapidité de déploiement !
Si vous utilisez un émulateur Android GenyMotion, sachez que pour un PC, il est reconnu comme un device, ce qui est très pratique pour lancer la commande « run » de cordova (ou d’ionic).
Avec une simple commande « cordova run android » … et zou !
J’ai trouvé le développement sous SublimeText très rapide, on a aussi bien les outils Angular que les commandes de build Sass.
Autre aspect non négligeable, les premiers tests de fonctionnement peuvent très bien se faire sans serveur ni device ni même émulateur, un simple navigateur fera l’affaire ! (Attention cependant, Firefox n’aime pas le slide menu … pourquoi …)
A priori, les ionicons sont basées sur Icomoon, une bibliothèques d’icones et un outil bien sympa pour générer vos propres icônes au format fonte, en attendant l’arrivée des SVG qui devrait rendre ce système un peu inutile dans pas mal de situations. Pour l’instant, c’est un très bon moyen de personnaliser son appli hybride Ionic !