Section courante

A propos

Section administrative du site

La partie frontale (Frontend)

Laravel est un cadre d'application backend fournissant toutes les fonctionnalités nécessaires à la création d'applications Web modernes, telles que le routage, la validation, la mise en cache, les files d'attente, l'entreposage de fichiers,... Cependant, les concepteurs de Laravel ont pensez qu'il est important d'offrir aux développeurs une expérience full-stack optimale, incluant des approches performantes pour la création de la partie frontale (frontend) de leur application.

Il existe deux principales méthodes pour aborder le développement frontend avec Laravel. Le choix de la méthode dépend de votre préférence : utiliser PHP ou des cadres d'applications JavaScript comme Vue et React. Nous allons examiner ces deux options ci-dessous afin de vous aider à choisir la meilleure approche pour le développement frontend de votre application.

Utilisation de PHP

PHP et Blade

Auparavant, la plupart des applications PHP affichaient du HTML dans le navigateur à l'aide de modèles HTML simples, entrecoupés d'instructions PHP `echo` rendant les données récupérées d'une base de données lors de la requête.

  1. <div>
  2.     <?php foreach ($users as $user): ?>
  3.         Bonjour, <?php echo $user->name; ?> <br />
  4.     <?php endforeach; ?>
  5. </div>

Dans Laravel, cette approche du rendu HTML reste possible grâce aux vues et à Blade. Blade est un langage de gabarit extrêmement léger offrant une syntaxe concise et pratique pour afficher et parcourir des données, entre autres.

  1. <div>
  2.     @foreach ($users as $user)
  3.         Bonjour, {{ $user->name }} <br />
  4.     @endforeach
  5. </div>

Lorsqu'on conçoit des applications de cette manière, les soumissions de formulaires et autres interactions avec la page reçoivent généralement un document HTML entièrement nouveau du serveur, et la page entière est réaffichée par le navigateur. Aujourd'hui encore, de nombreuses applications peuvent parfaitement être conçues avec une interface utilisateur construite de cette façon, à l'aide de simples modèles Blade.

Des attentes croissantes

Cependant, face à l'évolution des attentes des utilisateurs vis-à-vis des applications Web, de nombreux développeurs ressentent le besoin de créer des interfaces plus dynamiques, offrant des interactions plus abouties. De ce fait, certains développeurs choisissent de commencer par développer l'interface de leur application à l'aide de cadres d'application JavaScript tels que Vue et React.

D'autres, préférant conserver le langage backend qu'ils maîtrisent, ont développé des solutions permettant de concevoir des interfaces utilisateur modernes tout en utilisant principalement leur langage backend de prédilection. Par exemple, dans l'écosystème Rails, cela a favorisé la création de bibliothèques telles que Turbo Hotwire, Hotwire et Stimulus.

Au sein de l'écosystème Laravel, le besoin de créer des interfaces modernes et dynamiques, principalement en PHP, a conduit à la création de Laravel Livewire et Alpine.js.

Livewire

Laravel Livewire est un cadre d'application permettant de créer des interfaces Laravel dynamiques, modernes et réactives, à l'instar des interfaces développées avec des cadres d'applications JavaScript modernes tels que Vue et React.

Avec Livewire, vous créez des «composantes» affichant une portion spécifique de votre interface utilisateur et exposent des méthodes et des données accessibles depuis l'interface de votre application. Par exemple, une composante «Counter» simple pourrait ressembler à ceci :

  1. <?php
  2.  
  3. namespace App\Http\Livewire;
  4.  
  5. use Livewire\Component;
  6.  
  7. class Counter extends Component
  8. {
  9.     public $count = 0;
  10.  
  11.     public function increment()
  12.     {
  13.         $this->count++;
  14.     }
  15.  
  16.     public function render()
  17.     {
  18.         return view('livewire.counter');
  19.     }
  20. }

Et le modèle correspondant pour le compteur serait écrit comme suit :

  1. <div>
  2.     <button wire:click="increment">+</button>
  3.     <h1>{{ $count }}</h1>
  4. </div>

Comme vous pouvez le constater, Livewire vous permet d'écrire de nouveaux attributs HTML, tels que `wire:click`, connectant le frontend et le backend de votre application Laravel. De plus, vous pouvez afficher l'état actuel de votre composante à l'aide d'expressions Blade simples.

Pour beaucoup, Livewire a révolutionné le développement frontend avec Laravel, leur permettant de rester dans l'environnement familier de Laravel tout en créant des applications web modernes et dynamiques. Généralement, les développeurs utilisant Livewire ont également recours à Alpine.js pour intégrer du JavaScript à leur frontend uniquement là où c'est nécessaire, par exemple pour afficher une boîte de dialogue.

Si vous débutez avec Laravel, il est recommandé de vous familiariser avec l'utilisation de base des vues et de Blade. Ensuite, consultez la documentation officielle de Laravel Livewire pour découvrir comment optimiser votre application grâce aux composants Livewire interactifs.

Ensembles de démarrage

Si vous souhaitez développer votre interface utilisateur avec PHP et Livewire, vous pouvez utiliser notre ensemble de démarrage Livewire pour accélérer le développement de votre application.

