Cordova vs Capacitor : quelle est la meilleure techno mobile hybride ?

Pour développer freelance des applications mobiles, il existe plusieurs solutions : PWA, applications natives et cross-platforms. Et derrière chaque solution se cachent plusieurs technos : Objective-C ou Swift pour de l’iOS natif, Java ou Kotlin chez Android, et Cordova ou Capacitor pour les cross-platform.

Dans cet article, nous allons nous intéresser plus en profondeur à ces deux derniers frameworks. Comme nous allons le voir, et malgré une origine commune, ce sont des concurrents directs.

Vous hésitez entre Cordova et Capacitor ? Nous avons fait le comparatif pour vous, suivez le guide !

Le développement cross-platform

Mais avant de rentrer dans les détails, faisons un point sur le développement mobile de manière plus générale, et plus particulièrement sur le cross-platform (ou hybride).

Comme nous l’expliquions dans cet article, il existe plusieurs technos différentes lorsqu’on veut créer une application mobile : le natif, le cross-platform et les PWA.

Chacune a ses avantages et ses inconvénients. Ici, nous allons parler de développement hybride, donnons donc quelques explications supplémentaires sur cette technologie.

Déjà, il faut savoir que la liste des frameworks cross platform ne se limite pas à Cordova et Capacitor, il existe d’autres solutions, entre autres :

• React Native ;
• Flutter ;
• Xamarin.

Bien qu’elles ne fonctionnent pas toutes de la même façon, nous pouvons les mettre dans la même catégorie, car elles répondent au même besoin de la même façon.

Et, si nous allons aujourd’hui comparer Cordova et Capacitor, c’est qu’ils fonctionnent de manière très similaire, et qu’il est bon pour un développeur ou un CTO de faire cette comparaison avant de choisir une techno mobile.

Capacitor et Cordova, en détails

Tout d’abord, Capacitor et Cordova répondent donc à un même besoin : créer une application ayant accès aux fonctionnalités natives d’un smartphone, qui soit disponible sur les stores et écrite en JavaScript, avec un seul code source. Bien que d’autres technos le permettant (comme React Native), Cordova et Capacitor ont assez de points en commun pour avoir besoin d’un comparatif pour les séparer.

Avant de les mettre à l’épreuve techniquement parlant, faisons le point sur l’origine de ces frameworks mobiles.

Cordova

Cordova est apparu en 2009, soit très tôt dans le monde du développement mobile (deux ans seulement après la sortie de l’iPhone). Adobe rachète le framework en 2011 et, en même temps, un fork en est fait par la fondation Apache : il s’agit de Cordova.

Petit à petit, des plugins sont développés, pour supporter les fonctionnalités natives des devices, et d’autres projets gravitant autour de la techno apparaissent. C’est notamment le cas d’Ionic, créé en 2013, framework basé sur le coeur Cordova.

Capacitor

Et c’est justement Ionic qui est à l’origine de Capacitor. Probablement frustrée des limites de Cordova (dont nous reparlerons), l’équipe d’Ionic se met au développement d’une nouvelle techno pour faire le bridge entre le développement front-end et les features natives d’un mobile.

Ainsi, en 2019 sort la première version de ce framework, soit dix ans après celle de son parent.

Cordova VS Capacitor : le match

Maintenant que nous avons fait le tour du développement mobile et de ces deux technos, il est temps de passer à la comparaison !

Déjà, et nous l’avons dit, Cordova et Capacitor ont beaucoup de points communs :

• Ils créent des apps pouvant être déployées sur les stores ;
• Via du code écrit en JavaScript (avec ou sans framework JavaScript) ;
• En donnant accès aux fonctionnalités natives (caméra, notifications push, géolocalisation, etc.) ;
• Avec un seul code source pour toutes les plateformes (notamment iOS et Android).

Autre point commun, et pas des moindres : il est possible pour n’importe quel développeur de créer des plugins ou modules Cordova/Capacitor. Pour peu qu’il ait des connaissances dans le développement natif, il peut créer ses propres add-ons, pour répondre à ses besoins ou à ceux d’autres développeurs. Il peut même commercialiser ces plugins. Match nul ici aussi, donc.

Mais ce comparatif n’aurait pas lieu d’être s’ils n’avaient que des points communs. Aussi, voyons maintenant ce qui les sépare.

Cordova et Capacitor, les différences

Les différences majeures qui existent entre ces deux frameworks sont les suivantes :

• Cordova est installé globalement sur une machine, Capacitor n’est lié qu’au projet ;
• Capacitor offre de fait une configuration plus fine, propre à un projet ;
• Beaucoup de plugins Cordova sont supportés par Capacitor (l’inverse n’est pas vrai) ;
• Capacitor considère tout plugin comme un module npm, et est donc utilisable comme tel dans le code ;
• Capacitor étant plus récent, ses plugins utilisent les dernières versions d’ECMAScript ;
• La documentation de Capacitor est plus complète et lisible que celle de Cordova.

