Maîtriser la navigation dans les Web Components avec Stencil Router

Les web components offrent un moyen puissant de construire des éléments d'interface utilisateur réutilisables et encapsulés pour le web moderne. À mesure que la complexité des applications augmente, une navigation efficace devient cruciale pour l'expérience utilisateur. Stencil Router fournit une solution légère et efficace pour gérer la navigation au sein des projets de web components construits avec StencilJS.

Qu'est-ce que Stencil Router ?

Stencil Router est une bibliothèque de routage déclaratif conçue spécifiquement pour les applications StencilJS. Elle vous permet de définir des routes et de les associer à des composants spécifiques, permettant une navigation fluide entre les différentes vues de votre application basée sur les web components. Contrairement aux frameworks traditionnels, Stencil Router exploite la puissance des web components pour créer un système de navigation véritablement modulaire et portable.

Pourquoi utiliser Stencil Router ?

Voici plusieurs raisons convaincantes de choisir Stencil Router pour vos projets de web components :

• Routage déclaratif : Définissez vos routes de manière claire et concise en utilisant une syntaxe de type HTML. Cela rend votre logique de routage facile à comprendre et à maintenir.
• Intégration transparente avec Stencil : Stencil Router est conçu pour fonctionner de manière transparente avec StencilJS, en tirant parti de son modèle de composants et de ses méthodes de cycle de vie.
• Chargement différé (Lazy Loading) : Stencil Router prend en charge le chargement différé des composants, améliorant les temps de chargement initiaux de la page et les performances globales de l'application. C'est particulièrement important pour les grandes applications avec de nombreuses routes.
• Routage imbriqué : Créez des structures de navigation complexes avec des routes imbriquées, vous permettant d'organiser votre application en sections logiques.
• Sécurité des types (Type Safety) : Construit avec TypeScript, Stencil Router offre une sécurité des types, vous aidant à détecter les erreurs plus tôt et à améliorer la qualité du code.
• Adapté au SEO : Stencil Router prend en charge le rendu côté serveur (SSR), rendant votre application plus adaptée au référencement naturel.
• Léger et performant : Stencil Router est conçu pour être léger et performant, garantissant une expérience utilisateur fluide.

Démarrer avec Stencil Router

Passons en revue les étapes de configuration et d'utilisation de Stencil Router dans un projet StencilJS.

1. Installation

Tout d'abord, installez Stencil Router en utilisant npm ou yarn :

            npm install @stencil-community/router

            

              
                Copy
              
            
          

Ou en utilisant yarn :

            yarn add @stencil-community/router

            

              
                Copy
              
            
          

2. Importation et configuration

Importez les modules nécessaires dans votre fichier stencil.config.ts et configurez le routeur :

            import { Config } from '@stencil/core';
import { sass } from '@stencil/sass';
import { Router } from '@stencil-community/router';

export const config: Config = {
  namespace: 'my-app',
  outputTargets: [
    {
      type: 'www',
      serviceWorker: null, // disable service workers
    },
  ],
  plugins: [
    sass(),
    Router({
      // Optional: Add custom configuration here
    })
  ],
};

            

              
                Copy
              
            
          

3. Définir vos routes

Créez un composant racine (par exemple, my-app.tsx) et définissez vos routes en utilisant les composants <stencil-route-link> et <stencil-route>. Assurez-vous d'importer le routeur en haut de votre fichier de composant :

            import { Component, h } from '@stencil/core';
import { RouterHistory, match } from '@stencil-community/router';

@Component({
  tag: 'my-app',
  styleUrl: 'my-app.css',
  shadow: true,
})
export class MyApp {
  render() {
    return (
      <div>
        <header>
          <h1>Mon App</h1>
          <nav>
            <stencil-route-link url="/">Accueil</stencil-route-link>
            <stencil-route-link url="/about">À propos</stencil-route-link>
            <stencil-route-link url="/contact">Contact</stencil-route-link>
          </nav>
        </header>

        <main>
          <stencil-route url="/" component="app-home" exact={true} />
          <stencil-route url="/about" component="app-about" />
          <stencil-route url="/contact" component="app-contact" />
          <stencil-route url="/profile/:name" component="app-profile" />
          <stencil-route component="app-not-found" />  <!-- Route fourre-tout pour 404 -->
        </main>
      </div>
    );
  }
}

            

              
                Copy
              
            
          

Explication :

• <stencil-route-link> : Crée un lien vers une route spécifique. L'attribut url spécifie l'URL cible.
• <stencil-route> : Définit une route et l'associe à un composant spécifique.
• url : Le chemin de l'URL à faire correspondre.
• component : Le nom du web component à rendre lorsque la route correspond.
• exact : (Optionnel) Spécifie si la route doit correspondre exactement. Lorsqu'il est défini sur true, la route ne correspondra que si l'URL correspond exactement au chemin spécifié. Utile pour la route de la page d'accueil.
• Une route *sans* attribut `url` agit comme une route fourre-tout, souvent utilisée pour afficher une page 404 "Non trouvé".

