Partager via

Meilleures pratiques et conseils pour les composants de code créés en utilisant Power Apps component framework

  • Article

Le développement, le déploiement et la maintenance des composants de code nécessitent un ensemble de connaissances comprenant les domaines suivants :

  • Power Apps component framework
  • Microsoft Power Apps
  • TypeScript et JavaScript
  • Développement de l’interface utilisateur du navigateur HTML
  • Azure DevOps/GitHub

Cet article décrit les meilleures pratiques et les conseils pour les professionnels développant des composants de code. Cet article vise à décrire les avantages de chacun afin que vos composants de code puissent tirer parti des améliorations de la convivialité, de la prise en charge et des performances qu’offrent ces outils et astuces.

Power Apps component framework

Cette section contient les meilleures pratiques et des conseils relatifs à Power Apps component framework.

Éviter de déployer des versions de développement sur Dataverse

Les composants de code peuvent être générés en mode production ou développement. Évitez de déployer des versions de développement sur Dataverse car elles affectent négativement les performances et peuvent même être bloquées lors du déploiement en raison de leur taille. Même si vous prévoyez de déployer une version de mise en production ultérieurement, il est facile d’oublier de redéployer si vous ne disposez pas d’un pipeline de mise en production automatisé. Plus d’informations : Contrôles de débogage personnalisés.

Éviter d’utiliser les méthodes d’infrastructure non prises en charge

Celles-ci incluent l’utilisation des méthodes internes non documentées qui existent sur ComponentFramework.Context. Ces méthodes peuvent fonctionner mais, étant donné qu′elles ne sont pas prises en charge, elles peuvent cesser de fonctionner dans les versions ultérieures. L’utilisation d’un script de contrôle qui accède au Document Object Model (DOM) HTML de l’application hôte n’est pas prise en charge. Toutes les parties du DOM de l’application hôte qui se trouvent en dehors de la limite du composant de code peuvent être modifiées sans préavis.

Utiliser la méthode init pour demander les ressources réseau requises

Lorsque le contexte d’hébergement charge un composant de code, la méthode init est d’abord appelée. Utiliser cette méthode pour demander les ressources réseau, comme les métadonnées, au lieu d′attendre la méthode updateView. Si la méthode updateView est appelée avant le retour des requêtes, le composant de code doit gérer cet état et fournir un indicateur de chargement visuel.

Nettoyer les ressources dans la méthode destroy

Le contexte d’hébergement appelle la méthode destroy lorsqu’un composant de code est supprimé du DOM du navigateur. Utilisez la méthode destroy pour fermer tous les WebSockets et supprimer les gestionnaires d′événements ajoutés en dehors de l′élément conteneur. Si vous utilisez React, utilisez ReactDOM.unmountComponentAtNode dans la méthode destroy. Le nettoyage des ressources de cette manière évite tout problème de performance causé par le chargement et le déchargement des composants de code dans une session de navigateur donnée.

Éviter les appels inutiles pour actualiser une propriété jeu de données

Si le composant de code est de type jeu de données, les propriétés du jeu de données lié exposent une méthode refresh qui amène le contexte d’hébergement pour recharger les données. L′appel de cette méthode affecte inutilement les performances de votre composant de code.

Réduire les appels à notifyOutputChanged

Dans certains cas, il n′est pas souhaitable qu′un contrôle de l′interface utilisateur (comme les pressions sur une touche ou les événements de déplacement de la souris) soit mis à jour à chaque appel notifyOutputChanged, car plus d′appels à notifyOutputChanged entraînerait la propagation de beaucoup plus d′événements au contexte parent que nécessaire. Envisagez plutôt d’utiliser un événement lorsqu’un contrôle perd le focus ou lorsque l’événement tactile ou de souris de l’utilisateur est terminé.

Vérifier la disponibilité des API

Lors du développement de composants de code pour différents hôtes (applications pilotées par modèle, applications canevas, portails), vérifiez toujours la disponibilité des API que vous utilisez pour la prise en charge sur ces plateformes. Par exemple, context.webAPI n’est pas disponible dans les applications canevas. Pour connaître la disponibilité des API individuelles, consultez Référence de l’API Power Apps component framework.