Aussi, il est important de parler de la pérennité de ces technologies. Cordova est soutenu par Apache et par une forte communauté. Capacitor est lui soutenu par Ionic, entreprise privée très présente dans le monde du développement mobile, ainsi que par une communauté qui croit rapidement.

Les deux technos sont donc amenées à durer dans le temps.

Quelques exemples par le code

Lorsqu’on est développeur ou CTO et qu’on doit faire un choix technologique, il est toujours bon de comparer la façon dont les fonctionnalités sont développées dans l’une et l’autre techno, au niveau de la technique pure.

Nous allons donc ici comparer quelques exemples de code écrits avec Cordova et Capacitor.

L’utilisation d’un plugin : la caméra

Pour ce faire, nous allons prendre un exemple spécifique mais simple à implémenter : l’accès à la caméra native d’un appareil pour la prise de photo.

L’installation du plugin

Pour l’installation du plugin permettant d’avoir accès à la caméra native d’un device, cela se fait de cette manière :

Cordova :

cordova plugin add cordova-plugin-camera

Capacitor :

npm install @capacitor/camera
npx cap sync

On remarque déjà que l’installation d’un plugin Capacitor se fait via npm (c’est donc un module, et il est appelé comme tel dans le code).

L’appel au plugin

Quant à l’appel, pour ouvrir la caméra et prendre une photo, cela se fait de cette manière :

Cordova :

navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
    destinationType: Camera.DestinationType.FILE_URI });

function onSuccess(imageURI) {
    var image = document.getElementById('myImage');
    image.src = imageURI;
}

function onFail(message) {
    alert('Failed because: ' + message);
}

Capacitor :

import { Camera, CameraResultType } from '@capacitor/camera';

const takePicture = async () => {
  const image = await Camera.getPhoto({
    quality: 90,
    allowEditing: true,
    resultType: CameraResultType.Uri
  });

  var imageUrl = image.webPath;

  // Can be set to the src of an image now
  imageElement.src = imageUrl;
};

Les appels sont complètement différents ; Capacitor utilise par exemple la fonctionnalité async/await, apparue dans ECMAScript en 2017.

Cordova, dans cet exemple tiré de la documentation, a une implémentation beaucoup plus classique du JavaScript, avec des fonctions de callbacks passées en paramètre. Implémentation classique, donc, mais moins lisible et dépassée selon beaucoup de développeurs…

Le gagnant est…

Comme pour chaque choix technologique, il n’y a pas forcément de bonne ou de mauvaise réponse. Il peut y avoir des contraintes techniques ou humaines (la présence ou non d’un plugin obligatoire, la techno déjà utilisée par une équipe ou une entreprise, etc.) qui peuvent mener au choix de l’un ou l’autre.

Cependant, s’il n’existe aucune contrainte au choix de la technologie, Capacitor est peut-être celle vers laquelle vous devriez vous diriger. Elle est portée par une communauté grandissant très vite et “neuve”, dans le sens ou les prochains plugins développés le seront dans les dernières versions de JavaScript. Ils supporteront aussi logiquement les dernières versions des systèmes d’exploitation mobile.

Mais toute solution technique est subjective.

Il est donc bon, comme à chaque fois que l’on veut choisir une technologie ou un framework, d’essayer soi-même les technos. Prendre ne serait-ce que quelques heures pour créer un projet et utiliser un plugin nous permet déjà d’avoir une idée sur le choix de l’une ou l’autre de ces technos.

Conclusion : Capacitor va-t-il tuer Cordova ?

Si Capacitor est à privilégier, prend de plus en plus d’ampleur et marque le pas sur son cousin Cordova, va-t-il l’éliminer ?

Nous l’avons déjà dit, Cordova est régulièrement maintenu et appartient à Apache ; et il y a peu de chances que la fondation abandonne ce projet. Une version majeure (11.0) est sortie en décembre 2021.

Mais Capacitor est lui aussi régulièrement mis à jour (la version 3.0 étant sortie en mai 2021), et surtout, il est maintenu par une société qui l’utilise dans son produit principal, Ionic (dont la versions 6 est sortie en décembre 2021). Il est donc sûr et certain qu’Ionic n’arrêtera pas le développement de Capacitor.

Donc non, Capacitor ne tuera pas Cordova ; il est par contre très probable qu’il continue à lui prendre des parts de marché ces prochaines années, jusqu’à s’imposer comme une techno dominante dans le monde du développement mobile.

Et vous, avez-vous déjà utilisé l’un ou l’autre framework ? Quel est votre préféré ? Dites-le nous en commentaire !