Les Méthodes de Routage
Objectifs
Les objectifs de cette vidéo sont :
- Comprendre le modèle SPA et ses avantages.
- Apprendre les deux types principaux de routage pour les applications SPA.
- Savoir implémenter un routeur basé sur HTML5 History API et le hashing.
Résumé
Découvrons le modèle SPA et les techniques de routage, essentielles pour créer des applications modernes et rapides à charger.
Description
De nombreuses applications modernes sont basées sur le modèle SPA (Single Page Application). Du point de vue des utilisateurs, cela signifie que l'ensemble du site web ressemble à une application sur une seule page. Le temps pour passer d'une page à l'autre est réduit car il n'y a pas de nouvelles pages à charger. Tout le site web tient sur une seule page.
C'est ainsi que Facebook, Google et de nombreux autres sites web fonctionnent. Pour mettre en place une application SPA, vous devez utiliser un service de routage. Ce service permettra d'accéder aux différentes pseudo-pages en examinant l'URL.
Deux types de routeurs sont envisageables : Un routeur basé sur l'API HTML5 History. Pour créer ce type de routeur, on utilise les méthodes JavaScript History.pushState et History.replaceState pour modifier l'URL des pseudo-pages. Les URLs générées sont propres, par exemple https://domain.com/list. Les pseudo-pages sont donc SEO-Friendly. Ce type de routeur est adapté aux sites traditionnels dans lesquels le référencement est primordial. Notez cependant qu'il nécessite une prise en charge côté serveur.
Il existe également un routeur basé sur le hashing. Ce type de routeur repose sur le fait que chaque changement effectué dans la partie qui suit le caractère dièse (hashtag) dans l'URL provoque la création d'une nouvelle entrée dans la pile de l'historique des pages visitées. Les URLs ressemblent à https://domain.com/#list. Ces pseudopages ne sont malheureusement pas SEO-friendly. Ce type de routeur est adapté aux applications SaaS. Il ne nécessite aucune prise en charge côté serveur.
Dans les vidéos suivantes, je vais vous montrer comment utiliser un routeur basé sur le hashing. Et dans la dernière partie de la formation dédiée à SvelteKit 1.0, vous verrez comment créer des sites complets totalement SEO-friendly en utilisant SvelteKit 1.0.
Questions fréquentes
Programme détaillé
Module 1 - Introduction et premiers pas
Module 2 - La syntaxe de base de Svelte
Module 3 - Conditions, boucles et gestion événementielle
Module 4 - Les composants
Module 5 - Slots et Lifecycle hooks
Module 6 - Gestion des formulaires
Module 7 - Les stores de Svelte
Module 8 - Animations et transitions
Module 9 - Une application SPA avec Svelte
Module 10 - SvelteKit
