Comparatif ionic / Kivy

Introduction

Après quelques applications réalisées avec Kivy, je me rends compte des possibilités et des limites de ce Framework pour réaliser des applications mobiles cross-platform. Je me suis orienté vers une technologie en vogue : Cordova, plus précisément ionic.

Remarque : cet article est le « match aller ». Un autre article « match retour » apporte des précisions.

 

Ionic : Description rapide

Ionic est un Framework pour les développeurs de Javascript. L’objectif est de faire un petit serveur web avec des pages HTML et du code JS. Cordova fourni le serveur web qui sera lancé sur mobile et encapsule le code. Les appels JS à destination du device sont interceptés pour être interprétés selon l’OS (Android, iOS, etc).

L’avantage est que beaucoup de développeurs connaissent le trio HTML + JS + CSS.

D’autres Frameworks sont disponibles avec ces technologies, comme jQuery Mobile et à coupler avec une surcouche, comme Backbone.js pour plus de rigueur. Après une tentative infructueuse, j’ai renoncé à me salir d’avantage les mains.

 

Comparatif de l’installation

Avec Kivy, l’installation est rapide sous Linux car Python est déjà installé. Le téléchargement des fichiers SDK d’Android sont assez rapide car Kivy cible ce qu’il faut télécharger. Ma note : 18/20

Avec ionic, l’émulateur est nécessaire et là, il faut prévoir de faire autre chose pendant les téléchargements. Ma note : 15/20

Mon vainqueur : Kivy

 

Editeur de code (ou IDE)

Il est facile de trouver un IDE : Eclipse avec les plugins pour coder en Python ou en HTML/JS/CSS. Ils peuvent cohabiter dans le même workspace sans souci.

Mon vainqueur : ex-equo

Ma note pour les deux : 18/20

 

Documentation et exemples

Kivy a élevé le niveau avec son API très complète disponible sur le site http://kivy.org ainsi que des projets complets open-source sur GitHub.

Malgré tout, ionic n’est pas en reste, avec un grande communauté de développeurs, le site qui présente son API est assez complète. Il faut parfois jongler entre l’API de Cordova et l’API de ionic pour trouver ses petits.

Mon vainqueur : ex-equo

Ma note pour les deux : 18/20

 

Le premier « Hello world »

Le site de Kivy présente les 6 lignes de code nécessaires à ce test basique. Le principe est facile à comprendre. Facile. Ma note : 18/20

Ionic propose de faire une installation d’une application basique en une ligne de commande. Facile à faire (tout est téléchargé et pré-configuré), moins facile à comprendre comment ca fonctionne dans le détail. Ma note : 15/20

Mon vainqueur : Kivy, d’une courte tête

 

Développement d’une application sur un PC

Kivy lance Python directement depuis Eclipse (après une configuration minimale). Les amateurs de Java ne seront pas déçus. Les logs sont récupérés dans la console d’Ecplise, le mode debug fonctionne à merveille (point d’arrêt, avancée pas à pas, consultation des valeurs des variables, etc). L’application Kivy s’ouvre dans une fenêtre à part pour qu’on puisse interagir. Ma note : 18/20

Pour ionic, il faut lancer une commande qui démarre un serveur web (sur un port libre) et qui ouvre le navigateur par défaut. Chrome est préconisé avec le plugin ADT (pour android). Toute interaction se fait alors dans Chrome. L’IDE devient inutile, il ne sert que d’éditeur de texte. Dommage. Je n’ai pas trouvé le moyen de mettre un point d’arrêt, de consulter les valeurs des variables en temps réel. Au moins, la console de Chrome fonctionne. Ma note : 12/20

Mon vainqueur : Kivy

 

Déploiement sur mobile (Android)

Un outil « magique » est associé à Kivy pour faire l’APK : buildozer. Il faut produire un fichier de configuration pour les autorisations d’accès, le nom du package, le splash screen, l’icone, la version, etc. (un fichier de base est généré avec beaucoup de doc, façon « httpd.conf », très facile à comprendre). A mon avis, un atout très fort. Ma note : 18/20

Ionic n’est pas en reste. Il a lui aussi sa ligne de commande avec le fichier XML de configuration. Moins simple qu’avec buildozer quand même. Ma note : 18/20