4. Créez vos composants

Créez les composants qui seront rendus pour chaque route (par exemple, app-home.tsx, app-about.tsx, app-contact.tsx, et app-profile.tsx). Par exemple :

            import { Component, h } from '@stencil/core';

@Component({
  tag: 'app-home',
  styleUrl: 'app-home.css',
  shadow: true,
})
export class AppHome {
  render() {
    return (
      <div>
        <h2>Page d'accueil</h2>
        <p>Bienvenue sur la page d'accueil !</p>
      </div>
    );
  }
}

            

              
                Copy
              
            
          

Répétez ce processus pour les autres composants, en créant un contenu de base pour chacun.

5. Gérer les paramètres de route

Stencil Router vous permet de passer des paramètres dans vos routes. Par exemple, dans le fichier my-app.tsx, nous avons défini une route pour /profile/:name. Pour accéder au paramètre name dans le composant app-profile, vous pouvez utiliser le décorateur @Prop avec la propriété match injectée par le routeur :

            import { Component, h, Prop } from '@stencil/core';
import { MatchResults } from '@stencil-community/router';

@Component({
  tag: 'app-profile',
  styleUrl: 'app-profile.css',
  shadow: true,
})
export class AppProfile {
  @Prop() match: MatchResults;

  render() {
    const name = this.match && this.match.params && this.match.params.name;

    return (
      <div>
        <h2>Page de profil</h2>
        <p>Bonjour, {name} !</p>
      </div>
    );
  }
}

            

              
                Copy
              
            
          

Explication :

• @Prop() match: MatchResults; : Déclare une propriété nommée match de type MatchResults. Stencil Router injecte automatiquement l'objet match dans le composant lorsque la route correspond.
• this.match.params.name : Accède au paramètre name depuis l'objet match.

Techniques de routage avancées

Stencil Router offre plusieurs fonctionnalités avancées pour gérer des scénarios de routage plus complexes.

1. Routage imbriqué

Vous pouvez créer des routes imbriquées en définissant des routes à l'intérieur d'autres composants. Cela vous permet d'organiser votre application en sections logiques et de créer des structures de navigation plus complexes. Par exemple, dans `app-about.tsx`, vous pourriez avoir :

            import { Component, h } from '@stencil/core';
import { RouterHistory } from '@stencil-community/router';

@Component({
  tag: 'app-about',
  styleUrl: 'app-about.css',
  shadow: true,
})
export class AppAbout {
  render() {
    return (
      <div>
        <h2>À propos de nous</h2>
        <p>Apprenez-en plus sur notre entreprise.</p>

        <nav>
          <stencil-route-link url="/about/team">Notre équipe</stencil-route-link>
          <stencil-route-link url="/about/history">Notre histoire</stencil-route-link>
        </nav>

        <stencil-route url="/about/team" component="app-team" />
        <stencil-route url="/about/history" component="app-history" />
      </div>
    );
  }
}

            

              
                Copy
              
            
          

Vous devriez ensuite créer les composants `app-team` et `app-history`.

2. Navigation programmatique

