Jetpack Compose et la création d’interfaces déclaratives avec Kotlin

Published in

AndroidMood

8 min readFeb 4, 2021

Ce qu’il faut savoir sur Jetpack Compose et comment utiliser Kotlin pour créer des UI declaratives.

Un grand bol d’air frais vient donner un nouveau coup d’éclat au développement mobile Android, de nombreux changements sont adoptés et Kotlin s’impose désormais comme le chemin par excellence vers la conception d’applications Android qui se veulent robustes et modernes. A l’heure actuelle, 70% des applications du top 1000 de PlayStore sont entièrement codées en Kotlin; De meme, Google a entièrement recodé les API et les librairies d’Android sous Kotlin ainsi que tout son nouvel “écosystème” de développement, nous voulons parler d’Android Jetpack. Cependant, cet article se focalisera sur un des paradigmes de JetPack, celui qui pose les nouvelles fondations de la conception des interfaces utilisateurs orientées composants sur Android; On parlera de Jetpack Compose ! Plusieurs questions nous viennent donc à l’esprit: Quel est le rôle de Jetpack Compose et comment l’utiliser pour créer des interfaces? quels problèmes vient t’il résoudre? Et pourquoi Kotlin sera désormais incontournable?

On ne reviendra pas sur Jetpack car on sait qu’il s’agit d’un ensemble d’outils conçus afin de faciliter le développement sur Android, je vous invite a consulter la documentation officielle pour en savoir plus.

84% des 10 000 meilleures applications du Google Play Store utilisent désormais une bibliothèque Jetpack

Introduction d’Android Jetpack

Qu’est ce qu’une interface déclarative?

Une interface déclarative ou ‘Declarative UI’ en anglais, est un concept de développement selon lequel on décrit a travers un langage de programmation l’ensemble des éléments qu’a besoin notre interface utilisateur ainsi que ce que leur structure et ce a quoi ils ressembleront. Ce concept défini une interface utilisateur en tant que fonction qui possède un état, dont la valeur peut changer au cours du temps et en fonction des événements.

Des lors, Il n’est plus nécessaire de modifier manuellement l’interface utilisateur pour refléter le nouvel état. Au lieu de cela, vous pouvez déclarer ce qu’il faut afficher dans chaque état et le framework affichera l’interface utilisateur correspondante pour l’état actuel. On parle donc de «Reactive UI» car l’interface utilisateur «réagit» aux changements d’état.

Comme exemple de paradigme d’interfaces déclaratives, nous pouvons citer:

React/React Native
SwiftUI pour iOS
Jetpack Compose pour Android
Flutter

A travers ces différentes technologies, force est de constater que la programmation d’interfaces dites déclaratives est par définition indissociable à la notion de composants. Cette approche a pour avantage de rendre le code plus structuré et bien plus facile à maintenir, car les interfaces ne sont plus un amas d’instructions empilées en une vue, mais plutôt d’un ensemble ordonné et cohérent de multiples composants distincts, chacun étant a la fois indépendants et complémentaires les uns aux autres.

Pourquoi Jetpack Compose?

Plusieurs raisons ont poussé l’équipe Android à se tourner vers le développement de Jetpack compose. Ainsi, Google le recommande désormais comme l’outil de développement UI moderne pour la conception d’interfaces. Pourquoi l’utiliser? Voici les raisons qui justifient cette assertion.

1) Franchir un nouveau cap

‘New age, new tech, new ways‘

En 10 ans l’écosystème de développement d’applications mobiles a drastiquement changé. Au crépuscule d’Android, les smartphones ne possédaient pas autant de fonctionnalités, étaient moins performants, et beaucoup plus basiques en ce qui concerne l’expérience utilisateur. Les widgets, vues, interfaces ont évolué au fil du temps, quittant d’un état primitif répondant a des exigences peu poussées, à des composants beaucoup plus complexes et élaborés. Les smartphones disposent désormais d’interfaces plus sophistiquées capables de créer des expériences agréables et immersives très recherchées par les utilisateurs finaux. Des lors, il devient primordial de concevoir et ou de s’arrimer à des technologies, langages et outils plus puissants afin d’assurer de manière optimale la satisfaction des utilisateurs et les exigences toujours plus grandissantes en terme de qualité logicielle, d’où l’avènement d’Android Jetpack, et par prolongation, de Compose.

2) Material design

Afin de garantir l’uniformité des interfaces utilisateurs des applications Android sur tous les périphériques, Google impose le Material Design comme philosophie par défaut de Jetpack Compose. Plus détaillé, plus abouti et toujours en évolution constante et entretenu à travers une documentation fournie, Material Design garantit l’universalité des vues créées peu importe les smartphones sur lesquels les applications seront installées. Google construit à travers Jetpack Compose un design system qui se veut plus cohérent, structuré et normé en ce qui concerne la création des thèmes et l’agencement des couleurs, la typographie, l’utilisation des icônes, la définition des formes et des composants. Il sera par exemple beaucoup plus facile de créer des shapes pour vos widgets ou encore de définir vos thèmes clairs et sombres avec Compose, ce qui pouvait s’avérer être un véritable casse-tête avec XML.

3) Performances

Jetpack compose nait du désir de rendre la création d’interfaces plus simple, plus rapide et plus adaptable aux besoins de plus en plus complexes en terme de performances et de maintenabilité liées aux différentes architectures de conception. Il n’en est qu’à sa phase alpha, mais les retours sont très positifs malgré des points à améliorer comme la gestion de mémoire lors du Layout Preview et donc des tests sont en train d’être effectués au vu de perfectionner l’outil pour la parution de la version 1.0 au cours l’année 2021.