Le temps de packaging et l’installation sur le smartphone est aussi rapide.

Mon vainqueur : ex-equo (sans compter la configuration)

 

Développements sans appels au device

La puissance de Python permet de faire beaucoup de choses simplement, avec très peu de code. C’est encore une force de Kivy.

Exemples : lecture de fichier XML ou JSON, appels HTTP-GET ou HTTP-POST, manipulation de chaînes de caractères, tableaux, dictionnaires, appels aux serveurs de cartographie (Google maps, Open Street map, BlueMarble), etc…

Le découpage en couches est facile avec l’utilisation de modules et packages Python pour définir les classes. Ma note : 18/20

Pour ionic, le Javascript permet aussi de faire beaucoup sans faire appel à d’autres choses, peut-être avec un peu plus de complexité. Les bibliothèques JS sont très nombreuses pour aller plus vire. Ionic profite des années de développements JS pour le web.

Pour garantir un code maintenable, ionic s’appuie sur Angular, pas trop complexe à utiliser dans un premier temps. Ma note : 18/20

Mon vainqueur : ex-equo

 

Appels aux fonctionnalités du device

Dans cette catégorie, je comprends une base de données (SQLite), le GPS, le vibreur, la caméra, etc.

Selon le cas, Kivy penne à sortir son épingle du jeu. Il faut utiliser des modules complémentaires pour accéder aux spécificités du smartphone. Par exemple, « plyer » permet de faire beaucoup de choses simplement, mais il est encore en cours de développements pour proposer une panoplie complète. La page de support des fonctionnalités selon l’OS montre pas mal de trous. Ma note : 12/20

Testé et fonctionne très bien : Base de données SQLite, jouer un son MP3, prendre une photo, obtenir la position GPS, bouton Back d’Android

Testé et ne fonctionne pas (encore) : Réalité augmentée

Pour ionic, Cordova semble prendre en charge un grand nombre de fonctionnalités. Cette brique est indispensable, même si je ne pense pas qu’elle puisse faire comme une application native. Ma note : 18/20

Testé et fonctionne bien : jouer un son MP3

Mon vainqueur : ionic (il sera certainement plus performant que Kivy dans ce domaine)

 

Design et interface

Avis aux WebDesigners, Kivy est une torture. Pour ceux qui ont fait du CSS, c’est horrible. Le langage KV est obligatoire et rédhibitoire (tellement que je me suis intéressé à d’autres Frameworks). Il faut prévoir ÉNORMÉMENT de temps pour comprendre comment fonctionne le principe d’affichage. L’option est de faire des widgets (composant graphique) simples à composer entre eux pour composer l’écran. Ma note : 4/20

Avec ionic, on reste sur du CSS (presque) classique. En plus, avec les thèmes déjà tout prêts, les WebDesigners retrouvent leurs marques. Ma note : 18/20

Mon vainqueur : ionic, largement en tête

 

Conclusion

Après avoir réalisé une application similaire avec Kivy et ionic (soundbox), je suis encore resté sur ma faim avec ionic. Je pense qu’il faudra que j’utilise SQLite, la position GPS, et d’autres fonctionnalités pour affiner mes notes.

Si on compte les points, voici mon résultat :

  • Installation : Kivy 18/20 ; ionic : 15/20
  • IDE : 18/20 pour les deux
  • Documentation : 18/20 pour les deux
  • Hello World : Kivy : 18/20 ; ionic : 15/20
  • Développement sur PC : Kivy 18/20 ; ionic : 12/20
  • Déploiement sur mobile : 18/20 pour les deux
  • Développements sans appels aux device : 18/20 pour les deux
  • Appels aux fonctionnalités du device : Kivy 12/20 ; ionic : 18/20
  • Design et interface : Kivy 4/20 ; ionic : 18/20

Total : Kivy 142 pts ; ionic : 150 pts

 

Une réflexion au sujet de « Comparatif ionic / Kivy »

  1. Hi!

    Thanks for so cool article! But for me there is still very important question – performance. Could make some comparisons?

    I played around with ionic. The performance is quite poor. I didn’t do any compression or optimization, but from scratch its slow.

    A year has passed :) Did you have some new experience with both of them? Are there some new positive/negative changes? :)

    Many thanks,
    Danil

Laisser un commentaire

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

*

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>