Capacitor : un outil pratique et puissant pour le développement d’application web native

Chez Atipik, on choisit, dans la quasi-totalité des cas, le développement d’application mobile en natif (iOS et Android). On sait par expérience qu’aucune autre technologie hybride ne peut rivaliser, que ce soit en termes de performance ou d’UX. Cependant, il y a des situations où le développement d’une app en hybride peut s’avérer pertinent.

On peut très certainement affirmer que tout adepte de l'univers fabuleux de l'informatique a déjà entendu parler de développement d’application mobile hybride. Cela fait maintenant quelques années que ce type de développement a fait ses preuves, et les frameworks sont de plus en plus nombreux : React Native, Flutter, KMM, Ionic pour ne citer que les plus connus. Dans cet article, on vous présente Capacitor, le petit nouveau fournit par l’équipe du framework Ionic, qui ne manque pas d’arguments et saura vous séduire, dans les bonnes conditions.

Capacitor, c’est quoi ?

Vous avez peut-être déjà entendu parler de Apache Cordova. On peut le voir comme le prédécesseur de Capacitor. D’ailleurs, la plupart des plugins Cordova sont supportés par Capacitor et explicitement référencés dans la doc.

La team Ionic résume très bien ce qu’est Capacitor :

Capacitor is an open source native runtime for building Web Native apps. Create cross-platform iOS, Android, and Progressive Web Apps with JavaScript, HTML, and CSS.

C’est un environnement natif (iOS, Android, Web) permettant de construire des applications web natives cross-plateforme en JS, HTML et CSS. On peut donc créer des applications web à destination de toutes les plateformes.

Le terme “application web native” résume assez bien la philosophie de Capacitor. Il permet, en effet, de créer des applications Web capables d’exploiter les APIs natives (iOS, Android, Web). Les technologies web et natives fonctionnent ainsi main dans la main.

À l'instar de son prédécesseur Apache Cordova, Capacitor fournit toute une panoplie de plugins permettant l'accès aux API natives :

• Capacitor Official Plugins : plugins officiels maintenus par l'équipe Capacitor
• Capacitor Community Plugins : plugins fournis par la communauté Capacitor
• Capacitor Entreprise Plugins : plugins payants à destination des entreprises
• Cordova Plugins : plugins Cordova compatibles avec Capacitor

Quand et pourquoi choisir Capacitor ?

Le choix d’un framework ou d’un outil, lorsqu’il est nécessaire, est crucial dans la réussite d’un projet. Il faut donc bien étudier les avantages et inconvénients avant de se lancer. Voici quelques critères qui vous aideront à prendre la décision d'opter pour Capacitor lors du développement de votre application Web hybride.

1. Vouloir porter une PWA sur iOS et Android

Si tout ce que vous souhaitez est de développer une application web, Capacitor n’a aucune utilité. En revanche, si vous avez l’intention de porter votre PWA sur mobile, Capacitor s’avèrera un très bon choix.

2. Avoir un design complètement custom

Capacitor ne fournit aucun composant UI pour la création de vos écrans. Tout ce qu’il fait c’est créer une application web “bundlée” dans une app native, en fournissant accès, via les plugins, aux APIs natives. Il vous incombera donc de créer (from scratch) l’ensemble des éléments qui composeront votre interface, tel que la navigation, etc…

Le Look and Feel de votre application ne sera donc pas celui d’une application native. Si, au contraire, vous souhaitez un design proche du natif, penchez-vous plutôt vers Ionic, ou React Native, ou encore Flutter.

3. Vouloir rester sur du développement Web

Si votre équipe possède essentiellement des compétences en développement Web, et ne souhaite pas apprendre d’autres langages ou passer au développement natif, Capacitor se placera comme un choix évident. Il permet de garder le framework de son choix, ou même le développement d’app mobile hybride en Vanilla JS.

4. Partir d’un projet web déjà existant

Une des forces de Capacitor, c’est qu’il s’intègre très bien sur des projets web existants (VueJS, React, Angular ou encore Vanilla JS). Dans le cas où votre app est déjà responsive, il vous sera très facile d’ajouter la “couche Capacitor” et de déployer votre app sur iOS et Android.

Les avantages de Capacitor

1. Code once, run everywhere

Comme tout framework de développement hybride, l’avantage premier de Capacitor réside dans la réutilisation du même code pour une exécution sur toutes les plateformes. C’est clairement un gain de temps.

2. Standards Web

Une app Capacitor n’est rien d’autre qu’une app web, exécutée à l’intérieur d’une WebView (un mini navigateur si vous préférez). Nul besoin d’apprendre un nouveau langage ou une nouvelle techno. Du HTML, du CSS, du JS, et c’est tout !

3. CLI

Les commandes capacitor (CLI) sont simples et efficaces et permettent en quelques commandes de lancer l’app sur iOS et Android.

4. Hot-reload, aussi sur devices physiques !

Qui dit développement web dit hot-reload (ou encore live-reload). Capacitor permet de configurer le capacitor.config.json pour charger l’application web (embarqué dans la WebView) depuis le serveur de développement. Ainsi, tout changement dans le code JS sera automatiquement propagé sur les devices.

5. Faible dépendance

Vu que Capacitor agit comme wrapper de l’application web, on peut tout à fait décider un jour de s’en passer et de migrer vers autre chose. Il vous faudra évidemment remplacer l’ensemble des plugins Capacitor utilisés.

Les inconvénients de Capacitor

1. Une interface à construire de zéro

Comme déjà mentionné, Capacitor ne fournit aucun composant de base pour la construction des interfaces (boutons, formulaire, etc.). Il vous faudra donc tout faire, à la main. En revanche, vous pouvez décider de partir avec Ionic si vous souhaitez un design proche du natif sans trop d’effort.

2. Pas de système de navigation par défaut

Même chose pour la navigation, c’est à vous de la mettre en place. Encore une fois, un framework comme Ionic vous donnera accès à un système de navigation intégré.

3. Des performances moindres comparé au natif

Comme toujours dans le monde de l’application hybride, les performances ne sont pas comparables à celles des apps natives. Néanmoins, les performances des apps web embarquées (WebView) se dirigent gentiment mais sûrement vers des performances de plus en plus proches du natif. Si l’application que vous développez ne nécessite pas de ressources importantes, vous ne devriez rencontrer aucun problème de ce côté là.

4. Une communauté encore jeune

Même si Capacitor est développé/supporté par l’équipe Ionic, il faut noter que sa communauté est encore jeune. Les plugins fournis par la communauté ne sont pas encore nombreux, et il est possible que vous rencontriez des bugs ou des soucis non résolus.

Conclusion

Capacitor ne conviendra pas à toutes les applications/projets. Si vous souhaitez des performances optimales ou un design proche du natif, il vaut mieux se tourner vers un framework comme Ionic ou React Native, ou même se lancer dans du développement natif. Cependant, si vous cherchez à développer rapidement une application web hybride pour iOS et Android, ou si vous souhaitez “porter” une application web existante sur mobile, Capacitor peut être un excellent choix. À noter que Capacitor reste jeune et sa communauté, quoique grandissante, est loin d’égaler celle de Flutter, React Native ou encore Ionic. Il faut donc s’attendre à rencontrer quelques bugs et prises de tête si on décide d’implémenter des fonctionnalités qu’on pourrait qualifier d’exotiques.