Comparatif ionic / Kivy – match retour

Introduction

Suite à l’article visant à comparer ionic et Kyvi, je suis allé plus loin dans la création d’une application mobile avec ionic (ben oui, je lui ai donné une bonne note, alors j’ai creusé !). Finalement, je vais pouvoir appuyer mes propos sur des exemples concrets, en faisant une deuxième copie d’une application Kivy, mais avec ionic (écrans proches et fonctionnalités similaires).

Pour rappel, le framework ionic part d’une bonne base : utiliser les connaissances d’un développeur web pour faire des applications mobiles. Il s’avère que (à mon avis) Kivy s’en sort mieux, même avec ses points faibles. Voici les notes du match retour, sur 20.

 

Comparatif de l’installation

Notes du match aller : Kivy 18/20 ; ionic : 15/20

Après plusieurs applications créées avec ionic, ces notes ne changent pas. La documentation des débutants servira pour les prochains développements. Je trouve relativement dommage que les fichiers de configuration des plates-formes soient avec le projet. On n’est plus dans le crossplatform (ou « platform independant ») dès le début, mais on va s’arranger avec les plates-formes cibles.

Verdict : Kivy 18/20 ; ionic : 15/20

 

Editeur de code (ou IDE)

Notes du match aller : 18/20 pour les deux

Même avec Eclipse et des plugins (JS, HTML, CSS), je n’ai pas réussi à configurer rapidement l’IDE sur un projet ionic pour me faire gagner plus de temps qu’un simple éditeur de texte avec coloration syntaxique (genre Notepad++). Les recherches de dépendances (F3, CRTL-Clic) ne fonctionnent pas, c’est la cata. Heureusement que les applications sont simples.

Avec Eclipse, les classes Phyton sont reconnues et facilement retrouvées. Il ne manque que l’interprétation du langage kv pour avoir un 20/20.

Verdict : Kivy 18/20 ; ionic : 10/20

 

Documentation et exemples

Notes du match aller : 18/20 pour les deux

Après quelques écueils, je doit reconnaître que la documentation ionic (cordova et ses copains) ne sont pas si facilement applicables. Des exemples et explications sont disponibles, mais il faut mettre la frontale. De longues recherches et tests sont nécessaires pour investiguer sur un terrain inconnu. Gare aux culs de sac.

Verdict : Kivy 18/20 ; ionic : 15/20

 

Le premier « Hello world »

Notes du match aller : Kivy 18/20 ; ionic : 15/20

Attention, si on part avec de mauvaises bases et structuration du code, ca devient vite un gros bordel. Le framework ne cadre pas du tout les composants (Services, Factory, Modèles, etc) : tout peut être dans un seul fichier de 600 ko de code. Pour débuter avec une première application, ces bases sont presque obligatoires (par exemple avec CodeIgniter en PHP, qui est un régal à comparer d’ionic). Je trouve dommage que les exemples « clé en main » soient dépourvus de cette structuration.

Kivy propose plus de contrainte, car il se base sur Python qui défini déjà des packages et des modules (ce qui doit aider grandement Eclipse à retrouver les sources des classes).

Verdict : Kivy 18/20 ; ionic : 12/20

 

Développement d’une application sur un PC

Notes du match aller : Kivy 18/20 ; ionic : 12/20

Pour ce cas, je pense avoir plutôt bien jugé mes notes. Le développement est relativement laborieux avec ionic. Heureusement qu’avec un plugin pour Chrome, on arrive à avoir un rendu potable et avancer dans la création des applications. Les logs sont dans la console Javascript du navigateur, mais il n’y a pas tout. Comparé à Kivy, où tout sort dans la console d’Eclipse, c’est bien moins confortable.

Verdict : Kivy 18/20 ; ionic : 12/20

 

Déploiement sur mobile (Android)

Notes du match aller : 18/20 pour les deux

Avec ionic, on peut profiter du live-reload pour pallier aux problèmes d’utilisation des ressources présentes uniquement sur le device (ex: Base de données SQLite). Le déploiement est facile pour les deux frameworks, même avec une structuration complexe et des fichiers divers.

Verdict : 18/20 pour les deux

 

Développements sans appels au device

Notes du match aller : 18/20 pour les deux

