Algorithme de calcul de la progression avec useFormStatus de React : Estimation de l'achèvement

Le hook useFormStatus, introduit dans React 18, fournit des informations précieuses sur l'état d'une soumission de formulaire. Cependant, il ne fournit pas nativement de pourcentage de progression. Cet article explore comment implémenter un algorithme de calcul de progression pour estimer l'achèvement des soumissions de formulaires asynchrones en utilisant useFormStatus, améliorant ainsi l'expérience utilisateur lors d'opérations potentiellement longues.

Comprendre useFormStatus

Avant de plonger dans l'algorithme, rappelons ce que useFormStatus offre. Il renvoie un objet avec des propriétés qui reflètent l'état d'une soumission de formulaire. Les propriétés clés incluent :

• pending : Un booléen indiquant si le formulaire est en cours de soumission.
• data : Les données passées à l'action du formulaire.
• method : La méthode HTTP utilisée pour la soumission du formulaire (par ex., 'POST', 'GET').
• action : La fonction associée à l'attribut action du formulaire.
• error : Un objet d'erreur si la soumission a échoué.

Il est important de noter que useFormStatus lui-même ne suit pas la progression de l'opération asynchrone sous-jacente. Il nous indique simplement si le formulaire est en cours de soumission et s'il est terminé (avec succès ou avec une erreur).

Le défi : Estimer l'achèvement

Le principal défi est d'estimer la progression de la soumission du formulaire, en particulier lorsque l'action implique le téléversement de fichiers, le traitement de grands ensembles de données ou l'interaction avec des API externes. Ces opérations peuvent prendre des durées variables, et fournir aux utilisateurs un retour visuel (par ex., une barre de progression) est crucial pour une bonne expérience utilisateur.

Conception de l'algorithme : Une approche étape par étape

Notre algorithme décomposera l'opération asynchrone en étapes gérables et suivra la progression de chaque étape. Voici une approche générale :

1. Définir les étapes : Identifier les étapes distinctes au sein du processus de soumission du formulaire.
2. Attribuer des poids : Attribuer un poids relatif (pourcentage) à chaque étape en fonction de sa durée ou de sa complexité estimée.
3. Suivre l'achèvement : Surveiller l'achèvement de chaque étape.
4. Calculer la progression : Calculer la progression globale en fonction des poids et de l'état d'achèvement de chaque étape.
5. Mettre à jour l'interface utilisateur : Mettre à jour l'interface utilisateur avec la progression calculée.

1. Définir les étapes

Les étapes dépendront du formulaire spécifique et de l'opération asynchrone sous-jacente. Voici quelques exemples courants :

• Validation : Validation des données du formulaire avant la soumission.
• Préparation des données : Préparation des données pour la soumission (par ex., formatage, encodage).
• Téléversement de fichier (le cas échéant) : Téléversement de fichiers sur le serveur. Cette étape peut être subdivisée en morceaux pour un meilleur suivi de la progression.
• Traitement par le serveur : Le serveur traite les données soumises.
• Gestion de la réponse : Gestion de la réponse du serveur (par ex., analyse, affichage des résultats).

Exemple : Prenons un formulaire pour soumettre un article de recherche. Les étapes pourraient être :

1. Validation des détails de l'auteur et du résumé.
2. Téléversement de l'article (PDF).
3. Vérification de plagiat côté serveur.
4. Indexation de l'article.
5. Notification aux relecteurs.

2. Attribuer des poids

Attribuez un poids (pourcentage) à chaque étape, reflétant son importance relative ou sa durée estimée. La somme de tous les poids doit être égale à 100 %. Il est souvent utile de baser ces poids sur du profilage ou des données historiques pour garantir une précision raisonnable. En l'absence de ces données, vous pouvez commencer par une estimation éclairée et affiner les poids au fil du temps à mesure que vous collectez des métriques de performance.