Gérer les valeurs de propriété temporairement nulles transmises à updateView

Des valeurs nulles sont transmises à la méthode updateView lorsque les données ne sont pas prêtes. Vos composants doivent tenir compte de cette situation et s’attendre à ce que les données puissent être nulles et qu’un cycle updateView ultérieur puisse inclure des valeurs mises à jour. updateView est disponible pour les composants standard et React.

Applications pilotées par modèle

Cette section contient les meilleures pratiques et des conseils relatifs aux composants de code dans les applications pilotées par modèle.

N’interagissez pas directement avec formContext

Si vous savez comment utiliser l′API client, vous avez l′habitude d′interagir avec formContext pour accéder aux attributs, contrôles et appeler les méthodes de l′API comme save, refresh et setNotification. Les composants de code sont censés fonctionner sur divers produits tels que les applications pilotées par modèle, les applications canevas, les tableaux de bord et, par conséquent, ils ne peuvent pas dépendre de formContext.

Une solution de contournement consiste à rendre le composant de code lié à une colonne et à ajouter un gestionnaire d’événements OnChange à cette colonne. Le composant de code peut mettre à jour la valeur de la colonne et le gestionnaire d’événements OnChange peut accéder à formContext. La prise en charge des événements personnalisés sera ajoutée ultérieurement, ce qui permettra de communiquer des modifications en dehors d’un contrôle sans ajouter de configuration de colonne.

Limiter la taille et la fréquence des appels à WebApi

Lors de l′utilisation des méthodes context.WebApi, limitez le nombre d′appels et la quantité de données. À chaque fois que vous appelez WebApi, cela est pris en compte dans les droits d’API de l’utilisateur et les limites de protection du service. Lors de l’exécution des opérations CRUD sur des enregistrements, tenez compte de la taille de la charge utile. En général, plus la charge utile de la requête est importante, plus le composant de code est lent.

Applications de canevas

Cette section contient les meilleures pratiques et des conseils relatifs aux composants de code dans les applications canevas.

Réduire le nombre de composants sur un écran

À chaque fois que vous ajoutez un composant à votre application canevas, le rendu prend un certain temps. Le temps de rendu augmente avec chaque composant que vous ajoutez. Mesurez soigneusement les performances des composants de code lorsque vous en ajoutez d′autres à un écran à l′aide des outils de performance du développeur.

Actuellement, chaque composant de code regroupe sa propre bibliothèque de bibliothèques partagées telles que Fluent UI et React. Le chargement de plusieurs instances de la même bibliothèque ne chargera pas ces bibliothèques plusieurs fois. Cependant, le chargement de plusieurs composants de code différents entraîne le chargement par le navigateur de plusieurs versions groupées de ces bibliothèques. Demain, ces bibliothèques pourront être chargées et partagées avec des composants de code.

Autoriser les créateurs à styliser votre composant de code

Lorsque les créateurs d’applications utilisent des composants de code à partir d’une application canevas, ils souhaitent utiliser un style en accord avec le reste de leur application. Utilisez les propriétés d’entrée pour fournir des options de personnalisation pour les éléments de thème tels que la couleur et la taille. Si vous utilisez Microsoft Fluent UI, mappez ces propriétés aux éléments de thème fournis par la bibliothèque. Demain, la prise en charge des thèmes sera ajoutée aux composants de code pour faciliter ce processus.

Suivre les meilleures pratiques en matière de performances des applications canevas

Les applications canevas offrent un large éventail de bonnes pratiques à partir de l’application et du vérificateur de solutions. Assurez-vous que vos applications suivent ces recommandations avant d’ajouter des composants de code. Pour en savoir plus, consultez :

TypeScript et JavaScript

Cette section contient les meilleures pratiques et des conseils relatifs à TypeScript et JavaScript dans les composants de code.

Comparaison entre ES5 et ES6

