Mises en page dynamiques avec Vue jsx : un guide pour des interfaces utilisateur flexibles et maintenables

Écrit par Dubem Izuorah

Avez-vous déjà passé des heures à peaufiner la même mise en page Web sur plusieurs pages ou eu du mal à adapter votre interface utilisateur à l'évolution des données sans se casser ? Ces défis courants peuvent ralentir votre processus de développement et conduire à un code frustrant et sujet aux erreurs.

Présentation des mises en page dynamiques

En créant des mises en page au moment de l'exécution basées sur des données, vous pouvez créer des applications flexibles, maintenables et évolutives qui s'adaptent sans effort aux changements. Cette approche, appelée Mise en page dynamique, élimine le besoin de modifications HTML répétitives, permettant à votre interface utilisateur de rester synchronisée de manière transparente avec vos données.

Dans cet article, nous explorerons comment les mises en page dynamiques peuvent transformer votre flux de travail de développement et élever vos projets.

Pourquoi utiliser des mises en page dynamiques ?

Les mises en page dynamiques sont particulièrement utiles lorsque le contenu change fréquemment ou lors de l'affichage d'interfaces utilisateur réactives qui tirent des API, d'autres sources de données ou répondent aux interactions des utilisateurs.

Avantages des mises en page dynamiques

