Junior vs Senior : Créer des Modales dans Vue

Créer une modale semble simple, mais la manière de le faire montre beaucoup sur votre niveau de développement.

Un junior va faire quelque chose de simple, qui marche, mais devient vite difficile à maintenir. Un senior structure son code pour qu’il soit flexible et réutilisable.

L’approche Junior

Le junior va souvent gérer l’état de la modale directement dans le composant avec un booléen :

<script setup lang="ts">
import { ref } from 'vue'
import BasicModal from '@/components/BasicModal.vue'

const modalVisible = ref(false)
const modalTitle = ref('')

function openModal(title: string) {
  modalTitle.value = title
  modalVisible.value = true
}

function closeModal() {
  modalVisible.value = false
}
</script>

<template>
  <button @click="openModal('Hello Modal')">Ouvrir la modale</button>
  <BasicModal v-if="modalVisible" :title="modalTitle" @close="closeModal" />
</template>

Explication :

• modalVisible décide si la modale s’affiche.

• modalTitle contient le titre de la modale.

• Quand on clique sur le bouton, on change ces valeurs.

• Ça marche, mais dès qu’il y a plusieurs modales, ce code devient lourd à gérer.

L’approche Senior

Le senior sépare logique et affichage. Il crée un store global pour gérer toutes les modales, un composant de base pour les afficher, et un contrôleur pour orchestrer le tout.

1. Store global

import { reactive, toRefs } from 'vue'

const state = reactive({ modals: [] })

export default function useModalStore() {
  const { modals } = toRefs(state)

  function openModal(component, props = {}) {
    modals.value.push({ component, props })
  }

  function closeTopModal() {
    modals.value.pop()
  }

  return { modals, openModal, closeTopModal }
}

Explication :

• modals garde toutes les modales ouvertes.

• openModal ajoute une modale à la pile.

• closeTopModal ferme la dernière modale ouverte.

• On peut ouvrir des modales de n’importe où dans l’application.

2. Composant de base

<template>
  <div class="modal-backdrop" @click="$emit('close')">
    <div class="modal-content">
      <slot />
    </div>
  </div>
</template>

Explication :

• Il ne contient pas de logique de contenu.

• Il affiche juste le contenu passé via <slot />.

• Cliquer sur le fond ferme la modale.

3. Contrôleur de modales

<template>
  <BaseModal v-if="topModal" @close="closeTopModal">
    <component :is="topModal.component" v-bind="topModal.props" />
  </BaseModal>
</template>

Explication :

• Il récupère la dernière modale de la pile.

• Il utilise le composant de base pour l’afficher.

• Il passe le contenu spécifique via component et props.

Exemple concret

Supposons qu’on ait 3 modales :

1. Modal de connexion

2. Modal de confirmation

3. Modal d’information

Junior : il faudrait gérer trois booléens différents et dupliquer beaucoup de code.
Senior : il suffit de faire :

Conclusion

• Junior : simple, fonctionne, mais difficile à maintenir si l’application grandit.

• Senior : organise le code, le rend réutilisable, testable et facile à étendre.

Le pattern senior peut s’appliquer à tous les composants complexes, pas seulement aux modales.

Inspiré de l’article du GOAT Michael Thiessen

source : – Junior vs Senior: Building Modals in Vue