vendredi 4 septembre 2015

Développer votre application mobile hybride rapidement avec Ionic

Ionic permet de développer des applications hybrides à destination des différents store (Apple Store, Play Store,..).

Une application hybride c'est quoi?

Il s'agit d'applications basées sur des langages communs entre toutes les plateformes, les langages Web: HTML5, CSS3, Javascript.

Une application hybride, pour Android ou iPhone, sera donc construite sur ces technologies standards, connues et exécutées par tous les smartphones du marché.
Nous évitons donc la dépendance à une plateforme spécifique, avec un code exécutable partout! 
cela induit une réduction du temps de développement (donc du coût aussi) ainsi qu’une facilité de maintenance.

Certaines possibilités sont réalisées en code natif pour accéder aux fonctions avancées du téléphone (appareil photo, notifications Push, accés aux fichiers multimédia), rendues accessibles par des « ponts » entre la partie native et la partie hybride. 
C'est la librairie Cordova qui s'occupe de faire l'interfaçage entre le javascript et le natif.

Il existe maintenant de nombreux frameworks pour développer des applications hybrides:

  • jQuery Mobile
  • Intel XDK
  • Appcelerator Titanium
  • Sencha Touch
  • Kendo UI
  • Onsen UI
  • Famous

Mais Ionic est le plus populaire et abouti actuellement.
Et, en plus, il est open source!

Présentation de Ionic

Ionic est un framework Javascript, HTML5 et CSS3 qui utilise d'autres outils avancés comme SASS pour compiler les styles, Cordova pour communiquer avec les fonctions natives des téléphones et AngularJS comme coeur pour permettre d'écrire rapidement et proprement du code Javascript.

Créé en 2013 par 3 américains de la société Drifty, la première version beta est sorti en Mars 2014 et la release 1.0 en Mai 2015 (actuellement en 1.1).
Trés vite l'engouement est là et le framework vient combler un manque du marché. La société fera 2 levée de fonds de 1M$ en Mars 2014 et 2.6M$ en Avril 2015, signes que le framework est là pour durer dans le temps.

Le framework met à disposition de nombreux composants prêt à l'emploi grâce à l'utilisation des 'directives' d'AngularJS qui s'adaptent graphiquement automatiquement au terminal qui l'affiche. Par exemple les onglets sont affichés en bas sur Iphone et en haut sur Android:


 

Il est bien sur possible de modifier le style de l'application à sa guise.

L'écosystème

En plus du framework, Ionic dispose d'un véritable écosystéme qui facilite et améliore grandement le travail des développeurs.

Le CLI (Command Line Interface) met à disposition de nombreuses commandes comme:

  • ionic start MySideMenuApp sidemenu  > pour démarrer un nouveau projet sur la base d'un des templates fournis.
  • ionic resources  > pour créer les icônes et splashscreens de l'application.
  • ionic serve  > pour tester son application dans son navigateur avec reload automatique de la page quand on modifi le code.
  • ionic emulate ios  > pour tester son application sur un émulateur instéllé sur son poste.
  • ionic run android  > pour tester son application directement sur son smartphone branché en USB.
  • ...

D'autre services sont disponibles:

ionic View: Permet de faire tester son application à ses amis, clients,.. sur leur smartphone sans passer par le passage aux stores.

Ionic Creator: Pour démarrer rapidement une interface en drag and drop et la télécharger ensuite.

Ionic Lab: Permet de voir/comparer le rendu Android et Iphone cote à cote sur la même page.

Ionic Market: Met à disposition de la communauté des thémes/plugins/starters/.. Ionic notés gratuits ou payants.

ngCordova: Surcouche de Cordova qui facilite son utilisation dans l'environnement AngularJS.

Tout ces éléments sont des raisons de son succés et de sa communauté trés active.
Et l'on peut noter que Ionic bénificie, par extension, de tout les plugins (UI-Router,..) de la communauté AngularJS puisqu'il est développé avec.

Le futur

Angular 2 va arriver début 2016 et l'équipe de Ionic travaille déjà, en collaboration avec celle d'Angular, sur la version 2 de Ionic. 
Elle communique déjà sur cette nouvelle monture:
http://blog.ionic.io/angular-2-ionic/
http://blog.ionic.io/angular-2-series-introduction/


On peut déjà présager que Ionic 2 sera encore plus performant et populaire que la première version.


Exemple d'application sur les stores

De trés nombreuses application Ionic sont déjà disponibles dans les stores.

En voici quelque une:
Untappd (disponible sur 4 stores)
Mallzee (disponible sur 2 stores)
Cookers (disponible sur 3 stores)
Sworkit (disponible sur 3 stores)
Justwatch (disponible sur 2 stores)

Plus d'exemples:
http://showcase.ionicframework.com/