Par défaut, les composants de code ciblent ES5 pour prendre en charge les anciens navigateurs. Pour ne pas prendre en charge ces anciens navigateurs, modifiez la cible en ES6 dans le fichier tsconfig.json de votre projet pcfproj. Plus d’informations : Comparaison entre ES5 et ES6.

Importations de modules

Regroupez toujours les modules requis dans le composant de code au lieu d’utiliser des scripts qui doivent être chargés à l’aide de l’indicateur SCRIPT. Par exemple, si vous souhaitiez utiliser une API de graphiques autre que Microsoft où l’exemple montre l’ajout de <script type="text/javascript" src="somechartlibrary.js></script> à la page, cela n’est pas pris en charge dans un composant de code. Le regroupement de tous les modules obligatoires isole le composant de code des autres bibliothèques et prend également en charge l’exécution en mode hors ligne.

Notes

La prise en charge des bibliothèques partagées entre les composants en utilisant des nœuds de bibliothèque dans le manifeste du composant n’est pas encore prise en charge.

Linting

Processus permettant à un outil de scanner le code à la recherche de problèmes potentiels. Le modèle utilisé par pac pcf init installe le module eslint sur le projet et le configure en ajoutant un fichier .eslintrc.json. Eslint nécessite une configuration pour les styles de codage TypeScript et React. Il permet aussi de résoudre certains problèmes automatiquement dans la mesure du possible. Pour configurer sur la ligne de commande, utilisez :

npx eslint --init

Puis répondez aux questions suivantes lorsque vous y êtes invité :

  • Dans quels cas souhaitez-vous utiliser ESLint ? Réponse : Pour vérifier la syntaxe, détecter des problèmes et appliquer le style de code

  • Quel type de modules votre projet utilise-t-il ? Réponse : Modules JavaScript (importer/exporter)

  • Quelle est l’infrastructure utilisée par votre projet ? Réponse : React

  • Votre projet utilise-t-il TypeScript ? Réponse : Oui

  • Où s’exécute votre code ? Réponse : Navigateur

  • Aimeriez-vous définir un style pour votre projet ? Réponse : Répondre aux questions sur votre style

  • Dans quel format voulez-vous définir votre fichier de configuration ? Réponse : JSON (Cette réponse met à jour le fichier .eslintrc.json existant)

  • Quel style de retrait utilisez-vous ? Réponse : Espaces (Ce style de retrait est le Visual Studio Code par défaut)

  • Quels guillemets utilisez-vous pour les chaînes ? Réponse : Apostrophe

  • Quelles fins de ligne utilisez-vous ? Réponse : Windows (Cette fin de ligne est le style de fins de ligne CRLF par défaut de Visual Studio Code.)

  • Avez-vous besoin de points-virgules ? Réponse : Oui

Notes

Vous pouvez adapter cette configuration à vos besoins particuliers (par exemple, si vous n’utilisez pas React). Plus d’informations : Prise en main d’ESLint.

Avant d’utiliser eslint, vous devez ajouter certains scripts au fichier package.json :

 "scripts": {
    ...
    "lint": "eslint MY_CONTROL_NAME --ext .ts,.tsx",
    "lint:fix": "npm run lint -- --fix"
  }

Le script eslint accepte le dossier qui contient votre code. Remplacez MON_NOM_DE_CONTRÔLE par le même nom que le composant de code utilisé lors de l′appel pac pcf init.

Maintenant, sur la ligne de commande, vous pouvez utiliser :

npm run lint:fix

Cette commande change le code dans le projet pour qu’il corresponde au style choisi et elle signale également certains problèmes qui seront résolus ultérieurement.

Notes

ESLint souligne initialement les problèmes avec le code du modèle (par exemple, un constructeur vide). Vous pouvez ajouter des commentaires en ligne pour demander à ESLint d’exclure les règles telles que : // eslint-disable-next-line @typescript-eslint/no-empty-function

De plus, vous pouvez ajouter des fichiers à ignorer (comme les interfaces générées automatiquement) en ajoutant ce qui suit au fichier .eslintrc.json :