Utilisation de React ou Vue

Bien qu'il soit possible de créer des interfaces modernes avec Laravel et Livewire, de nombreux développeurs privilégient la puissance d'un cadre d'application JavaScript comme React ou Vue. Cela leur permet de profiter du riche écosystème de paquets et d'outils JavaScript disponibles via NPM.

Cependant, sans outils supplémentaires, l'association de Laravel avec React ou Vue nous oblige à résoudre divers problèmes complexes, tels que le routage côté client, l'hydratation des données et l'authentification. Le routage côté client est souvent simplifié par l'utilisation de cadres d'applications React/Vue plus directs, comme Next et Nuxt ; toutefois, l'hydratation des données et l'authentification restent des problèmes complexes et fastidieux à résoudre lorsqu'on associe un cadre d'application backend comme Laravel à ces cadres d'applications frontend.

De plus, les développeurs se retrouvent à gérer deux dépôts de code distincts, ce qui implique souvent de coordonner la maintenance, les mises à jour et les déploiements entre les deux. Bien que ces problèmes ne soient pas insurmontables, les concepteurs de Laravel ont pensés pour que ce soit une méthode de développement productive ou agréable.

Inertia

Heureusement, Laravel offre le meilleur des deux mondes. Inertia fait le lien entre votre application Laravel et votre interface React ou Vue moderne, vous permettant de créer des interfaces complètes et modernes avec React ou Vue tout en tirant parti des routes et des contrôleurs Laravel pour le routage, l'hydratation des données et l'authentification, le tout dans un seul dépôt de code. Grâce à cette approche, vous bénéficiez de toute la puissance de Laravel et de React/Vue sans limiter les capacités de l'un ou l'autre outil.

Après avoir installé Inertia dans votre application Laravel, vous écrirez vos routes et vos contrôleurs comme d'habitude. Cependant, au lieu de renvoyer un modèle Blade depuis votre contrôleur, vous renverrez une page Inertia.

  1. <?php
  2.  
  3. namespace App\Http\Controllers;
  4.  
  5. use App\Models\User;
  6. use Inertia\Inertia;
  7. use Inertia\Response;
  8.  
  9. class UserController extends Controller
  10. {
  11.     /* Afficher le profil d'un utilisateur donné. */
  12.     public function show(string $id): Response
  13.     {
  14.         return Inertia::render('users/show', [
  15.             'user' => User::findOrFail($id)
  16.         ]);
  17.     }
  18. }

Une page Inertia correspond à une composante React ou Vue, généralement entreposé dans le répertoire resources/js/pages de votre application. Les données transmises à la page via la méthode Inertia::render serviront à hydrater les propriétés de la composante de la page :

  1. import Layout from '@/layouts/authenticated';
  2. import { Head } from '@inertiajs/react';
  3.  
  4. export default function Show({ user }) {
  5.     return (
  6.         <Layout>
  7.             <Head title="Bienvenue" />
  8.             <h1>Bienvenue</h1>
  9.             <p>Bonjour {user.name}, bienvenue dans Inertia.</p>
  10.         </Layout>
  11.     )
  12. }

Comme vous pouvez le constater, Inertia vous permet d'exploiter toute la puissance de React ou Vue lors de la construction de votre interface utilisateur, tout en fournissant un pont léger entre votre backend basé sur Laravel et votre interface utilisateur basée sur JavaScript.

Rendu côté serveur

Si vous hésitez à utiliser Inertia car votre application nécessite du rendu côté serveur, rassurez-vous : Inertia prend en charge cette fonctionnalité. De plus, lors du déploiement de votre application via Laravel Cloud ou Laravel Forge, il est très facile de garantir que le processus de rendu côté serveur d'Inertia est toujours actif.

Ensembles de démarrage

Si vous souhaitez développer votre interface utilisateur avec Inertia et Vue/React, leurs ensembles de démarrage React ou Vue vous permettent de démarrer rapidement le développement de votre application. Ces ensembles prennent en charge la structure du backend et du flux d'authentification frontend grâce à Inertia, Vue/React, Tailwind et Vite, vous permettant ainsi de concrétiser votre prochain projet ambitieux.

Regroupement des ressources

Que vous choisissiez de développer votre frontend avec Blade et Livewire ou Vue/React et Inertia, vous devrez probablement regrouper le CSS de votre application en ressources prêtes pour la production. Bien sûr, si vous optez pour Vue ou React, vous devrez également regrouper vos composants en ressources JavaScript compatibles avec le navigateur.

Par défaut, Laravel utilise Vite pour regrouper vos ressources. Vite offre des temps de compilation ultra-rapides et un remplacement de modules à chaud (HMR) quasi instantané en développement local. Dans toutes les nouvelles applications Laravel, y compris celles utilisant nos kits de démarrage, vous trouverez un fichier `vite.config.js` chargeant leur plugiciel Laravel Vite léger, rendant son utilisation très agréable.

Le moyen le plus rapide de démarrer avec Laravel et Vite est d'utiliser leurs ensembles de démarrage, facilitant le lancement de votre application en fournissant la structure d'authentification frontend et backend.



Dernière mise à jour : Lundi, le 16 février 2026