Jetpack Compose le nouveau UIToolkit de Android
À la Google IO 2021, nous avons tous entendu cette bonne nouvelle que Jetpack Compose est maintenant en beta et que la version stable sortira en Juillet! On y est presque. Du coup c’est le bon moment pour en parler.
Mais pourquoi autant d’enthousiasme de la communauté mobile depuis cette annonce d’un nouveau UI Toolkit?
Ce qu’apporte Jetpack Compose
Déjà une raison toute bête, nous(les développeurs) aimons la nouveauté, tester de nouvelles librairies, framework, langages! Et c’est une très bonne raison d’être enthousiaste :).
Mais Compose est surtout une totale refonte from scratch de l’ancien UI Toolkit (qui n’est pas mort et qui va continuer à être maintenu).
- Compose n’est pas intégré à l’OS: on l’ajoute au projet comme une autre dépendance. Ce qui fait que son évolution ira beaucoup plus vite. On n’aura plus besoin d’attendre un an pour une mise à jour ou la correction d’un bug. On note que ce travail de unbundling a commencé depuis un moment(Play Services, Jetpack, Kotlin)
- Compose est open source: pas une surprise pour nous. Mais c’est intéressant de voir l’ouverture de la team Compose. Cette vidéo de 4h de Leland Richardson un des leads du compiler plugin qui code une des fonctionnalités de Compose est impensable chez Apple
- Compose est déclaratif: Cette nouvelle mode lancée par React Native est devenu le standard pou un UI Toolkit peu importe l’OS ou le framework. React Native, Flutter, Swift UI et maintenant Jetpack Compose. C’est un shift dans la façon de penser son UI qu’il faudra assimiler.
En faisant un petit tour sur le site, quatre points sont mis en avant. Less code, Intuitive, Accelerate development, Powerful. Regardons un peu ce que ça veut dire.
Less code (moins verbeux)
Jetpack compose nous pousse à coder en utilisant Kotlin qui est par essence un langage concis, moderne et safe.
Par contre garder à l’esprit que l’on peut très facilement tomber dans le “callback hell” ou des fonctions kilométriques et finalement avoir un code peu lisible.
Intuitive (intuitif)
Qui rejoint le point précédent. Avec des fonctions simple (et stateless) où on a juste besoin de décrire ce que l’on veut faire. Jetpack Compose se charge du reste
Ce code est assez simple à comprendre parce qu’il décrit le “quoi” et non le “comment” qui est maintenant de la responsabilité de Jetpack Compose
Accelerate development (coder plus efficacement)
Le fait d’utiliser un langage unique pour le UI et le code métier aide à aller un peu plus vite mais Compose apporte bien plus!
- Les APIs sont plus simples. Il y a forcement un temps d’adaptation à la philosophie Compose mais la courbe d’apprentissage est vraiment minime.
- C’est compatible avec l’ancien monde! Il est possible d’utiliser Compose dans l’ancien UI Toolkit et vice versa. Toujours pour rendre la prise en main simple et rapide.
- Les previews qui permettent d’avoir un rendu d’un bout de UI et de pouvoir facilement itérer sur cette partie de l’interface sans avoir besoin de déployer sur un device.
Powerful (Puissant)
En faisant un tour dans la liste qui des apps samples que Google a développé pour montrer un peu ce qu’on peut faire avec Compose, on se rend bien compte que l’outil est déjà très mature en terme d’options. On a le support de Material Design. Les APIs android sont facilement accessibles(les ressources, les permissions, etc). On a aussi un support natif du Dark Mode qui est devenu diablement simple à mettre en place.
Quid du tooling?
Google a toujours investi dans l’outillage. Il savent bien combien c’est important de fournir les outils pour simplifier la prise en main de Jetpack Compose.
Compose ❤️ Kotlin. Android Studio ️❤️ Kotlin. So..Android Studio ❤️ Compose.
En gros Compose bénéficie de l’outillage fourni par Android Studio(merci Jetbrains) pour développer en Kotlin.
En plus de cela, on a quelques ajouts spécifiques à Jetpack Compose.
- Compose Preview qui vous permet d’avoir un aperçu du rendu d’un Composable. Comme on le voit ci dessous on peut être très spécifique sur le rendu voulu.
- Le mode interactif vous permet de manipuler un Composable depuis android studio sans démarrer un émulateur ou le lancer sur un device. Puissant non!
- Live Edit permet de pas avoir besoin de rebuild le code quand on change une chaîne de caractères, une dimension, une couleur et d’avoir le rendu directement au niveau de la preview
Sur ce page on retrouve les travaux liés au tooling pour Compose =>
https://developer.android.com/jetpack/compose/tooling
J’ai déjà une app android, Il faut la convertir?
J’en ai parlé un peu plus haut. Compose a été conçu en tenant compte l’interopérabilité avec l’ancien système. Du coup, pas besoin de convertir une app pour pouvoir utiliser Compose mais surtout si vous avez des costum views très complexes que vous ne voulez pas refaire en Compose, il est bien possible de les utiliser dans un UI Compose.
Ajouter un Composable à une Activity
Avec setContent qui est une extension de fonction de ComponentActivity, on peut rajouter nos Composables depuis une activity
Ajouter un composable à une layout XML
Il faut utiliser androidx.compose.ui.platform.ComposeView qui va permettre d’accueillir les Composables!
On fait ici un findViewById pour récupérer le ComposeView puis, comme pour l’Activity, on utilise setContent pour pouvoir accéder au monde des Composables!
un Composable est une composition d’autres Composables pour créer un bout d’interface
C’est quoi un Composable?
On parle depuis tout à l’heure de composable. Ça serait bien d’en parler un peu 🤷🏾♂️.
Techniquement, Un Composable c’est une fonction qui retourne rien et qui est annotée par @Composable
Mais pour qu’un composable ait du sens on y utilise d’autres composables qu’on a créé ou qui sont fournies par la librairie comme material ou foundation. On y retrouve par exemple Button ou encore Text.
Du coup un Composable est juste une composition d’autres Composables pour créé un bout d’interface.
Un Composable ne peut pas être appelé dans une fonction qui n’est pas Composable.
Ça fait beaucoup de “Composable” 😅
Le UI Toolkit fourni toutes les briques qui permettent de construite votre UI.
On se rappelle de RecyclerView avec les adapters et ViewHolder?
On ne peut pas faire plus simple 🤯
Je veux être dev android. Je commence par Jetpack Compose?
99% des apps ne sont pas encore sous Compose. On n’est pas encore au stade où les boites demandent cette compétence. Donc relaxe.
Mais surtout une bonne connaissance du UI toolkit actuel est un gros avantage quand il va falloir gérer la transition vers Compose ou tout simplement faire cohabiter les deux. Ce qui sera le scenario qu’on aura le plus souvent dans les équipes android.
Par contre cela n’empêche pas de se familiariser avec l’outil. C’est un réel plus pour un profile android 😉
Par où commencer?
Le pathway de Jetpack Compose est le meilleur moyen pour se lancer.
https://developer.android.com/courses/pathways/compose
Ça suffit largement et il y a de quoi faire 😉
Comment se tenir informer?
Rien ne change pour ca.
Le blog => https://android-developers.googleblog.com
La doc officiel => https://developer.android.com/jetpack/compose
La chaîne YouTube => https://www.youtube.com/user/androiddevelopers
Quelques comptes twitter qui parlent de Compose:
Joe Birch => https://twitter.com/hitherejoe
Jim Sproch => https://twitter.com/JimSproch
Jossi Wolf => https://twitter.com/jossiwolf
Chris Banes => https://twitter.com/chrisbanes
Et l’incontournable Leland Richardson => https://twitter.com/intelligibabble et https://www.youtube.com/c/LelandRichardsonDev
Conclusion
Jetpack Compose est clairement le futur du UI sur android. Et c’est encore une grosse évolution pour les développeurs android apres le reactiv programming, la suite Jetpack, mais surtout Kotlin. Cela veut dire que c’est le moment pour prendre en main l’outil pour comprendre sa philosophie.
Un point assez intéressant est que Compose est deja appliqué à d’autres platformes. Compose for Desktop permet de creer une app desktop et support Linux, Mac et Windows.
Imaginons Kotlin Multiplatform + Compose (Jetpack, Cocoa Compose😅 et Desktop) 😍