"ignorePatterns": ["**/generated/*.ts"]

Plus d’informations : ignorePatterns dans les fichiers de configuration.

Conseil

Vous pouvez installer l’extension Visual Studio Code qui utilise le fichier .eslintrc.json du projet pour fournir une mise en évidence du code pour tous les problèmes détectés, avec la possibilité de les corriger directement dans l’IDE. Plus d’informations : Gestion des extensions dans Visual Studio Code.

Développement de l’interface utilisateur du navigateur HTML

Cette section contient les meilleures pratiques et des conseils relatifs au développement de l’interface utilisateur du navigateur HTML.

Utiliser Microsoft Fluent UI React

Fluent UI React est l’infrastructure frontale React open source officielle conçue pour générer des expériences qui s’intègrent parfaitement dans une large gamme de produits Microsoft. Power Apps utilise Fluent UI, ce qui signifie que vous pouvez créer une interface utilisateur qui est cohérente avec le reste de vos applications.

Utiliser des importations basées sur des chemins d’accès à partir de Fluent pour réduire la taille du regroupement

Actuellement, les modèles de composants de code utilisés avec pac pcf init n’utiliseront pas le Tree Shaking, qui est le processus par lequel webpack détecte les modules importés non utilisés et les supprime. Si vous importez depuis Fluent UI à l′aide de la commande suivante, toute la bibliothèque est importée et regroupée :

import { Button } from '@fluentui/react'

Pour éviter d’importer et de regrouper toute la bibliothèque, vous pouvez utiliser les importations basées sur le chemin, où le composant spécifique de la bibliothèque est importé en utilisant le chemin explicite :

import { Button } from '@fluentui/react/lib/Button';

L’utilisation du chemin spécifique réduit la taille du regroupement dans les versions de développement et dans les versions de mise en production.

Profitez de Tree Shaking (qui n’affecte que les versions de mise en production/production) en mettant à jour le fichier tsconfig.json pour utiliser la configuration de module suivante dans la section compilerOptions :

"module": "es2015",
"moduleResolution": "node"

Plus d’informations : Fluent UI – Utilisation avancée.

Optimiser le rendu React

Lors de l′utilisation de React, il est important de suivre les meilleures pratiques spécifiques à React en matière de réduction du rendu des composants, pour une interface utilisateur plus réactive. Voici quelques-une des meilleures pratiques :

  • Effectuez uniquement un appel à ReactDOM.render dans la méthode updateView si le changement d’une propriété liée ou d’un aspect de l’infrastructure nécessite que l’interface utilisateur reflète ce changement. Utilisez updateProperties pour déterminer ce qui a changé.
  • Utilisez PureComponent (avec des composants de classe) ou React.memo (avec des composants de fonction) si possible pour éviter de nouveaux rendus inutiles de composants lorsque les propriétés d’entrée n’ont pas muté.
  • Pour les composants React volumineux, déconstruisez votre interface utilisateur en composants plus petits pour améliorer les performances.
  • Évitez d’utiliser les fonctions de flèche et la liaison de fonctions dans la fonction de rendu, car ces pratiques créent une fermerture de rappel avec chaque rendu et entraine le rendu systématique du composant enfant lorsque le composant parent est rendu. Utilisez plutôt des liaisons de fonction dans le constructeur ou des fonctions de flèche de champ de classe. Voir Gestion des événements – React.

Vérifier l’accessibilité

Assurez-vous que les composants du code sont accessibles afin que les utilisateurs du clavier uniquement et du lecteur d’écran puissent les utiliser :

  • Offrez des alternatives de navigation au clavier pour les événements tactiles/souris. Par exemple, si votre composant fournit une liste déroulante, assurez-vous qu’un utilisateur peut utiliser la tabulation pour définir le focus, puis parcourez les options à l’aide des touches fléchées.
  • Assurez-vous que les attributs alt et ARIA (Accessible Rich Internet Applications) sont définis afin que les lecteurs d’écran annoncent une représentation exacte de l’interface des composants du code. La bibliothèque Microsoft Fluent UI simplifie l’utilisation de ces attributs, car la plupart des composants sont déjà accessibles et compatibles avec le lecteur d’écran.
  • Les outils de développement de navigateur modernes contiennent des outils utiles pour inspecter l′accessibilité. Utilisez-les pour détecter les problèmes d’accessibilité courants au niveau du composant de code.