• Flexibilité : ajustez facilement les composants de l'interface utilisateur en fonction des données sous-jacentes sans modifier le code HTML ou le code du modèle.
• Maintenabilité : Adhérez au principe DRY (Don't Repeat Yourself), réduisant le code répétitif et simplifiant la maintenance.
• Évolutivité : gérez votre interface utilisateur par programmation, permettant des mises à jour, des ajouts ou des suppressions faciles d'éléments.
• Réduction des erreurs : minimisez les modifications HTML manuelles, réduisant ainsi le risque d'erreurs.
• Réactivité améliorée : affichez ou masquez dynamiquement les éléments de l'interface utilisateur en fonction des conditions, ce qui rend l'interface plus réactive aux interactions des utilisateurs ou aux modifications de données.

Scénarios pratiques pour les mises en page dynamiques

Les mises en page dynamiques brillent dans divers scénarios du monde réel, tels que :

• Formulaires : pour les applications gourmandes en formulaires, il peut être préférable d'abstraire les champs de votre formulaire dans une propriété calculée associée à une bibliothèque de validation. Dans la mise en page, vous pouvez parcourir votre propriété pour afficher de manière conditionnelle les champs de formulaire et les propriétés telles que les étiquettes, les noms de classe, les messages de validation, etc.
• Listes d'articles de blog : gérez et mettez à jour le contenu de chaque carte postale de manière dynamique en fonction de ses données.
• Blocs de contenu : Organisez et affichez efficacement divers éléments de contenu.
• Listes d'utilisateurs, éléments de navigation, panneaux de tableau de bord : garantissez un style cohérent et des ajustements faciles sans mises à jour HTML manuelles.
• Sections du site Web : Générez dynamiquement des sections pour maintenir une mise en page cohérente et facilement ajustable.

En générant ces éléments de manière dynamique, vous garantissez la cohérence, simplifiez les ajustements et maintenez une base de code propre.

Construire une barre de navigation dynamique

Acquérons une expérience pratique des mises en page dynamiques en créant une barre de navigation dynamique. Pour référence, voici le dépôt Github de ce tutoriel.

Exigences

Imaginez que vous développez une plateforme de paiement et que vous deviez créer un composant de barre de navigation propre et extensible, comme indiqué dans les captures d'écran ci-dessous :

Barre de navigation lorsqu'un utilisateur est connecté

Barre de navigation sans utilisateur connecté

Configuration de l'environnement

Pour nous concentrer sur les mises en page dynamiques, nous n'entrerons pas ici dans les détails de la configuration de l'environnement. Vous pouvez trouver les exemples de code complets dans notre référentiel GitHub.

Technologies utilisées :

1. Nuxt — Cadre Vue
2. Nuxt TailwindCSS — Style
3. Icônes de phosphore Vue — Composants d'icônes

Approche statique

Un composant Navbar statique implique de nombreuses balises et propriétés HTML, ce qui rend le code difficile à lire et à maintenir.

La mise à jour d'une telle mise en page est sujette aux erreurs, en particulier avec des éléments répétitifs partageant les mêmes propriétés ou le même style.

Bien qu'une approche statique soit utile pour la rédaction de mises en page, les mises en page dynamiques sont préférables pour la maintenabilité et la collaboration.

Exemple de barre de navigation statique :

? App.vue

<template>
  <nav class="w-screen border-b py-4">
    <div class="container mx-auto flex items-center gap-10">
      <!-- Logo -->
      <NuxtLink href="/" class="flex items-center">
        <img src="https://logo.clearbit.com/google.com" class="w-10 h-10 object-contain" />
      </NuxtLink>

<!-- Dashboard or Home Link -->
      <NuxtLink v-if="user" href="/dashboard" class="flex items-center">
        <PhGauge size="24" />
        <span class="ml-2">Dashboard</span>
      </NuxtLink>
      <NuxtLink v-else href="/home" class="flex items-center">
        <PhHouseSimple size="24" />
        <span class="ml-2">Home</span>
      </NuxtLink>
      <!-- Spacer -->
      <div class="ml-auto"></div>
      <!-- Add Funds Button (Visible only when user is authenticated) -->
      <button v-if="user" class="flex items-center">
        <span class="text-white bg-green-500 px-4 py-2 rounded-lg">Add Funds</span>
      </button>
      <!-- User Avatar (Visible only when user is authenticated) -->
      <div v-if="user" class="flex items-center">
        <Avatar src="https://randomuser.me/api/portraits/men/40.jpg" />
        <span class="ml-2">Dubem Izuorah</span>
      </div>
      <!-- Auth Button -->
      <button class="flex items-center" @click="user = !user">
        <span>{{ user ? 'Logout' : 'Login' }}</span>
      </button>
    </div>
  </nav>
  <main class="h-64 bg-gray-100 flex justify-center pt-10 text-xl">App Here</main>
</template>
<script setup lang="jsx">
import { ref } from "vue";
import { NuxtLink, Avatar } from "#components";
import { PhGauge, PhHouseSimple } from "@phosphor-icons/vue";
// Simulate user authentication status
const user = ref(true);
</script>

Alors que les mises en page statiques peuvent suffire pour des interfaces simples, les mises en page dynamiques offrent une maintenabilité et une évolutivité supérieures.

Dynamic Approach

To create a dynamic navbar, we’ll want to define our layout data and generate UI components based on this data.

Defining the Data

Instead of hard-coding each menu item, we can create a list of menu items in our script with properties like title, image, to, icon, render, and class. This allows us to dynamically generate the navbar based on the data.

? App.vue

<script setup lang="jsx">
// Import necessary components
import { ref, computed } from "vue";
import { NuxtLink, Avatar } from "#components";
import { PhGauge, PhHouseSimple } from "@phosphor-icons/vue";

// Simulate user authentication status
const user = ref(true);
// Define menu items
const items = computed(() => [
  {
    key: "logo",
    image: "https://logo.clearbit.com/google.com",
    href: "/"
  },
  {
    icon: user.value ? PhGauge : PhHouseSimple,
    key: "dashboard",
    title: user.value ? "Dashboard" : "Home",
    to: user.value ? "/dashboard" : "/home",
  },
  {
    key: "spacer",
    class: "ml-auto",
  },
  {
    key: "add-funds",
    render: () => <span class="text-white bg-green-500 px-4 py-2 rounded-lg">Add Funds</span>
  },
  {
    key: "user",
    render: () => <Avatar src="https://randomuser.me/api/portraits/men/40.jpg" />,
    title: "Dubem Izuorah",
    hide: !user.value
  },
  {
    key: "auth",
    title: user.value ? "Logout" : "Login",
    onClick: () => user.value = !user.value
  },
]);
// Filter out hidden items
const menuItems = computed(() => items.value.filter(item => !item.hide));
</script>

Key Takeaways:

1. Reactive Layout : Use computed properties to update the layout based on reactive data like user.
2. Conditional Rendering : Apply different values using ternary operators based on state.
3. JSX Integration : Utilize JSX to include HTML elements and Vue components directly within property values.
4. Dynamic Properties : Use properties like hide to conditionally display items.
5. Event Handling : Store functions or event handlers (e.g., onClick) within data objects.
6. Modular Data Management : Move layout data to Vue composables or external JSON files for better organization.

Defining the Avatar Component

Create an Avatar component used within the dynamic navbar.

? Avatar.vue

<template>
  <div class="rounded-full w-10 h-10 bg-gray-100 overflow-hidden">
    <img class="w-full h-full object-cover" :src="src" />
  </div>
</template>

<script setup>
const props = defineProps({
  src: {
    type: String,
    required: true,
  },
})
</script>

This component creates a reusable avatar element that can display different images based on the ‘src’ prop passed to it. This makes it flexible and easy to use throughout your application for displaying user avatars or profile pictures.

Building the Layout

Use the defined data to render the navbar dynamically.

? App.vue

<template>
  <nav class="w-screen border-b py-4">
    <div class="container mx-auto flex items-center gap-10">
      <component
        v-for="item in menuItems"
        :key="item.key"
        :is="item.to ? NuxtLink : 'button'"
        v-bind="item"
        @click="item.onClick"
        class="flex items-center"
      >
        <img v-if="item.image" :src="item.image" class="w-10 h-10 object-contain" />
        <component v-if="item.render" :is="item.render" />
        <component v-if="item.icon" :is="item.icon" :size="24" />
        <span v-if="item.title" class="ml-2">{{ item.title }}</span>
      </component>
    </div>
  </nav>
  <main class="h-64 bg-gray-100 flex justify-center pt-10 text-xl">App Here</main>
</template>

<script setup lang="jsx">
// The script remains the same as above
</script>

Key Takeaways:

1. v-bind Usage : Attach multiple properties to elements simultaneously, keeping the template clean.
2. Unique Keys : Use the key attribute to prevent rendering issues during dynamic updates.
3. Dynamic Components : Utilize Vue’s dynamic components to render different elements based on data.
4. Event Binding : Attach events like @click dynamically based on data properties.
5. Component Modularity : Break down components further and import them as needed for better scalability.

By following this approach, you create a dynamic and flexible horizontal navbar that’s easy to extend or modify. This method not only saves time and effort but also ensures your codebase remains clean and maintainable.

Enhancing Flexibility with Vue JSX

Vue JSX allows developers to write Vue components using a syntax similar to React’s JSX, offering greater flexibility and expressiveness. Unlike Vue’s typical template-based approach, JSX allows you to embed HTML-like elements directly inside JavaScript logic. This is particularly useful in dynamic layouts where you need to generate or manipulate UI elements based on dynamic data.

Instead of separating logic and markup across different sections of the component (template and script), JSX enables you to manage both in one cohesive block of code.

In our solution, JSX helps simplify how we dynamically render components like the Avatar or conditional elements such as the “Add Funds” button.

For example, instead of hardcoding these elements into a template, we can dynamically generate them using a render function in JavaScript.

This allows us to update components like the navbar with real-time data, such as user authentication status, without duplicating code or scattering logic across the template and script sections.

By using JSX, we maintain cleaner, more maintainable code, while still leveraging Vue’s reactivity and flexibility.

Next Steps

Now that we understand dynamic layouts, it’s time to put your knowledge into practice. Here are some suggested next steps:

1. Refactoriser les projets existants : identifiez et refactorisez les parties de vos projets en cours où les mises en page dynamiques peuvent améliorer l'efficacité et la lisibilité, en particulier dans les zones avec du HTML ou une logique de composant répétitive.
2. Intégrer avec le CMS : Expérimentez en intégrant un CMS ou d'autres systèmes à vos mises en page dynamiques pour créer des interfaces utilisateur encore plus dynamiques et réactives.
3. Collaborez avec votre équipe : partagez vos idées sur les mises en page dynamiques avec votre équipe. Discutez de la manière dont vous pouvez collectivement tirer parti des mises en page dynamiques dans vos projets pour augmenter la productivité et favoriser une culture d'amélioration continue.
4. Explorer les cas d'utilisation avancés : continuez à explorer des applications plus avancées de mises en page dynamiques. La maîtrise vient d'une pratique et d'une exploration constantes.

En suivant ces étapes, vous êtes sur la bonne voie pour maîtriser les mises en page dynamiques. Pour une expérience encore plus fluide dans la création d'interfaces dynamiques, consultez notre cours sur les interfaces faciles avec Vuetify, la bibliothèque de composants populaire pour les développeurs Vue.js.

En adoptant des mises en page dynamiques, vous pouvez rationaliser votre processus de développement, améliorer la flexibilité de votre application et maintenir une base de code plus propre et plus maintenable. Commencez dès aujourd'hui à intégrer des mises en page dynamiques dans vos projets et découvrez l'impact transformateur sur votre flux de travail et la qualité de vos applications.

Publié à l'origine sur https://www.vuemastery.com le 5 septembre 2024.

---

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!