Parfois, vous devez naviguer par programmation (par exemple, après la soumission d'un formulaire). Vous pouvez injecter RouterHistory dans votre composant et utiliser la méthode push() pour naviguer vers une URL spécifique.

            import { Component, h, State } from '@stencil/core';
import { RouterHistory } from '@stencil-community/router';

@Component({
  tag: 'app-contact',
  styleUrl: 'app-contact.css',
  shadow: true,
})
export class AppContact {
  @State() message: string = '';

  submitForm = () => {
    // Simuler la soumission du formulaire
    setTimeout(() => {
      this.message = 'Formulaire soumis avec succès !';
      // Rediriger vers la page d'accueil après soumission
      this.navigateTo('/');
    }, 1000);
  };

  @Prop()
  history: RouterHistory

  private navigateTo = (url: string) => {
    this.history.push(url);
  }

  render() {
    return (
      <div>
        <h2>Contactez-nous</h2>
        <p>Envoyez-nous un message !</p>
        <form onSubmit={this.submitForm}>
          <button type="submit">Envoyer</button>
        </form>
        {this.message && <p>{this.message}</p>}
      </div>
    );
  }
}

            

              
                Copy
              
            
          

Important : Dans votre `stencil.config.ts`, assurez-vous que le plugin `Router` est correctement configuré. L'objet d'historique du routeur est injecté. Lorsque vous utilisez la navigation programmatique, vous devrez également mettre à jour le composant `app.tsx` ou racine pour injecter la prop history, par exemple :

            <stencil-route url="/contact" component="app-contact" history={this.history} />
            

              
                Copy
              
            
          

3. Chargement différé (Lazy Loading)

Pour améliorer les temps de chargement initiaux, en particulier dans les grandes applications, Stencil Router prend en charge le chargement différé des composants. Cela signifie que les composants ne sont chargés que lorsque leur route correspondante est activée.

Pour activer le chargement différé, assurez-vous que vos composants sont construits en tant que modules séparés. Stencil gère cela automatiquement lorsque vous construisez votre projet. Ensuite, définissez simplement vos routes comme d'habitude. Stencil Router chargera automatiquement les composants en différé lorsque cela sera nécessaire.

Par exemple, si votre application dispose d'un grand panneau d'administration, vous pouvez charger les composants d'administration en différé afin qu'ils ne soient chargés que lorsqu'un utilisateur navigue vers la section d'administration.

Bonnes pratiques pour l'utilisation de Stencil Router

Voici quelques bonnes pratiques à suivre lors de l'utilisation de Stencil Router :

• Gardez vos routes organisées : Définissez vos routes de manière logique et cohérente. Utilisez des routes imbriquées pour organiser votre application en sections.
• Utilisez des noms de route descriptifs : Choisissez des noms de route clairs et descriptifs. Cela facilitera la compréhension et la maintenance de votre logique de routage.
• Gérez les erreurs 404 : Définissez toujours une route fourre-tout pour gérer les erreurs 404 (page non trouvée). Cela offre une meilleure expérience utilisateur.
• Utilisez le chargement différé : Activez le chargement différé pour les composants qui ne sont pas immédiatement nécessaires. Cela améliorera les temps de chargement initiaux de la page et les performances globales de l'application.
• Testez vos routes : Testez minutieusement vos routes pour vous assurer qu'elles fonctionnent correctement. Utilisez des outils de test automatisés pour détecter les erreurs à un stade précoce.
• Pensez à l'internationalisation (i18n) : Pour les applications mondiales, réfléchissez à la manière dont votre stratégie de routage interagit avec l'i18n. Vous pourriez avoir besoin d'ajuster les routes en fonction de la locale de l'utilisateur. Par exemple, un utilisateur français pourrait accéder à "/fr/about" au lieu de "/about". Des bibliothèques comme i18next peuvent aider à gérer cela.
• Accessibilité : Assurez-vous que votre routage et vos liens sont accessibles aux utilisateurs handicapés. Utilisez les attributs ARIA appropriés et du HTML sémantique.

Stencil Router dans le monde réel : exemples d'applications mondiales

Voici quelques exemples hypothétiques de la manière dont Stencil Router pourrait être utilisé dans des applications réelles et mondiales :

1. Plateforme de e-commerce

Une plateforme de e-commerce pourrait utiliser Stencil Router pour gérer la navigation entre les différentes catégories de produits, les pages de détails des produits, le panier d'achat, le paiement et les comptes utilisateurs. Le chargement différé pourrait être utilisé pour charger les images et les vidéos des produits uniquement lorsque cela est nécessaire, améliorant ainsi les performances pour les utilisateurs ayant des connexions Internet plus lentes à travers le monde. Les routes pourraient également être adaptées en fonction du pays, offrant différents catalogues de produits en fonction de l'emplacement (par exemple, "/uk/products" pour le Royaume-Uni et "/de/products" pour l'Allemagne).

2. Plateforme d'apprentissage en ligne

Une plateforme d'apprentissage en ligne pourrait utiliser Stencil Router pour naviguer entre différents cours, modules, leçons, quiz et devoirs. Des routes imbriquées pourraient être utilisées pour organiser le contenu du cours en sections logiques. La navigation programmatique pourrait être utilisée pour rediriger les utilisateurs après avoir terminé un quiz ou un devoir. La plateforme pourrait offrir du contenu en plusieurs langues, en utilisant des routes comme "/en/courses" (anglais) et "/es/cursos" (espagnol). Les comptes utilisateurs pourraient également être gérés avec des routes comme "/profile/:userId", permettant aux utilisateurs de voir et de mettre à jour leurs informations de profil. De plus, la plateforme peut être conforme aux lois sur la confidentialité des données de différents pays en utilisant un routage conditionnel.

Conclusion

Stencil Router est une bibliothèque de routage puissante et flexible qui peut considérablement simplifier la navigation dans les applications de web components construites avec StencilJS. En suivant les étapes et les bonnes pratiques décrites dans ce guide, vous pouvez créer des systèmes de navigation robustes et maintenables qui améliorent l'expérience utilisateur de vos applications web. Avec son accent sur la performance, la modularité et la sécurité des types, Stencil Router est un excellent choix pour le développement web moderne.