Les développements ionic nécessitent une « boite » simulant le mobile. C’est faisable avec un navigateur comme Chromium et un plugin ;  c’est un peu bricolé. Avec Kivy, c’est une vraie fenêtre de l’OS qui s’ouvre.

Verdict : Kivy 18/20 ; ionic : 15/20

 

Appels aux fonctionnalités du device

Notes du match aller : Kivy 12/20 ; ionic : 18/20

Le désenchantement d’ionic continue lors de développements faisant appel au fonctionnalités du device (GPS, Base de données, caméra, etc.). Il n’est plus possible de se passer d’un device et de tout tester sur le mobile. On arrive aux limites de la magie du crossplatform. Il en fallait bien quelques unes, ce n’est pas du code natif et il n’y a pas de façade pour s’en abstraire (ca commence à arriver sur Kivy).

Verdict : Kivy 12/20 ; ionic : 12/20

 

Design et interface

Notes du match aller : Kivy 4/20 ; ionic : 18/20

Sauf nouveauté coté Kivy, ionic reste très pratique pour les interfaces nécessitant un design très travaillé.

Avec des widgets prédéfinis et réutilisables (et paramétrables), Kivy sort quand même la tête hors de l’eau, sans avoir de solution miracle. Il faut donc prévoir de faire des interfaces simples avec Kivy…

Verdict : Kivy 8/20 ; ionic : 18/20

 

Conclusion

Voici un rappel des notes obtenu par nos deux coureurs :

  • Installation : Kivy 18/20 ; ionic : 15/20
  • IDE : Kivy 18/20 ; ionic : 10/20
  • Documentation : Kivy 18/20 ; ionic : 15/20
  • Hello World : Kivy : 18/20 ; ionic : 12/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 : Kivy 18/20 ; ionic : 15/20
  • Appels aux fonctionnalités du device : Kivy 12/20 ; ionic : 12/20
  • Design et interface : Kivy 8/20 ; ionic : 18/20

Total (après utilisation plus approfondie) : Kivy 146 pts (+4 pts) ; ionic : 127 pts (-23pts)

Pour ma prochaine application mobile, si l’interface doit être simple, elle sera en Kivy. Si elle doit avoir une interface plus travaillée, ce sera avec ionic, mais elle ne sera pas trop complexe (fonctions simples).

 

SoundBox avec ionic

Introduction

Après avoir réalisé une boite à sons avec Kivy, j’ai tenté de faire la même chose avec ionic. Les réflexes sont les mêmes, la méthode de travail est un peu différente.

 

Ajout du plugin Media

Pour faire jouer un son sur le mobile, il est nécessaire d’installer le plugin Cordova « Media ». Malheureusement, il ne fonctionne pas sous le navigateur du développeur. Il faudra faire le test sur le device mobile. Seule différence notable avec Kivy, qui permet de jouer un son presque de la même façon depuis le PC ou depuis le mobile.

 

Structuration du code

Même s’il n’y a pas grand chose, je tiens à avoir le code le plus structuré et le plus propre possible. L’application se découpe en 2 pages : la liste des catégories (page #1) et la liste des sons de la catégorie choisie (page #2).

Je me suis fortement inspiré du code de cette application : https://github.com/angular-app/angular-app/tree/master/client/src/app

Voici le contenu du répertoire www :

  • app : Répertoire de l’application
    • intro : Répertoire des fichiers de la vue « intro », page #1 de l’application
      • intro.js : Controller de la page « intro »
      • intro.tpl.html : Vue de la page « intro »
    • sounds : Répertoire de la page #2
      • sounds.js : Controller de la page des sons
      • sounds.tpl.html : Vue de la page des sons
    • app.js : Définition des services et du routage des pages
  • css : Répertoire vide pour les CSS spécifiques à l’application
  • js : Répertoire vide pour bibliothèques JS spécifiques à l’application
  • lib : Répertoire des plugins ajoutés pour l’application (géré par cordova)
  • mp3 : les sons

 

Détail du code

Il y a 6 fichiers importants pour que l’application fonctionne correctement.

index.html

<body ng-app="starter">
    <ion-nav-view></ion-nav-view>

    <script src="lib/media/Media.js"></script>
    <script src="lib/media/MediaError.js"></script>

    <script src="app/app.js"></script>

    <script src="app/intro/intro.js"></script>
    <script src="app/sounds/sounds.js"></script>
</body>

 

app.js

angular.module('soundBox.services', [])
.factory('CategoryService', function() {
    // Might use a resource here that returns a JSON array
    var categories = {
            "Animaux": ["Aigle", "Cigales"],
            "Divers": ["Claque", "Dentiste", "Klaxon", "PopDing", "Pouic", "Sieste bebe"],
            "Humain": ["Applaudissements", "Ramirez - alors ausweis papier svp - au trot", "Ramirez - hop hop hop hop", "Ramirez - jai dit ausweis"],
            "Objets": ["Canette Coca", "Casse assiette", "Cloche hotel", "Guitare", "Matrix_phone", "Telephone_Ancien", "Toy telephone", "Corne de brume", "Jouet de chien", "Sirene Alarme", "Telephone_x2"],
            "TV": ["Thames TV", "The Benny Hill Show"]
        };
    return {
        all: function() {
            return Object.keys(categories);
        },
        get: function(aCategory) {
            return categories[aCategory];
        }
    };
})
;

var app = angular.module('starter', ['ionic', 'ui.router', 'soundBox.services'])

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider.state('intro', {
    url: '/',
    templateUrl: 'app/intro/intro.tpl.html',
    controller: 'IntroCtrl'
  });

  $stateProvider.state('sounds', {
    url: '/sounds/:category',
    templateUrl: 'app/sounds/sounds.tpl.html',
    controller: 'SoundsCtrl'
  });

  $urlRouterProvider.otherwise('/');

});