Plus d’informations : Créer des applications canevas accessibles dans Power Apps.

Toujours utiliser les appels réseau asynchrones

Lorsque vous effectuez des appels réseau, n′utilisez jamais de requête de blocage synchrone car elle empêche l′application de répondre et ralentit les performances. Plus d’informations : Interagir avec les ressources HTTP et HTTPS de manière asynchrone.

Écriture de code pour plusieurs navigateurs

Les applications pilotées par modèle, les applications canevas et les portails prennent tous en charge plusieurs navigateurs. Assurez-vous d′utiliser uniquement des techniques prises en charge sur tous les navigateurs modernes et faites des tests sur un ensemble représentatif de navigateurs en fonction de l′audience prévue.

Les composants de code doivent anticiper la prise en charge de plusieurs clients et formats d′écran

Les composants de code peuvent être rendus dans plusieurs clients (applications pilotées sur modèle, applications canevas, portails) et formats d′écran (mobile, tablette, web). Dans les applications pilotées par modèle, les composants de code de jeu de données peuvent être placés sur les grilles de formulaire principales, les grilles d’enregistrements associées, les sous-grilles ou les tableaux de bord. Dans les applications canevas, les composants de code peuvent être placés dans des conteneurs réactifs qui se redimensionnent dynamiquement en utilisant la configuration fournie par le créateur d′applications.

  • L’utilisation de trackContainerResize permet aux composants de code de répondre aux changements dans la largeur et la hauteur disponibles. Dans certains cas, la définition de ce paramètre affiche une interface utilisateur différente qui s’adapte à l’espace disponible. L′utilisation de allocatedHeight et de allocatedWidth peut être associée à getFormFactor pour déterminer si le composant de code s’exécute sur un mobile, une tablette ou un client web. Plus d′informations : consultez Tutoriel du sélecteur de choix.
  • L’implémentation de setFullScreen permet aux utilisateurs d’utiliser l’intégralité de l’écran disponible quand l’espace est limité. Plus d’informations : Composant de grille d’application canevas.
  • Si le composant de code ne parvient pas à fournir une expérience significative dans la taille de conteneur donnée, il doit désactiver la fonctionnalité de manière appropriée et fournir des commentaires à l’utilisateur.

Toujours utiliser des règles CSS délimitées

Si vous implémentez un style dans vos composants de code en utilisant CSS, assurez-vous que CSS est limité à votre composant à l’aide des classes CSS générées automatiquement appliquées à l’élément DIV de conteneur pour votre composant. Si votre CSS a une portée globale, il peut bloquer le style existant du formulaire ou de l’écran où le composant de code est rendu. Si vous utilisez une infrastructure CSS tierce, utilisez une version avec espace de noms de cette infrastructure ou encapsulez cette infrastructure dans un espace de noms, manuellement ou à l′aide d′un préprocesseur CSS.

Par exemple, si votre espace de noms est SampleNamespace et le nom de votre composant de code est LinearInputComponent, ajoutez une règle CSS personnalisée de la façon suivante :

.SampleNamespace\.LinearInputComponent rule-name

Éviter l’utilisation d’objets de stockage web

Les composants de code ne doivent pas utiliser les objets de stockage Web HTML, comme window.localStorage et window.sessionStorage, pour stocker des données. Les données stockées localement sur le navigateur de l’utilisateur ou le client mobile ne sont pas sécurisées et leur disponibilité de manière fiable n’est pas garantie.

ALM/Azure DevOps/GitHub

Voir l’article intitulé Gestion du cycle de vie des applications des composants de code (ALM) pour connaître les meilleures pratiques sur les composants de code avec ALM/Azure DevOps/GitHub.