Exemple (Soumission d'un article de recherche) :

• Validation : 5 %
• Téléversement de l'article : 40 %
• Vérification de plagiat : 30 %
• Indexation : 15 %
• Notification : 10 %

Remarque : L'étape de téléversement de l'article a le poids le plus élevé car elle implique le transfert de fichiers potentiellement volumineux, ce qui en fait l'opération la plus longue. La vérification de plagiat est également importante car elle implique probablement un traitement complexe côté serveur.

3. Suivre l'achèvement

C'est ici que vous surveillez l'achèvement de chaque étape. La méthode de suivi de l'achèvement dépendra de la nature de chaque étape.

• Opérations côté client (Validation, Préparation des données) : Utilisez des indicateurs ou des variables d'état pour indiquer quand une étape est terminée.
• Téléversement de fichier : Utilisez l'objet XMLHttpRequest ou l'écouteur d'événements upload.onprogress de l'API fetch pour suivre la progression du téléversement de chaque morceau. Calculez le pourcentage en fonction des octets transférés par rapport au total des octets.
• Traitement par le serveur : C'est souvent la partie la plus difficile. Si le serveur fournit des mises à jour de progression (par ex., via des WebSockets, des Server-Sent Events ou un mécanisme de polling), utilisez ces mises à jour pour suivre la progression. Sinon, vous devrez peut-être vous fier à des heuristiques ou supposer une durée fixe.

Important : Lorsque vous traitez avec le traitement côté serveur, envisagez de mettre en œuvre un mécanisme pour que le serveur envoie des mises à jour de progression. Cela améliorera considérablement la précision de votre estimation de la progression. Par exemple, si le serveur traite une vidéo, il pourrait envoyer des mises à jour après le traitement de chaque image.

4. Calculer la progression

Calculez la progression globale en additionnant les pourcentages d'achèvement pondérés de chaque étape.

progressionGlobale = (poids1 * achèvement1) + (poids2 * achèvement2) + ... + (poidsN * achèvementN)

Où :

• poidsN est le poids de l'étape N (sous forme décimale, par ex., 0.40 pour 40 %).
• achèvementN est le pourcentage d'achèvement de l'étape N (sous forme décimale, par ex., 0.75 pour 75 %).

Exemple (en supposant que le téléversement de l'article est à 50 %, la vérification de plagiat à 25 % et toutes les étapes précédentes sont terminées) :

progressionGlobale = (0.05 * 1.00) + (0.40 * 0.50) + (0.30 * 0.25) + (0.15 * 0.00) + (0.10 * 0.00) = 0.05 + 0.20 + 0.075 + 0 + 0 = 0.325

Par conséquent, la progression globale estimée est de 32,5 %.

5. Mettre à jour l'interface utilisateur

Mettez à jour l'interface utilisateur avec la progression calculée. Cela se fait généralement à l'aide d'une barre de progression, d'un affichage de pourcentage ou d'une combinaison des deux. Assurez-vous que l'interface utilisateur est réactive et fournit un retour clair à l'utilisateur.

Implémentation React avec useFormStatus

Voici comment vous pouvez intégrer cet algorithme avec useFormStatus dans un composant React :

            import React, { useState, useTransition } from 'react';
import { useFormStatus } from 'react-dom';

async function submitForm(data) {
  // Simuler une opération asynchrone avec des mises à jour de la progression
  let progress = 0;
  const totalSteps = 100; // Remplacer par les étapes réelles

  for (let i = 0; i < totalSteps; i++) {
    await new Promise(resolve => setTimeout(resolve, 50)); // Simuler le travail
    progress = (i + 1) / totalSteps;
    console.log(`Progression : ${progress * 100}%`);
    // Idéalement, envoyer les mises à jour de la progression au client ici
  }

  console.log("Formulaire soumis avec succès !");
  return { success: true };
}

function MyForm() {
  const [overallProgress, setOverallProgress] = useState(0);
  const [isPending, startTransition] = useTransition();
  const formStatus = useFormStatus();

  const handleSubmit = async (event) => {
    event.preventDefault();
    const formData = new FormData(event.target);

    startTransition(async () => {
      // Simuler une soumission asynchrone avec progression
      let progress = 0;
      const totalSteps = 5;
      const weights = [0.1, 0.2, 0.3, 0.2, 0.2]; // Poids d'exemple pour chaque étape
      const stageNames = ["Validation", "Téléversement", "Traitement", "Indexation", "Notification"];
      
      for (let i = 0; i < totalSteps; i++) {
        // Simuler l'achèvement de l'étape
        let stageCompletion = 0;
        const stageDuration = 1000; //ms

        for (let j = 0; j < 10; j++) {
            await new Promise(resolve => setTimeout(resolve, stageDuration/10)); // Simuler le travail
            stageCompletion = (j + 1) / 10; // Progression au sein de l'étape

            let calculatedProgress = 0;
            for (let k = 0; k <= i; k++) { // Parcourir les étapes terminées
                calculatedProgress += weights[k];
            }

            calculatedProgress -= (1-stageCompletion) * weights[i]; // soustraire le pourcentage restant dans l'étape actuelle

            setOverallProgress(calculatedProgress * 100);
            console.log(`Étape : ${stageNames[i]}, progression : ${stageCompletion * 100}% Progression globale : ${calculatedProgress * 100}%`);

            // si vous aviez des mises à jour du serveur, c'est ici que vous les recevriez
        }
      }

      await submitForm(formData); // Simuler la soumission du formulaire

      // Mettre à jour l'interface utilisateur une fois la soumission terminée
      setOverallProgress(100);
    });
  };

  return (
    

      Nom :
      



      Email :
      



      
        Soumettre
      

      {isPending && (
        <>
          
Soumission en cours...
          
          
{overallProgress.toFixed(2)}%
        
      )}
    
  );
}

export default MyForm;

            

              
                Copy
              
            
          

Explication :

• La fonction handleSubmit simule désormais une opération asynchrone en plusieurs étapes à l'aide de setTimeout.
• Nous utilisons useState pour stocker et mettre à jour la overallProgress.
• L'élément progress affiche la progression actuelle à l'utilisateur.
• La boucle simule la progression à travers les poids de chaque étape et les pourcentages d'achèvement au sein de l'étape.
• Un simple submitForm() simule une fonction qui ferait une requête serveur réelle.

Considérations avancées

Mises à jour de la progression côté serveur

L'approche la plus précise consiste à faire en sorte que le serveur envoie des mises à jour de progression au client. Cela peut être réalisé à l'aide de technologies telles que :

• WebSockets : Une connexion persistante qui permet une communication bidirectionnelle en temps réel.
• Server-Sent Events (SSE) : Un protocole unidirectionnel où le serveur envoie des mises à jour au client.
• Polling : Le client demande périodiquement la progression au serveur. C'est la moins efficace mais la plus simple à mettre en œuvre.

Lorsque vous utilisez des mises à jour de progression côté serveur, le client reçoit le pourcentage de progression du serveur et met à jour l'interface utilisateur en conséquence. Cela élimine le besoin d'estimation côté client et fournit une représentation plus précise du traitement côté serveur.

Gestion des erreurs

Il est essentiel de gérer les erreurs avec élégance pendant le processus de soumission du formulaire. Si une erreur se produit, affichez un message d'erreur approprié à l'utilisateur et réinitialisez la barre de progression. Le hook useFormStatus fournit la propriété error, que vous pouvez utiliser pour détecter et gérer les erreurs.

Mises à jour optimistes

Dans certains cas, vous pourriez choisir de mettre en œuvre des mises à jour optimistes. Cela signifie mettre à jour l'interface utilisateur comme si l'opération avait réussi avant que le serveur ne le confirme. Cela peut améliorer la réactivité perçue de l'application, mais cela nécessite une gestion attentive des erreurs potentielles ou des annulations.

Internationalisation et localisation (i18n et l10n)

Lorsque vous développez pour un public mondial, tenez compte de l'internationalisation et de la localisation. Assurez-vous que les messages de progression et les messages d'erreur sont traduits dans la langue préférée de l'utilisateur. Utilisez des bibliothèques i18n et des services de traduction pour gérer efficacement les traductions. Soyez également attentif aux différentes conventions de formatage des nombres lors de l'affichage des pourcentages de progression.

Accessibilité (a11y)

Assurez-vous que votre indicateur de progression est accessible aux utilisateurs handicapés. Fournissez des descriptions textuelles alternatives pour les barres de progression et utilisez les attributs ARIA pour transmettre l'état de progression aux technologies d'assistance.

Cas limites et stratégies d'atténuation

Plusieurs cas limites peuvent affecter la précision du calcul de la progression. Voici quelques scénarios courants et stratégies d'atténuation :

• Instabilité du réseau : Les fluctuations de la vitesse du réseau peuvent entraîner des retards imprévisibles dans les téléversements de fichiers ou les réponses des API. Envisagez de mettre en œuvre des mécanismes de relance et d'ajuster l'estimation de la progression en fonction des conditions réseau observées.
• Charge variable du serveur : La charge du serveur peut affecter le temps de traitement des données soumises. Si possible, surveillez les performances du serveur et ajustez l'estimation de la progression en conséquence.
• Erreurs imprévues : Des erreurs inattendues peuvent se produire pendant le processus de soumission du formulaire. Mettez en œuvre une gestion robuste des erreurs et fournissez des messages d'erreur informatifs à l'utilisateur.
• Téléversements de fichiers volumineux : Le téléversement de fichiers très volumineux peut prendre beaucoup de temps. Envisagez d'utiliser des techniques telles que les téléversements reprenables pour permettre aux utilisateurs de suspendre et de reprendre les téléversements. Vous devrez peut-être également ajuster les poids attribués à l'étape de téléversement en fonction de la taille du fichier.
• Limitation du débit des API : Si votre soumission de formulaire interagit avec des API externes, soyez conscient des limites de débit. Mettez en œuvre des stratégies pour gérer la limitation du débit, telles que le report des requêtes ou l'utilisation d'un backoff exponentiel.

Alternatives au calcul de progression personnalisé

Bien que cet article se concentre sur la création d'un algorithme de calcul de progression personnalisé, plusieurs bibliothèques et services peuvent simplifier le processus :

• Bibliothèques : Des bibliothèques comme axios ou uppy fournissent un suivi de progression intégré pour les téléversements de fichiers.
• Services de stockage cloud : Des services comme AWS S3, Google Cloud Storage et Azure Blob Storage offrent des fonctionnalités telles que les téléversements reprenables et les notifications de progression.
• API tierces : Certaines API tierces fournissent des mises à jour de progression dans le cadre de leurs réponses API.

Envisagez d'utiliser ces alternatives si elles répondent à vos besoins. Cependant, comprendre les principes sous-jacents du calcul de la progression reste précieux, même lors de l'utilisation de ces outils.

Conclusion

L'estimation de l'achèvement des soumissions de formulaires asynchrones est cruciale pour offrir une bonne expérience utilisateur. En décomposant le processus en étapes, en attribuant des poids, en suivant l'achèvement et en calculant la progression globale, vous pouvez créer une interface utilisateur réactive et informative. Bien que useFormStatus fournisse des informations précieuses sur l'état de la soumission du formulaire, c'est à vous d'implémenter l'algorithme de calcul de la progression. N'oubliez pas de prendre en compte les cas limites, de gérer les erreurs avec élégance et d'explorer des solutions alternatives pour simplifier le processus.

En mettant en œuvre ces techniques, vous pouvez améliorer l'expérience utilisateur de vos applications React et fournir un retour précieux aux utilisateurs lors de soumissions de formulaires potentiellement longues.