Aller au contenu
PROJET WEB DYNAMIQUE

Pages

Pages avec Inertia

Inertia.js est un outil qui facilite la création d'applications mono-page (SPA) avec des méthodologies de serveur traditionnelles comme Laravel, sans nécessiter d'API séparée. Il sert de pont entre le backend et le frontend, permettant une expérience utilisateur fluide et dynamique.

Concept de base

Fonctionnement général

Dans une application utilisant Inertia, chaque page correspond à une route et un contrôleur dans le backend, ainsi qu'à un composant JavaScript dans le frontend, spécifiquement Vue.js pour ce cours. Ce modèle permet de gérer le routage et la logique côté serveur tout en offrant une expérience utilisateur comparable à une SPA.

Avantages clés

  • Pas d'API nécessaire : Inertia transmet directement les données aux composants Vue.js, éliminant le besoin d'une API dédiée.
  • Chargement préalable des données : Les données nécessaires sont récupérées avant le rendu par le navigateur, supprimant les états de chargement et améliorant l'expérience utilisateur.

Création de pages

Les pages Inertia sont des composants JavaScript, ici spécifiquement des composants Vue.js.

Exemple pratique

Prenons le fichier User/Show.vue dans une application Laravel, qui est un composant Vue.js utilisant Inertia.js.

Composant Vue.js

<script setup>
import Layout from './Layout'
import { Head } from '@inertiajs/vue3'

defineProps({ user: Object })
</script>

<template>
  <Layout>
    <Head title="Welcome" />
    <h1>Welcome</h1>
    <p>Hello {{ user.name }}, welcome to your first Inertia app!</p>
  </Layout>
</template>

Ce composant affiche un message de bienvenue à l'utilisateur, avec les données passées comme props.

Contrôleur Laravel

use Inertia\Inertia;

class UserController extends Controller
{
    public function show(User $user)
    {
        return Inertia::render('User/Show', [
          'user' => $user
        ]);
    }
}

La méthode show renvoie une réponse Inertia qui rend le composant User/Show.vue, en passant l'objet user.

But de cette approche

Inertia simplifie le développement des SPAs en utilisant des pratiques de développement traditionnelles, réduisant la complexité et augmentant l'efficacité. Elle permet de se concentrer sur la logique métier tout en offrant une interface utilisateur réactive et moderne.

Optimisation des réponses Inertia

Pourquoi optimiser les réponses?

Optimiser les réponses permet de minimiser la latence et d'améliorer la réactivité de l'application. En ne transmettant que les données nécessaires, vous évitez les surcharges inutiles et assurez une expérience utilisateur plus fluide, surtout sur des réseaux lents ou des appareils à faible performance.

Comment optimiser les réponses

Pour illustrer l'optimisation des réponses, utilisons l'exemple d'un contrôleur qui gère l'affichage d'un utilisateur (User) dans une application Laravel utilisant Inertia.js.

Exemple de contrôleur optimisé

use Inertia\Inertia;

class UserController extends Controller
{
    public function show(User $user)
    {
        // Création d'une réponse Inertia en sélectionnant uniquement les attributs nécessaires
        return Inertia::render('User/Show', [
            'user' => $user->only('id', 'name', 'email', 'created_at')
        ]);
    }
}

Dans cet exemple, la méthode only est utilisée pour sélectionner uniquement les attributs spécifiques de l'objet User qui sont nécessaires pour la page. Cela évite de transmettre des données superflues comme les mots de passe ou les informations sensibles qui ne sont pas utilisées par la vue.

Avantages de cette approche

  • Réduction de la bande passante : Moins de données sont transférées entre le serveur et le client.
  • Amélioration des performances : Le serveur traite moins de données, et le client traite moins de JSON, ce qui accélère le rendu.
  • Sécurité accrue : En limitant les données exposées aux clients, vous réduisez le risque de fuite d'informations sensibles.