4) Kotlin-first

Jetpack Compose, comme l’ensemble d’Android Jetpack est totalement fondé sur Kotlin. Afin de gagner profit au maximum de la flexibilité, la simplicité et de la diversité des possibilités que possède le langage, cette approche idiomatique s’inscrit dans l’ambition de Google de migrer totalement vers Kotlin et de se désolidariser au fil des années à venir de Java et du XML, car trop verbeux et pas assez intuitif à prendre en main.

5) Rétrocompatibilité

Bien que Jetpack Compose soit construit à partir de zéro sans aucune dépendance aux widgets Android préexistants. Il permet néanmoins que les fonctions composables soient utilisables directement dans les vues XML à l’aide d’une annotation afin que vous puissiez migrer vers Jetpack Compose de manière incrémentielle. Cependant, il est à noter qu’au moment de la rédaction de cet article, Jetpack Compose est en phase alpha, et n’est pas recommandé pour une utilisation en production. J’ose tout de même espérer que cet article suscitera en vous de l’enthousiasme afin de vous lancer à la découverte de ce nouveau venu d’Android, qui dispose déjà d’une pluralité de ressources de développement sur GitHub.

Jetpack Compose à l’action

1) Installation

Au moment où est rédigé cet article, Pour pouvoir utiliser Compose et disposer des dernières fonctionnalités d’Android Jetpack, vous devez télécharger la version Preview d’Android Studio.

Cela fait, il vous suffira de suivre les étapes suivantes afin d’utiliser compose dans votre projet:

Sélectionnez File > New > New Project dans la barre de menus.
Dans la fenêtre Select a Project Template, sélectionnez Empty Compose Activity et cliquez sur Next.
Dans la fenêtre Configure your project, procédez comme suit: Définissez le nom, le nom du package et l’emplacement du projet comme vous le feriez normalement. Notez que, dans le menu déroulant Language, Kotlin est la seule option disponible car Jetpack Compose ne fonctionne qu’avec des classes écrites en Kotlin.
Dans le menu déroulant Minimum API level, sélectionnez Niveau d’API 21 ou supérieur. Cliquez sur Finish.
Par défaut vous n’aurez pas a configurer Gradle, cependant, à titre indicatif, vous aurez des instructions semblables à celles-ci dans votre fichier:

android {
    defaultConfig {
        ...
        minSdkVersion 21
    }

    buildFeatures {
        // Enables Jetpack Compose for this module
        compose true
    }
    ...

    // Set both the Java and Kotlin compilers to target Java 8.

    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }

    kotlinOptions {
        jvmTarget = "1.8"
        useIR = true
    }

    composeOptions {
        kotlinCompilerVersion '1.4.21'
        kotlinCompilerExtensionVersion '1.0.0-alpha10'
    }
}

🎉 Tout est bon! 🎉

Vous pouvez désormais créer vos premières interfaces avec Jetpack Compose.

Le guide complet d’installation de Compose vous permettra d’avoir une description des étapes à suivre dans plusieurs cas de figure distincts: Vous pouvez importer des projets déjà conçus par Google, intégrer Compose dans vos projets existants ou alors commencer entièrement de zero de vous mêmes comme ci-dessus.

2) Prise en main

Voici un aperçu de la vue par défaut d’un projet sous Jetpack Compose

package com.example.myapplication

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.Text
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.runtime.Composable
import androidx.compose.ui.platform.setContent
import androidx.compose.ui.tooling.preview.Preview
import com.example.myapplication.ui.theme.MyApplicationTheme

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApplicationTheme {
                // A surface container using the 'background' color from the theme
                Surface(color = MaterialTheme.colors.background) {
                    Greeting("Android")
                }
            }
        }
    }
}

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    MyApplicationTheme {
        Greeting("Android")
    }
}

Thèmes et typographie

Une amélioration majeure qu’apporte Compose se situe au niveau de la définition de thèmes et de la typographie. Plus facile à mettre en place et entièrement basée sur Material Design, elle permet de faciliter la collaboration entre le concepteur UI et l’intégrateur. Elle rend également l’implementation de changements de thèmes(sombre/clair) beaucoup plus simple.

Je vous recommande un excellent article d’Alex Zhukovich qui traite ce sujet de fond en comble.

Jetpack Compose: Theme and Typography

Many Android applications have a complex User Interface because designers invest a lot of effort into adding more…

alexzh.com

Composable

“I’m a composer, I’m composing some views using composable functions, enabled by Jetpack compose and that, is called composition.” Farouk Sabiou

Google délaisse définitivement la notion d’héritage qui régissait le fonctionnement des vues préexistantes pour se focaliser sur la composition, beaucoup plus flexible et plus faciles à maintenir. Bien que la composition et l’héritage fournissent la réutilisabilité du code, la principale différence entre eux est que la composition permet la réutilisation du code sans l’étendre.

Par le principe de composition sur lequel repose toute la logique de conception de Jetpack Compose, vous pouvez créer des composants personnalisés a votre guise, selon vos exigences et à partir de plusieurs classes a travers des fonctions dites “composables”. Un exemple ci-dessous.

On termine avec cette ressource très riche et détaillée qui traite de Jetpack Compose dans son ensemble.

Jetpack Compose Over Inheritance by Andrey Kulikov & Anastasia Soboleva