Les composants

Un composant est une instance de code (d'interface et de logique liées à celle-ci) réutilisable et héritable.

Pourquoi utiliser une approche composants ?

À votre avis ?

• Réutilisation.
• Logique commune.
• Style propre au projet.
• Comportement adapté au projet.
• Héritable (composant enfant, composant parent).

Un peu d'histoire…

• Organisation en fichier (include).
• Code et affichage séparé.
• CSS (style) à côté et inclus.
• Les librairies de templates

Petit exemple de template

<div>
    <h1>{{title}}</h1>
    <p>{{contenu}}</p>
</div>

L'objectif ? Simplifier le partage.

Et la réutilisation

Exemples avec des projets open source.

• Bootstrap-Vue
• Vuetify
• Material Design 3
• Les composants Laravel

Mais un composant c'est quoi ?

Exemple avec VueJS

<mon-header></mon-header>

Un peu d'observation…

<template>
    <div @click="home">
        Mon header
    </div>
</template>
<script setup lang="js">
    import {useRouter} from "vue-router";

    const router = useRouter();
    
    function home(){
        router.go("/");    
    }
</script>
<style scopped>
    div{
        background: red;
        width: 100vw;
        height: 80px;
    }
</style>

L'important c'est … l'imbrication

<ma-page>
    <mon-header></mon-header>
    <mon-menu></mon-menu>
    <mon-contenu>
        <h1>Titre de mon contenu</h1>
        <mon-bouton></mon-bouton>
    </mon-contenu>
    <mon-footer></mon-footer>
</ma-page>

Des questions ?

Et sur Android ?

Plus compliqué ? Pas vraiment !

Qu'observez-vous ? Est-ce différent ?

Composer l'interface

• L'interface.
• La logique.
• L'interaction.
• L'apparence.

Des questions ?

• Les composants Laravel

Pour résumer

• Disponible dans plusieurs Frameworks.
• Découper en composants « fonctionnels ».
• Interface réactive.
• Interaction simplifiée.

Exemple: Un chat

Deux mises en pratique

• Créer des composants avec VueJS.
• Créer des composants avec Android et Jetpack Compose.

Des questions ?