Qui n’a jamais rêvé de développer une application et de la rendre disponible facilement et de manière native depuis n’importe quel appareil (Web, Android, iOS, client lourd…). C’est la promesse que nous font les applications multiplateformes. Mais est-il réellement possible pour un développeur fullstack d’atteindre un tel résultat ?
Les outils actuels
Pour développer de telles applications, il existe actuellement de nombreuses solutions. On retrouve notamment les frameworks de développement d'applications natives multiplateformes, les Progressives Web Apps (PWA) ou encore les frameworks de développement hybrides.
Les frameworks de développement d'applications natives multiplateformes
Flutter et React Native sont deux exemples de frameworks de développement multiplateformes. Ces frameworks offrent aux développeurs la possibilité de concevoir des logiciels fonctionnant sur diverses plateformes à partir d'une base de code unique. Cette approche permet non seulement de réduire les temps et coûts de développement, mais assure également une cohérence visuelle et fonctionnelle entre les différentes versions de l'application. Cela est permis notamment grâce à l'utilisation de composants natifs. Ces frameworks multiplateformes compilent vers du code natif ou quasi natif, offrant de meilleures performances et une expérience utilisateur plus fluide. Ils permettent un accès plus direct aux fonctionnalités natives de chaque plateforme, mais nécessitent souvent l'apprentissage de langages ou d'environnements spécifiques.
Les Progressives Web Apps
Les Progressives Web Apps sont des applications web qui utilisent des technologies web modernes. Contrairement aux applications hybrides, les PWA fonctionnent directement dans le navigateur tout en visant à offrir une expérience similaire à celle d'une application native. Par conséquent, comme pour les frameworks hybrides, les PWA sont limitées aux API Web pour interagir avec le hardware des différentes plateformes. Bien qu'il soit théoriquement envisageable de publier une PWA sur un store, elles ne sont pas spécifiquement conçues pour ça. De plus, les procédures de validation, en particulier sur iOS, peuvent être difficiles à franchir et nécessitent parfois le contournement des règles ou l'utilisation d'outils tels que PWABuilder. Tout cela peut donc engendrer des difficultés pour la diffusion d'une application auprès du grand public.
Les frameworks de développement hybrides
Bien qu'ils offrent aussi un accès à divers composants de base, les frameworks de développement hybrides, comme Ionic Framework, Framework7, Quasar, ont une approche un peu différente des frameworks de développement multiplateformes. En effet, ils utilisent les technologies web (HTML, CSS, JavaScript) et s'exécutent dans une WebView. Ils offrent une excellente réutilisation du code et sont plus accessibles aux développeurs web, mais ils peuvent avoir des performances légèrement inférieures pour des applications complexes. Cela peut notamment être le cas pour des applications possédant des animations ou nécessitant l’utilisation de nombreuses images. En comparaison des PWA, ces frameworks offrent aussi la possibilité d'interagir de manière relativement complète avec les API natives afin de donner accès aux fonctionnalités communes des différents appareils.. Cependant les interactions plus avancées ou spécifiques à un système d’exploitation (OS) restent limitées (interactions avec des applications, fonctionnalités bas niveau…).
Ainsi, pour un développeur fullstack, chaque plateforme possède des avantages et des inconvénients distincts à la réalisation d'une application multiplateforme. L’idéal serait que nous puissions cumuler l'avantage de l'utilisation des technologies web, avec la possibilité d'accéder aux API natives. Ce que semblent nous offrir les frameworks de développement hybrides. Cependant, en réalité, ces frameworks ne gèrent pas nativement le multiplateforme ainsi que les interactions avec les API natives. En effet c’est en se couplant avec des outils externes comme Cordova ou Capacitor qu’ils y parviennent.
Capacitor
Qu’est-ce que c'est ?
Capacitor est une bibliothèque open-source développée par Ionic, qui permet aux développeurs de créer des applications multiplateformes (iOS, Android, Web, client lourd) en utilisant des technologies web comme HTML, CSS et JavaScript, et par conséquent les frameworks web. C’est une évolution de l’outil Apache Cordova, ce qui permet une rétrocompatibilité avec celui-ci.
Il fonctionne comme une sorte de pont entre les technologies web et les plateformes natives, en permettant d'accéder aux API natives du téléphone à partir d'une application web. Pour ce faire, il utilise ce qu’on appelle des plugins. Ce sont des petites librairies qui ont été développées pour permettre d’interagir avec un élément spécifique de l’appareil. Ainsi, de nombreux plugins officiels et communautaires sont disponibles et permettent d'interagir de manière assez complète avec les différentes plateformes (caméra, géolocalisation, notification, contacts…). De plus, Capacitor offre la possibilité de créer ses propres plugins, nécessitant tout de même des compétences mobiles pour les développer. Bien que les plugins Cordova soient utilisables dans un projet Capacitor, ils ne sont pas toujours compatibles, maintenus ou utilisables dans de bonnes conditions. Ils ne sont donc pas à privilégier.
Ces plugins fonctionnent comme des dépendances classiques. Ils fournissent une API permettant d’effectuer des actions ou de récupérer des informations sur l’état de l’appareil. Il est ainsi possible de réaliser des tests unitaires (Comment mocker les plugins ?). Les plugins officiels de Capacitor sont mis à jour régulièrement pour assurer une compatibilité avec les dernières versions des OS mobiles. De plus, ils gèrent de manière transparente les différentes versions d’iOS ou d’Android grâce à une abstraction qui réduit les modifications nécessaires dans le code. Les éventuelles incompatibilités ou besoin de modification (ajout de permission notamment) sont explicitées dans la documentation de ces plugins.
De la même manière que les frameworks d’applications hybrides, Capacitor va nous permettre de créer de véritables applications mobiles natives en encapsulant notre application dans une WebView.
Comment l’utiliser ?
Capacitor est utilisable au travers d’une CLI ou de l’extension Ionic sur Visual Studio Code. L’un des avantages de Capacitor est qu’il permet d’initialiser un nouveau projet de zéro, mais aussi de migrer un projet web ou Cordova existant, sans modification du code source.
Si vous souhaitez commencer un projet, l’extension Ionic vous permet de créer un nouveau projet se basant sur Ionic Framework et d’y intégrer Capacitor (Documentation disponible ici). A contrario, si vous souhaitez partir d’un projet existant, l’extension Ionic vous permet d’intégrer en un clic Capacitor.
L’utilisation de l’extension étant assez simple d’accès et explicite, nous allons plutôt présenter comment migrer un projet web vers Capacitor à l’aide de la CLI.
La première étape va consister à ajouter les librairies Capacitor à votre projet :
npm install @capacitor/core @capacitor/cli
Ensuite, nous allons pouvoir initialiser Capacitor à l’aide de la commande suivante :
npx cap init
Une fois le projet initialisé, nous allons pouvoir ajouter les plateformes cibles comme Android ou iOS :
npm install @capacitor/android
npx cap add android
npm install @capacitor/ios
npx cap add ios
L’installation d’un plugin fonctionne de la même manière que n’importe quelle librairie JavaScript :
npm i @capacitor/app
Pour générer les différents fichiers AAB ou APK (Android) et IPA (iOS) ou synchroniser le projet en cas d’ajout de plugin par exemple, nous pouvons utiliser les commandes suivantes (À noter que la création d’une application iOS avec Capacitor nécessite tout de même Xcode et donc MacOS) :
npx cap build
npx cap sync
On va enfin pouvoir tester notre application sur des émulateurs ou sur des appareils réels à l’aide des commandes suivantes (cette commande synchronise le projet et génère les fichiers de debug AAB, APK et IPA) :
npx cap run android
npx cap run ios
Quels sont ses avantages ?
Capacitor a de nombreux avantages dans un objectif de développer une application multiplateforme, pour un développeur fullstack. Il permet notamment de :
- Utiliser une seule base de code pour toutes les plateformes, entraînant un gain de temps de développement et de maintenance ;
- Utiliser une technologie que nous maîtrisons déjà (pas besoin d’apprendre un nouveau langage ou framework) ;
- Interagir de manière assez complète avec les API natives via des plugins officiels, communautaires ou des plugins Cordova ;
- Créer une véritable application déployable sur les stores ;
- Pouvoir, à l’instar d’une application web, faire du hot reload ;
- Pouvoir migrer, sans modification du code, un projet web existant ;
- Il s'utilise de manière simple, via une CLI, mais surtout via l’extension Ionic ;
- Compatible avec les frameworks de développement hybride (Ionic Framework, Quasar, Framework7).
Quels sont ses inconvénients ?
Cependant, Capacitor a certains désavantages en comparaison avec des frameworks de développement multiplateforme comme Flutter, notamment :
- Capacitor ne fournit aucun composant de base pour la construction des interfaces (boutons, formulaire…), ou la mise en place de la navigation. Il faut tout développer de zéro. Cependant, Capacitor peut être couplé à un framework hybride afin d’obtenir un design proche du natif sans trop d'efforts.
- Le fait d’accéder aux API natives via des plugins peut limiter les interactions avec les mobiles, notamment pour des fonctionnalités un peu exotiques. Néanmoins, un panel important de plugins est disponible, et la possibilité d’en créer est donnée aux développeurs.
- Les performances ne sont pas comparables à celles des applications natives, d’autant plus pour des applications complexes et nécessitant de charger beaucoup de données (animations, images nombreuses…).
- Une communauté encore jeune mais en croissance. Capacitor est supporté par Ionic, il est utilisé par de grands groupes (Burger King, assurance…) et il est de plus en plus mis en avant par les technologies web ou les frameworks hybrides.
Conclusion
À première vue, Capacitor ne semble pas réellement adapté pour un projet dont l’objectif serait uniquement ou principalement le développement d’une application mobile. Des frameworks comme Flutter paraissent dans ce cas plus adéquat. En effet, les performances seront globalement meilleures, particulièrement pour des applications complexes, et l’interaction avec les API natives sera plus complète et performante. Cependant, d’après des retours d’expériences de consultants, dans ce cas, Capacitor peut tout de même être utilisé pour permettre à une équipe de développeurs fullstack de pouvoir travailler sur des applications mobiles sans connaissance particulière dans ce domaine.
Un autre cas dans lequel Capacitor seul ne paraît pas forcément adapté est la réalisation d’une application from scratch. En effet, Capacitor ne fournit aucun composant UI. Il faudra donc tout développer et aussi mettre en place le système de navigation dans l’application. Cependant, les frameworks de développement d’applications hybrides mettent de plus en plus en avant Capacitor, et le supportent de manière native. Ainsi, on peut combiner Quasar, Framework7 ou Ionic Framework avec Capacitor pour pouvoir combiner les avantages de ces deux types d’outils.
Capacitor semble donc être davantage intéressant à utiliser pour un projet centré sur le web. Il nous permettra, avec des connaissances web, de développer un code unique pour toutes les plateformes, tout en se concentrant sur une UI pensée pour le web. Ainsi, Capacitor va permettre un gros gain de temps de développement, d’apprentissage et de coût de développement, tout en ayant un rendu performant et professionnel pour nos différentes applications.
De plus, si l'objectif d’un projet est uniquement le développement d’une version mobile d’une application web existante, la migration vers Capacitor va nous permettre de convertir, à l’aide de quelques lignes de commande, un projet web classique directement en un projet multiplateforme. Ainsi, au-delà d'éventuels souhaits de personnalisation des versions mobiles (notifications ou autres), aucun nouveau développement ne sera nécessaire.
