Ionic: c’est quoi ?

Ionic est un (jeune) framework frontend open source permettant le développement d’applications mobiles hybrides en HTML5, particulièrement optimisé pour être utilisé avec AngularJS.

 

Petit rappel sur les différentes technos mobiles:

Différents type de frameworks:

• Web Mobile: site web optimisé mobile et accès par le navigateur du téléphone (même si certains sont aussi hybrides avec la possibilité de packager avec PhoneGap/Cordova), exemples:
  • JQuery Mobile
  • Kendo UI
  • Sencha Touch
• Hybride: application HTML5 embarquée dans une application native avec une webview, exemple:
  • Phonegap & dérivés ← IONIC (Application avec WebView et HTML embarqué dans le binaire)
• Autres frameworks: Cross platform 2 native, exemples:
  • Titanium
  • Xamarin

Et Ionic dans tout ça ?

Ionic s’appuie sur PhoneGap/Cordova comme base, s’architecture sur AngularJS et permet de développer avec Javascript, HTML5 et CSS/Sass.
Il permet le développement d’applications natives, visuellement attractives par défaut avec des interfaces graphiques unifiées entre les différentes plate-formes.

Un des avantages majeurs d’utiliser une technologie hybride est le gain en temps de développement. Mais cela est souvent “acceptable” uniquement si les performances ne sont pas prioritaires, si l’application ne nécessite pas ou peu d’accès aux ressources bas-niveau du device (bien que de plus en plus de plugins existent pour cela désormais).

Quelques points forts:

• Plateforme open source (licence MIT)
• Framework UI HTML5 CSS3 / AngularJs (MVC)
• Outils préconfiguré: Gulp, Sass, Bower, etc.
• Les composants UI sont des directives AngularJS
• Quantité intéressantes de widgets mobiles et événements de gestures
• UI unifiée entre les différentes plate-formes
• Bridge to Native APIs (plugins), exemple: notification avec Pushwoosh

Quelques inconvénients:

• UI unifié (aussi ;-)
• Encore en beta, jeune projet (mais prometteur)
• Pas d’accès total à l’API hardware
• Plus lent (que natif)
• Packaging et déploiement (signature des binaires)

Notre expérience sur Ionic

Habitués aux développements sur les technologies mobiles natives, nous avons du tout de même faire le choix d’utiliser une technologie hybride dans le cadre de certains de nos projets. De par nos expériences avec AngularJS en ce qui concernait le développement d’application web, nous avons été amenés naturellement vers Ionic.

Les projets sur lesquels nous avons utilisé Ionic se prêtaient bien à ce type de technologie: peu d’accès hardware, UI simple et épurée, interfaçage avec une serveur disposant d’une API REST, peu de stockage de données localement sur le device. 

Nous avons aussi intégré facilement un service de notification PushWoosh pour iOs & Android.

Nous avons développé sous IntelliJ IDEA 13 mais la prochaine version Intellij IDEA 14 que nous avons testé en béta supporte déjà Ionic via le plugin http://plugins.jetbrains.com/plugin/7436?pr=idea (d’ailleurs pour rappel KeepCore organise un atelier à NOVAE de présentation d’IntelliJ le 16/12/2014 à Cap Omega ;-).

Depuis pas mal de temps nous avions suivi les évolutions de Ionic et étions donc inscrits pour un accès à l’outil Ionic Creator sur lequel l’équipe d’Ionic travaillait.
C’est donc avec beaucoup d’enthousiasme que nous avons testé cet outil à la réception de notre invitation la semaine dernière (Update: Ionic Creator est désormais ouvert à tous). 

Ionic Creator beta

Ionic permet de créer des projets soit vides soit à partir de templates (application avec onglets, side menus).

Ionic Creator permet de créer le template de l’application. Creator ne permet pas de coder mais bien de réaliser les différentes parties de l’UI ainsi que les transitions entre les différentes vues (dans une certaine mesure). C’est un éditeur WISIWIG (What I See Is What I Get ;-) pour Ionic et il permet l’édition et la sauvegarde online à la Google Drive (sauvegarde automatique en temps réél).

Description de l’outil

Divisé comme un IDE classique, à gauche les différentes pages du projet représentées par un arbre contenant la hiérarchie des composants. En dessous, l’ensemble des widgets disponibles. Au centre l’UI où l’on peut interagir avec les composants, faire du D&D. A droite les propriétés de l’objet sélectionné.

Dans le bandeau, un menu de liste de projet et le switch entre le mode édition et un mode preview. 

L’arborescence des pages

Représente hiérarchiquement les différentes pages de notre template, et leurs composants.

Les widgets

Donne accès aux widgets du Framework Ionic, on peut effectuer un Drag&Drop vers la page d’édition pour en rajouter à notre interface. Les conteneurs et le système de grille d’Ionic ne semble pas encore supportés.

La page d’édition

Affiche la page sélectionné.
La page permet la sélection des éléments ainsi que leur déplacemeent par Drag&Drop.

Les propriétés

En fonction du d’élément sélectionné, permet d’éditer ses propriétés, le rendu s’effectue en live dans la page d’édition:

Certains contrôles disposent d’un éditeur HTML embarqué: 

Le mode preview

Le mode preview permet de tester le rendu final, ainsi que les intéractions entre les différentes pages. 

La liste des projets

Un menu sur la droite permet l’affichage de la liste des projets, et permet leur gestion.

Utilisation du template

Le téléchargement en local du projet se réalise simplement par l’exécution d’une commande:

$ ionic start [appName] creator:5528e1a09088

Une fois le template terminé, on peut en une ligne de commande générer sur notre machine en local le projet en s’appuyant sur notre template. En regardant de plus près le projet généré, on se rend compte que pour l’instant le creator génère un unique fichier HTML contenant à la fois tous les templates HTLM des différentes vues de notre application, et le code javascript de l’application AngularJS. On peut espérer que dans la version finale tout soit bien découpé dans différent templates HTML et dans des fichiers javascript séparés, comme pour les projets template d’Ionic...

Quelques bugs de jeunesse

Lors de ces quelques tests que nous avons pu mener, nous avons constaté quelques bugs, certains assez génant, et justifiant le statut de “béta” de l’outil. Parfois des widgets perdent leurs icônes, parfois l’interface semble bloquée et le drag&drop ne fonctionne plus, parfois la page devient noire... La plupart du temps tout revient à la normale en rafraichissant la page.

Pour aller un peu plus loin...

Mais comment faire un preview sur tablette ? Le creator en effet ne permet pour l’instant que l’édition en mode portrait sur le format téléphone, cependant une api REST est utilisée lorsque l’on génère un projet à partir du remplate de ionic Creator, celle-ci renvoie alors le fichier HTML principal du template contenant toutes les infos. On a donc créé un outil très simple avec NodeJS permettant d’avoir une preview en Live sur au format tablette “paysage”. Les sources sont disponibles sur GitHub : https://github.com/patriceo/ionic-creator-preview/ , mais il n’est pas garanti que celui-ci fonctionne indéfiniment car l’équipe d’Ionic pourrait très bien modifier le fonctionnement de Creator d’ici la version stable. 

Conclusions

L’outil est prometteur. Il semble interessant pour rapidement réaliser un template pour Ionic mais également les mockups dynamique d’une application mobile.
Nous avons bien entendu hâte de disposer de la version finale, stable, pour nos prochains projets Ionic !

N’hésitez pas à nous contacter pour plus d’informations et/ou commenter si vous avez également des retours d’expériences à partager sur Creator ou Ionic ;-)