Ce fichier aurait pu être découpé en 2 : le service et le routage.

 

intro.tpl.html

<ion-view title="Sound Box">
    <ion-nav-bar type="bar-positive"
        animation="nav-title-slide-ios7"
        back-button-type="button-icon button-clear"
        back-button-icon="ion-ios7-arrow-back">
        <ion-nav-back-button>
            <i></i> Back
        </ion-nav-back-button>
    </ion-nav-bar>

    <ion-content>
        <ion-list>
            <ion-item ng-repeat="item in items" href="#/sounds/{{item}}">
                {{item}}
                <i></i>
            </ion-item>
        </ion-list>
    </ion-content>
</ion-view>

 

intro.js

app.controller('IntroCtrl', function($scope, $location, $state, CategoryService) {
    $scope.items = CategoryService.all();
})
;

 

sounds.tpl.html

<ion-view title="Sound Box">
    <ion-nav-bar type="bar-positive"
        animation="nav-title-slide-ios7"
        back-button-type="button-icon button-clear"
        back-button-icon="ion-ios7-arrow-back">
        <ion-nav-back-button>
            <i></i> Back
        </ion-nav-back-button>
    </ion-nav-bar>

    <ion-content>
        <ion-list>
            <ion-item ng-repeat="item in items" ng-click="selectSound('{{item}}')">
                {{item}}
            </ion-item>
        </ion-list>
    </ion-content>
</ion-view>

 

sounds.js

app.controller('SoundsCtrl', function($scope, $state, $location, $stateParams, $ionicPlatform, CategoryService) {

    var sounds = CategoryService.get($stateParams.category);
    $scope.items = sounds;

    $scope.selectSound = function(sound) {
        var src = "/mp3/"+sound+".mp3";
        if(ionic.Platform.isAndroid()){
            src = "/android_asset/www" + src;
        }
        if($scope.media){
            $scope.media.stop();
        }
        $scope.media = new Media(src, function(){console.log("successfuly played "+ sound);}, function(e){console.log(e);});
        $scope.media.play();
        // ne pas faire d'autres interprétations du click
        return false;
    };

    $ionicPlatform.onHardwareBackButton(function(){
        if($scope.media){
            $scope.media.stop();
            $scope.media = null;
        }
    });
});

 

Conclusion / comparaison avec Kivy

Le code doit être rigoureusement écrit. Par exemple le tag « <ion-view> » doit être le seul dans la vue, sinon l’affichage est un peu cassé.

Selon le formalisme utilisé, les fichiers sont multiples mais courts et bien classés, ce qui est très agréable à maintenir.

Le design n’a pas été fait de manière aussi complète que l’application réalisée avec Kivy, mais j’imagine que les CSS et images seront faciles à manipuler, comme pour un site web.

Vivement d’autres applications pour mieux comparer les frameworks dans une application plus complète.

 

Téléchargement de l’APK

SoundBox-ionic-debug.apk

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