C'est avec le slogan "Build better apps faster" que Google fait fièrement la promotion de sa nouvelle bibliothèque Jetpack Compose. Après environ six mois d'utilisation, on peut affirmer qu'il y a définitivement du vrai dans tout cela. Le retour au système de mise en page d'origine est difficile à justifier. Après environ six mois d'utilisation, il est clair pour nous que nous ne voulons désormais plus miser que sur ce système.
Qu'est-ce que est Jetpack Compose ?
Jetpack Compose est la nouvelle boîte à outils moderne pour Android. Il permet de créer plus facilement et plus rapidement des interfaces utilisateur (UI) pour les applications Android. Jetpack Compose exploite tout le potentiel de Kotlin, le langage standard d'Android. Cela permet de mettre en évidence la plus grande différence par rapport à la manière traditionnelle de construire des interfaces utilisateur Android. Au lieu de concevoir l'interface utilisateur avec des fichiers XML, on utilise Kotlin. Ainsi, la mise en page est à présent représentée par des expressions descriptives qui se lisent presque comme un texte. Une comparaison de la manière dont un titre et un petit texte peuvent être représentés en dessous est jointe:
Lors de la conférence tech annuelle de Google, Google I/O, la première version de développement de Jetpack Compose a été présentée en 2019. Celle-ci était alors encore explicitement commercialisée comme "pré-alpha" et très instable. Un peu plus de deux ans, une pandémie et de nombreuses versions alpha et bêta plus tard, Jetpack Compose est disponible dans sa version 1.0 depuis juillet 2021. La longue phase de développement a permis de prendre en compte de nombreux feedbacks de la communauté.
Au cours des derniers mois, nous avons déjà pu accumuler un certain nombre de connaissances sur le sujet. Cela a commencé avec le #AndroidDevChallenge en avril dernier. Nous y avons présenté différentes tâches à résoudre avec Jetpack Compose. Nous avons même pu gagner quelques prix en y participant.
Wir fordern uns gerne selber heraus und erweitern unser Wissen - das wird auch mal belohnt! Unser Android Dev @yannickpulver wurde fürs Mitmachen an der #AndroidDevChallenge von @Google mit fancy #JetpackCompose Trophäe und Poster beschenkt✨🚀 pic.twitter.com/HPtGxi1Hfm
— Apps with love (@appswithlove) May 12, 2021
Entre-temps, nous avons déjà pu mettre en œuvre Jetpack Compose dans plusieurs projets. Les points qui nous ont particulièrement convaincus sont mentionnés dans les paragraphes suivants.
Vitesse du développement
Dans le système de mise en page original d'Android, il existe un composant appelé RecyclerView. Ce composant est responsable de l'affichage des listes déroulantes telles qu'on les connaît par exemple dans le feed Instagram. C'est pourquoi on trouve RecyclerView dans presque toutes les applications. La mise en place d'une telle liste nécessite toutefois souvent plusieurs centaines de lignes de code. Si, en plus des posts, d'autres éléments doivent être représentés, cela devient vite confus.
Dans Jetpack Compose, il existe pour cela les composants LazyColumn et LazyRow. Il est étonnant de voir à quel point Jetpack Compose permet de construire cela de manière plus efficace. Même les personnes qui n'ont pas de connaissances en programmation peuvent constater de quoi il s'agit:
Ce modèle de code descriptif se retrouve dans tout le framework. On appelle cette forme "UI descriptive".
UI descriptive
Le code est beaucoup plus lisible que dans l'ancien système de mise en page. Auparavant, les mises en page devaient être définies en XML et abordées en Kotlin. Dans Jetpack Compose, cela a été unifié et tout peut maintenant être écrit en Kotlin.
Ceci est possible grâce à l'utilisation d'une interface utilisateur descriptif. Ce type de mise en page est connu dans d'autres langages comme Flutter ou SwiftUI. Voici un exemple de ce à quoi ressemble le code d'une liste de textes sur les différentes plates-formes:
Bien que le code présente parfois de grandes différences, la structure est souvent similaire. C'est tout à l'avantage des développeurs*. Ils peuvent désormais discuter de la structure descriptive sommaire indépendamment de la plateforme.
Les composants de Jetpack Compose sont simples à nommer et efficaces à utiliser. La phase de développement de deux ans en a valu la peine. Pour plus d'informations sur les similitudes entre Jetpack Compose et Swift UI, consultez le blog de Mohit.
States
Avec Jetpack Compose, le terme "état" ou "state" est devenu plus central que jamais. L'état indique comment l'interface utilisateur doit se comporter. Les données ne sont-elles pas encore chargées ? Y a-t-il une erreur ? Combien d'éléments doivent être affichés dans la liste ? Tout cela est défini dans un état central. Selon l'état, l'interface utilisateur est affichée différemment. Jetpack Compose utilise des algorithmes pour ne redessiner que les modifications. Ce processus est appelé "recomposition".
L'utilisation d'états a également entraîné un changement de mentalité. Les processus habituels de l'ancien système d'interface utilisateur doivent parfois être entièrement repensés. Les avantages sont toutefois évidents. Le contrôle est entre les mains des développeurs. Aucun processus ne se produit plus de manière "magique". 🧙
Un petit exemple : pour créer un champ de saisie, il faut indiquer d'où vient la valeur et ce qu'il en advient lorsque la saisie est effectuée. Si cela n'est pas fait, rien de nouveau ne sera affiché.
Le paramètre "onValueChange" permet d'indiquer ce qui se passe lorsque la saisie est effectuée. Si l'état n'était pas défini, rien ne changerait à l'écran pour l'utilisateur. Cela donne l'impression que la saisie ne fonctionne pas.
Rétrocompatibilité (Interoperability)
L'intégration dans le système de mise en page existant était très importante pour Google. De nombreuses bibliothèques open source d'autres développeurs n'étaient pas encore compatibles au début. Il fallait donc trouver un moyen de les intégrer malgré tout dans le nouveau système. Dans Jetpack Compose, cela a été résolu avec le composant "AndroidView".
Le paramètre "factory" permet d'indiquer quelle (ancienne) vue doit être créée. Le paramètre "update" permet d'indiquer le code qui sera exécuté à chaque recomposition.
Nous avons par exemple utilisé la "AndroidView" pour rendre Mapbox compatible avec le système Jetpack Compose. Nous avons rencontré de nombreux problèmes, la plupart liés à la manipulation de l'état. Cela dit, les anciens composants peuvent être utilisés assez facilement avec Jetpack Compose. Il faut juste un peu de temps pour se familiariser avec la manipulation.
Nice to know
Dans cette section, j'aimerais encore aborder quelques points qui sont particulièrement convaincants dans Jetpack Compose.
spacedBy
Une de mes fonctions préférées de Jetpack Compose est spacedBy. Cette fonction permet de définir l'espace entre les éléments dans les listes. Le fait que cela soit si facile à faire est tout simplement génial. Avant, ce n'était pas facile.
Modifier
Pratiquement tous les composants standard ont la possibilité d'inclure un modifier. Le modificateur permet de définir l'apparence d'un élément, sa taille, s'il est cliquable ou non, et bien plus encore. Un petit exemple :
Il est également possible de combiner plusieurs modificateurs du même type (dans l'exemple ci-dessus, le padding). Ainsi, le composant de texte reçoit un cadre qui est légèrement éloigné du texte lui-même, ainsi qu'un autre espace en dehors du cadre. Les nombreuses mises en page compliquées et imbriquées appartiennent désormais au passé.
Performance
Lors du développement, nous avons remarqué que les versions "debug" des apps sont parfois lentes. Par exemple, il est parfois impossible de faire défiler de grandes listes sans saccades. Ces problèmes disparaissent toutefois dès qu'une version "release" est utilisée. Tout comme elles sont livrées dans le Play Store. On peut supposer que cela sera amélioré dans les futures versions de Compose. En attendant, cette instruction est également disponible sur le site officiel des développeurs Android.
Accompanist
Les bibliothèques Accompanist contiennent différentes fonctions "Bleeding Edge" qui ne se trouvent pas encore dans Jetpack Compose. On y trouve ainsi des composants tels que pager, swipe to refresh ou encore des transitions de navigation. Les bibliothèques ont été créées par Chris Banes (ancien développeur de Google) et sont désormais disponibles en tant que bibliothèques officielles de Google. L'utilisation des bibliothèques Accompanist est, comme son nom l'indique (Accompanist = compagnon anglais), très courante dans les projets Jetpack Compose et il est difficile de s'en passer. Tôt ou tard, ces fonctions apparaîtront peut-être dans les bibliothèques officielles.
Compose Multiplatform
La première version de "Compose Multiplatform" a également été publiée fin 2021. Il devrait ainsi être possible de développer des applications pour le web, le bureau et Android tout en un. Un peu comme ce qui est possible avec Flutter. Pour l'instant, nous n'avons pas encore trouvé d'application, mais nous suivrons certainement les développements en cours.
Roadmap
Il est évident que Jetpack Compose n'est pas encore aussi sophistiqué que le système de mise en page traditionnel. Mais avec la "Accompanist Library", tout est déjà pratiquement possible. Pour tout ce qui manque encore, Google a publié une roadmap. On y trouve tout ce qui devrait encore être développé pour Jetpack Compose dans les mois / années à venir.
Conclusion
Jetpack Compose facilite énormément l'élaboration des UI. Les animations sont souvent très faciles à implémenter ou sont "données" en soi. Les mises en page peuvent être développées beaucoup plus rapidement. Et c'est aussi très amusant ! Il y a définitivement suffisamment de raisons pour que Compose soit utilisé pour de futurs projets. J'espère vraiment que Jetpack Compose ne finira pas sur la liste "Killed by Google" ;)
