Blog ENI : Toute la veille numérique !
🐠 -25€ dès 75€ 
+ 7 jours d'accès à la Bibliothèque Numérique ENI. Cliquez ici
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. Jetpack Compose
  3. La genèse de Jetpack Compose
Extrait - Jetpack Compose Développez des interfaces accessibles et modernes pour Android
Extraits du livre
Jetpack Compose Développez des interfaces accessibles et modernes pour Android Revenir à la page d'achat du livre

La genèse de Jetpack Compose

Introduction

Le UI Toolkit original a été conçu en 2006. Les hypothèses utilisées lors de sa conception concernant les usages des utilisateurs, la capacité des téléphones et la complexité des applications ne sont plus totalement en phase avec le marché actuel. Avant de découvrir comment fonctionne Jetpack Compose, il est intéressant de comprendre quelles sont les raisons plus profondes motivant sa création et quelles leçons ont été apprises du passé pour sa conception.

Les raisons motivant la création de Jetpack Compose

Pouvoir mettre à jour le UI toolkit en dehors du cycle de mise à jour de la plateforme

Il est important de noter que le choix initial d’implémenter un UI Toolkit précompilé et embarqué dans le système représentait une solution performante au regard des caractéristiques limitées des smartphones de l’époque, en particulier vis-à-vis de l’espace disque utilisé par celui-ci : Embarquer une seule fois un UI Toolkit qui sera utilisé par tout le système et toutes les applications, plutôt que le stocker x fois dans chaque livrable de chaque application.

C’est pourquoi un UI Toolkit tel que Jetpack Compose sous forme de bibliothèque externe n’aurait pas été adéquat. Cependant, le fait que le UI Toolkit original soit directement intégré à la plateforme Android implique que pour livrer une évolution ou corriger un bogue, il faut livrer une nouvelle version de la plateforme Android. La fenêtre de tir est très mince puisqu’une seule version majeure est déployée par an. À cela s’ajoute le temps d’intégration de cette nouvelle version par les fabricants, qui ajoutent leur surcouche et qui parfois limitent le déploiement de ces mises à jour à un nombre restreint d’appareils. Cela s’appelle l’obsolescence logicielle.

Un argument écologique ? Pas si évident.

L’obsolescence logicielle désigne ici l’incapacité d’utiliser une application sur un smartphone simplement parce que le fabricant a décidé de ne pas pousser les nouvelles mises à jour d’Android pour ce modèle et que les développeurs et développeuses utilisent...

Les partis pris techniques de Jetpack Compose

Avant-propos

Avant de découvrir le premier composant de ce livre utilisant le nouveau UI Toolkit Jetpack Compose, il est important de clarifier que Jetpack Compose se découpe en trois parties principales :

  • Compiler

  • Runtime

  • Compose UI

Ces trois parties correspondent à des dépendances différentes. Seul Compose UI est en réalité lié à la plateforme Android. Les fondations de Jetpack Compose qui se trouvent dans les parties Compiler et Runtime peuvent être utilisées pour construire un UI Toolkit sur différentes plateformes (web, mobile ou desktop). Le code source de Compose UI utilise ces deux parties pour construire un UI Toolkit pour Android (maintenu par Google) et pour Desktop (maintenu par JetBrains). Compose UI est compatible avec 98 % des appareils Android sur le marché au moment de l’écriture de ce livre puisqu’il fonctionne à partir d’Android 5.0 (soit l’API level 21).

Nous allons maintenant découvrir comment la refonte du UI Toolkit par les équipes de développement de Google amène une nouvelle philosophie. Au-delà des enseignements tirés des années de développement du UI Toolkit original et de l’évolution de l’écosystème mobile, il est important de bien comprendre les choix d’implémentation qui ont été faits pour mieux appréhender le développement d’interface moderne sous Android avec Jetpack Compose.

La structure d’un composant Jetpack Compose

@Composable 
fun Hello(name: String) { 
    Text("Hello $name") 
} 

Le composant ci-dessus est écrit en utilisant Jetpack Compose. Un composant Jetpack Compose s’écrit en utilisant uniquement le langage Kotlin. Celui...

L’arbre sémantique pour gérer l’accessibilité

Nous avons vu précédemment que l’arbre de composition contient la description de l’état de l’interface à chaque instant. C’est grâce à cet arbre que le système va pouvoir dessiner l’interface sur l’écran de l’utilisateur. À chaque changement d’état, le mécanisme de Recomposition va mettre à jour cet arbre et le système pourra ainsi actualiser l’interface. En parallèle de l’arbre de composition, il existe un arbre appelé arbre sémantique qui est également mis à jour grâce au mécanisme de recomposition. Cet arbre décrit l’interface afin de la rendre interprétable par les services d’accessibilité utilisés par les personnes en situation de handicap.

Prenons par exemple le cas d’une personne aveugle qui utilise Talkback comme lecteur d’écran. Pour permettre à cette personne d’interagir avec son téléphone Android, le lecteur d’écran va avoir besoin :

  • de connaître la hiérarchie des éléments à l’écran,

  • d’avoir une description textuelle de chaque élément à l’écran,

  • de connaître le rôle des éléments et pouvoir interagir avec eux. Par exemple : un bouton, une case à cocher, un menu, un texte, etc.

  • d’ignorer les éléments purement décoratifs.

C’est l’arbre sémantique qui va fournir ces informations au lecteur d’écran.

L’arbre sémantique est également utilisé par la bibliothèque de JetPack Compose qui permet d’écrire des tests. Nous verrons cela dans le chapitre Les tests...

De l’annotation @Composable au rendu visuel à l’écran

Nous avons vu précédemment que l’annotation @Composable est interprétée lors de la compilation grâce au Compose Compiler. C’est en effet le compilateur qui vient enrichir cette fonction en lui donnant des capacités supplémentaires et c’est grâce à cela que, lors de l’exécution, cette fonction va pouvoir émettre l’interface correspondante. Mais que fait concrètement le compilateur pour enrichir cette fonction Composable ? Que se cache-t-il derrière ce concept abstrait d’émission de l’interface ? Dans cette section, nous allons voir plus en détail comment le Compose Compiler fonctionne.

Ce qui suit constitue une analyse plus approfondie du fonctionnement de Jetpack Compose. La compréhension de cette section n’est pas essentielle pour pouvoir manipuler Jetpack Compose au quotidien.

Interprétation de l’annotation Composable par le compilateur

Reprenons la fonction Composable Hello présentée initialement.

Composant Hello

@Composable 
fun Hello(name: String) { 
    Text("Hello $name") 
} 

Observons maintenant le code (simplifié) généré à la compilation grâce au Compose Compiler, qui est en fait un Kotlin Compiler Plugin spécifique à Jetpack Compose.

Code simplifié du composant Hello enrichi lors de la compilation

fun Hello(name: String, $composer: Composer, $changed: Int) { 
    $composer.start(123) 
    if ($changed) { 
        Text("Hello $name", 
                (FontStyle)null, ...

Conclusion

Bien que très technique, ce chapitre a permis de poser les bases de Jetpack Compose. Dans la suite de ce livre, les concepts introduits dans ce chapitre seront utilisés, voire définis plus en détail. Ce chapitre peut également être vu comme un glossaire de notions techniques essentielles au sein de Jetpack Compose, auquel il peut être judicieux de se référer au fil de la lecture de ce livre.