LARAVEL

Il fut une époque où installer Laravel était relativement facile, mais la situation s'est lentement complexifiée. Aujourd'hui, nous nous retrouvons face à une multitude de kits de démarrage. Il y a les trois versions officielles qui utilisent respectivement React, Vue ou Livewire. Et puis, il y a la multitude d'autres propositions. Je suppose que le débutant est un peu perdu, car même les plus avisés commencent à perdre pied. Je me suis dit que, tant qu'à faire, j'allais aussi ajouter mon starter kit !

Les versions officielles

Mais commençons par le commencement. J'ai dit qu'il y a trois versions officielles, faisons un peu le point :

React avec Inertia

React

Pour ceux qui ne connaissent pas, il s'agit d'une bibliothèque JavaScript créée par Facebook pour construire des interfaces utilisateur (UI).

React vous permet de diviser votre interface en petites pièces indépendantes et réutilisables, appelées composants (par exemple, un bouton, une barre de navigation ou une carte d'utilisateur). Lorsqu'une donnée change, React met à jour uniquement la partie de la page affectée, et non toute la page. Cela rend l'application très rapide et réactive.

Il offre une Single Page Application (SPA), c'est-à-dire une application dans laquelle les pages ne se rechargent jamais complètement, offrant une navigation fluide, similaire à celle d'une application mobile ou de bureau.

En bref, React gère tout ce qui se passe dans le navigateur (le frontend). Il est idéal pour créer des interactions riches et dynamiques.

Inertia.js

Inertia.js n'est pas un framework à proprement parler, mais plutôt un adaptateur ou une « couche de liaison » qui permet de créer des applications SPA avec React ou autre, sans avoir à écrire d'API, ce qui simplifie les SPA.

Traditionnellement, l'intégration de React avec Laravel nécessitait :

• Laravel (back-end) pour gérer la base de données et l'authentification, exposée via une API REST ou GraphQL
• React (front-end) : pour faire des requêtes HTTP à l'API et afficher les données.

Inertia a changé cela : il utilise les contrôleurs. Vous continuez à utiliser Laravel comme s'il s'agissait d'une application traditionnelle (avec des routes et des contrôleurs) qui retourne des vues. Inertia remplace les vues par des composants React : au lieu de retourner une vue Blade classique, un contrôleur Laravel retourne un composant React et lui passe les données nécessaires.

Il utilise des liens standards : lorsque vous cliquez sur un lien, Inertia intercepte la requête, empêche le rechargement complet de la page et demande simplement au serveur les nouvelles données et le composant React correspondant. En bref, Inertia vous permet de profiter de la réactivité de React (le frontend) tout en conservant la simplicité de développement de Laravel (le backend), sans la complexité de gérer une API séparée.

React et Inertia

Dans le kit de démarrage, l'utilisation de React et d'Inertia permet de :

• garder la logique d'application simple : toutes les règles de gestion, l'authentification, les validations, etc., restent dans Laravel
• améliorer l'expérience utilisateur (UX) : les utilisateurs profitent d'une navigation hyper rapide et sans rechargement de page
• réduire la complexité : pas besoin de se préoccuper des appels fetch/axios et de la gestion des tokens d'API. On passe directement les données PHP aux composants React.

C'est la raison pour laquelle Inertia est souvent décrit comme « The modern monolith » : il allie la simplicité de l'approche monolithique (tout dans Laravel) à la vitesse et à l'interactivité d'une application moderne.

Vue avec Inertia

Vue.js

Vue.js est un framework JavaScript (un peu plus complet qu'une simple bibliothèque comme React) conçu pour créer des interfaces utilisateur (UI). Il est célèbre pour sa simplicité et sa courbe d'apprentissage facile. Son concept clé repose sur les composants et la réactivité simple.

À l'instar de React, Vue.js permet de diviser l'interface en composants réutilisables. Ces composants sont généralement définis dans des fichiers .vue (appelés Single File Components ou SFC), qui regroupent le HTML, le CSS et le JavaScript.

Vue est conçu pour être simple à intégrer dans des projets existants ou à utiliser pour des applications complexes. Sa syntaxe est très claire.

• réactivité : Vue gère de manière très efficace les mises à jour du DOM (Document Object Model). Lorsque vous modifiez une donnée dans votre code JavaScript, Vue met à jour automatiquement et intelligemment la partie correspondante de l'interface utilisateur.
• framework progressif : vous pouvez l'utiliser pour ajouter un élément dynamique à une page (approche légère) ou pour créer une application à page unique (SPA) complète.

En résumé, Vue.js gère la partie frontend (côté navigateur) en offrant une expérience utilisateur rapide et dynamique grâce à son système de composants réactifs.

Vue.js et Inertia

Pourquoi associer Laravel, Vue et Inertia ? Cette combinaison est très populaire, car elle offre :

• une vitesse de développement élevée : il n'est pas nécessaire de coder l'API REST. Les données sont transmises directement de Laravel à Vue
• une expérience utilisateur moderne : l'utilisateur navigue sans rechargement de page, bénéficiant ainsi de la rapidité d'une SPA grâce à Vue.js

Simplicité du monolithe : l'ensemble de l'application reste unifié sous le même projet Laravel, ce qui est plus simple à déployer et à maintenir que deux projets séparés (backend API + frontend SPA). C'est ainsi une excellente façon de créer des applications modernes et rapides, sans la complexité de l'approche API + SPA.

Livewire

Il s'agit d'un framework « full-stack » (c'est-à-dire couvrant à la fois le frontend et le backend) qui permet de construire des interfaces utilisateur dynamiques et réactives en utilisant principalement PHP et le système de vues Blade de Laravel. Je l'ai fréquemment utilisé dans les projets de ce blog et pour le blog lui-même.

Le concept clé est d'utiliser PHP comme « frontend ». Livewire vous permet d'écrire la logique de vos composants côté frontend (boutons interactifs, formulaires de recherche, listes dynamiques) en utilisant du code PHP côté backend. Il masque ainsi la complexité de JavaScript.

Chaque action de l'utilisateur (clic sur un bouton, saisie dans un champ) déclenche une requête AJAX en arrière-plan. Cette requête appelle une méthode de votre classe PHP Livewire. La classe PHP met à jour ses données et Livewire renvoie uniquement le fragment de HTML qui a changé (grâce à un processus appelé « diffing »), sans recharger toute la page.

• productivité : vous restez dans l'écosystème PHP/Blade. Vous n'avez pas besoin d'apprendre un framework JavaScript réactif comme React ou Vue
• moins de JavaScript : le JavaScript nécessaire est minimal (il est souvent utilisé seulement pour initialiser Livewire), ce qui réduit la quantité de code à maintenir

En résumé, Livewire permet de créer des interfaces utilisateur modernes et réactives tout en utilisant principalement les compétences et les outils du développeur backend Laravel (PHP et Blade).

Mais le starter kit impose l'utilisation de fluxUI, ce que je déplore. Je ne vais pas développer ce point parce que je l'ai déjà fait dans cet article. J'avais alors proposé du code purement Tailwind pour obtenir le même résultat. Désormais, je vais aller un peu plus loin et différemment en proposant un starter kit exclusivement Livewire et Tailwind avec un look plus moderne. Il est disponible sur github.

Fortify

J'ai déjà évoqué Fortify à plusieurs reprises sur ce blog, mais cela commence à dater. J'avais notamment montré comment mettre en œuvre une authentification avec Fortify et paper.css. Fortify est un frontend headless pour l'ensemble des fonctionnalités d'authentification de Laravel. Il fournit la logique du backend pour l'ensemble des besoins de l'authentification (enregistrement, connexion, réinitialisation du mot de passe, vérification de l'e-mail, authentification à deux facteurs, etc.), mais ne propose pas les vues (fichiers Blade). Son utilisation est optionnelle et il est tout à fait possible de créer une authentification complète sans l'utiliser. Mais pourquoi s'en priver alors qu'il est si pratique ? D'ailleurs, les trois kits de démarrage officiels l'utilisent.

Il offre une grande flexibilité en vous permettant de personnaliser la logique de la plupart de ses fonctionnalités à l'aide d'actions ou de closures. Vous pouvez par exemple modifier la façon dont un utilisateur est créé lors de l'inscription.

Gestion de l'authentification basique

Il gère toute la logique de base de l'authentification :

• Inscription (registration) : création d'un nouvel utilisateur
• Connexion (Login) : authentification de l'utilisateur
• Déconnexion (logout) : fin de la session utilisateur
• Réinitialisation du mot de passe : gestion de l'envoi du lien de réinitialisation et de la mise à jour du mot de passe
• Vérification de l'e-mail : envoi et validation du lien de vérification

Fonctionnalités de sécurité

• Mise à jour du profil/mot de passe : logique pour la mise à jour sécurisée des informations de l'utilisateur et de son mot de passe
• Authentification à deux facteurs (2FA) : prise en charge de la logique du 2FA via les codes TOTP (Time-Based One-Time Password), mais interface utilisateur à fournir

Le starter kit

De quoi a-t-on vraiment besoin dans un kit de démarrage ? En fait, pas de beaucoup de choses, car on va ensuite charger des librairies différentes selon notre projet. En revanche, on aura pratiquement toujours besoin de la partie authentification, et on ne va pas réinventer la roue à chaque fois ! Si l'on a choisi d'utiliser React ou Vue.js, autant utiliser les kits de démarrage correspondants. En revanche, pour Livewire, c'est un peu plus délicat à cause de la présence de fluxUI. J'ai pour habitude d'utiliser le starter kit officiel, puis de faire un peu de ménage. Mais je me suis dit qu'autant créer un starter kit déjà épuré. C'est ce que je propose. 

Je suis resté minimaliste avec juste le fondamental de l'authentification : connexion et déconnexion, enregistrement, réinitialisation du mot de passe et vérification de l'email. Et j'ai prévu de base un look sympa. J'ai suivi le principe des kits officiels en utilisant Fortify pour alléger le code.

Fortify

Pour la mise en oeuvre de Fortify on a un provider :

C'est là qu'on configure les actions et les vues :

private function configureActions(): void
{
    Fortify::resetUserPasswordsUsing(ResetUserPassword::class);
    Fortify::createUsersUsing(CreateNewUser::class);
}

private function configureViews(): void
{
    Fortify::loginView(fn () => view('auth.login'));
    Fortify::verifyEmailView(fn () => view('auth.verify-email'));
    Fortify::registerView(fn () => view('auth.register'));
    Fortify::resetPasswordView(fn () => view('auth.reset-password'));
    Fortify::requestPasswordResetLinkView(fn () => view('auth.forgot-password'));
}

On a aussi un fichier de configuration. c'est là qu'on définit les fonctionnalités qu'on désire :

'features' => [
    Features::registration(),
    Features::resetPasswords(),
    Features::emailVerification(),
    // Features::updateProfileInformation(),
    // Features::updatePasswords(),
    // Features::twoFactorAuthentication([
    //    'confirm' => true,
    //    'confirmPassword' => true,
        // 'window' => 0,
    //]),
],

Je n'ai conservé que les fonctionnalités de base, mais il est très facile d'en ajouter.

Les vues

Les vues sont regroupées dans un dossier de façon classique :

D'ailleurs au passage, dans le kit officiel avec Livewire, ces vues se situent dans le dossier livewire, ce qui me semble injustifié puisqu'on ne l'utilise pas pour ces vues.

Il y a quelques composants :

La plupart sont juste récupérés du kit officiel à part celui pour les inputs.

Voilà ce que ça donne au niveau visuel avec deux exemples :

Sobres et esthétiques. Il peuvent être utilisés tels quels, ou être facilement adapté à un autre environnement graphique.

Conclusion

A la base je voulais juste me faire un kit personnel mais je me suis dit qu'il pourrait intéresser d'autres personnes désireuses d'avoir un point de départ à la fois simple et esthétique. J'attends vos commentaires éventuels !