UI5 Web Components

Les UI5 Web Components sont des éléments HTML personnalisés. Un développeur installe un package npm, importe les composants dont l'application a besoin et les utilise comme des balises, par exemple un bouton ou une shell bar, comme n'importe quel autre élément HTML.

Le mécanisme comporte quatre parties :

1. Custom Elements enregistre chaque composant comme une balise à part entière, afin que le navigateur sache comment l'afficher et le mettre à jour.
2. Shadow DOM encapsule le balisage et les styles de chaque composant, afin que le CSS de la page et celui du composant n'interfèrent pas.
3. Le theming provient des paramètres de thème de SAP sous forme de variables CSS ; c'est ainsi que les composants suivent SAP Horizon ou Quartz et peuvent recevoir un thème personnalisé issu de l'UI theme designer.
4. Le bundling relève de l'application : il n'existe pas de réseau de diffusion de contenu officiel, seuls les composants importés se retrouvent donc dans le build de l'application.

Les composants sont répartis en plusieurs packages : contrôles de base comme les champs de saisie, listes, tables et boîtes de dialogue ; contrôles propres à SAP Fiori comme la shell bar, le wizard et la navigation latérale ; contrôles liés à l'IA ; et le jeu d'icônes. Les UI5 Web Components sont donc une bibliothèque de contrôles que toute pile web peut consommer, pas un runtime qui pilote l'application.

Le critère de décision est le framework qui pilote l'application.

Utilisez les UI5 Web Components lorsque :

• l'application est déjà construite avec React, Angular, Vue ou un autre framework web et doit ressembler à SAP Fiori ;
• un site statique ou un portail a besoin de quelques éléments interactifs au style SAP Fiori sans framework complet ;
• l'application est un micro-frontend qui doit rester isolé de la page dans laquelle il s'exécute.

Utilisez SAPUI5 lorsque :

• l'application est une application SAP Fiori dans SAP S/4HANA ou le SAP Fiori Launchpad ;
• l'application a besoin de modèles OData, du routage, des floorplans SAP Fiori elements ou de l'adaptation key user ;
• l'équipe travaille avec l'outillage standard et le cycle de vie de SAP pour les applications SAP Fiori.

Pour Alder Manufacturing, un portail fournisseurs basé sur React pour Cedar Office Supply et Bright Freight est un cas typique pour les UI5 Web Components ; une application d'approbation des demandes d'achat dans le launchpad ne l'est pas. Les UI5 Web Components conviennent lorsque le framework web est imposé et que SAP Fiori est le standard visuel.

• React : UI5 Web Components for React encapsule les composants pour qu'ils se comportent comme des composants React, avec des propriétés et des événements typés. Ce wrapper ajoute ses propres composants de mise en page et de graphiques.
• Angular : UI5 Web Components for Angular fournit des wrappers qui prennent en charge les formulaires Angular et le binding bidirectionnel sans contournement de schéma.
• Vue et JavaScript pur : les composants s'utilisent directement comme custom elements.
• SAPUI5 : une application SAPUI5 peut requérir un UI5 Web Component comme un contrôle ordinaire. SAPUI5 fait correspondre les propriétés, slots, événements et méthodes à ses propres propriétés, agrégations, événements et méthodes. La configuration utilise l'extension ui5-tooling-modules de l'UI5 CLI pour intégrer les packages npm au bundle.

Les anciennes bibliothèques wrapper SAPUI5 pour les web components (sap.ui.webc.main, sap.ui.webc.fiori, sap.ui.webc.common) sont devenues obsolètes dans SAPUI5 1.120 et ont été supprimées dans 1.147 ; les nouveaux développements utilisent donc l'intégration directe. Les UI5 Web Components se connectent à chaque framework par de fins wrappers plutôt que par un framework qui leur serait propre.

• Pas de framework applicatif. Il n'y a ni modèles, ni binding OData, ni routage, ni cycle de vie de composant. Le framework hôte ou l'équipe les fournit.
• Pas de floorplans. Les list reports, object pages et autres floorplans SAP Fiori elements n'existent pas sous forme de pages prêtes à l'emploi ; l'équipe les compose à partir des composants.
• Pas d'intégration native au launchpad. Exécuter une telle application dans le SAP Fiori Launchpad ou SAP Build Work Zone exige une approche d'intégration dédiée ; le launchpad basé sur ABAP, par exemple, peut l'intégrer via le type d'application URL.
• Tous les contrôles SAPUI5 n'ont pas d'équivalent. L'ensemble de composants est large, mais plus restreint que la liste complète des bibliothèques SAPUI5.
• Les mises à niveau incombent à l'équipe. Comme les composants sont intégrés au bundle de l'application, les nouvelles versions n'arrivent qu'au moment où l'application est reconstruite et redéployée.

Rien de cela n'est un défaut : les UI5 Web Components laissent délibérément les décisions d'architecture au framework hôte.

1. Chercher un réseau de diffusion de contenu. Le projet attend des applications qu'elles n'intègrent au bundle que les composants qu'elles importent. Correctif : ajoutez les packages au pipeline de build.
2. Mélanger les versions majeures. La version 2 a modifié des API par rapport à la version 1. Correctif : mettez à niveau tous les packages @ui5/webcomponents* simultanément et suivez les notes de migration.
3. Confondre contrôles SAP Fiori et conformité SAP Fiori. Les contrôles suivent le design SAP Fiori ; la mise en page, la navigation et la formulation doivent toujours respecter les SAP Fiori Design Guidelines.
4. Conserver les anciennes bibliothèques wrapper SAPUI5. Les applications qui utilisent encore sap.ui.webc.* cessent de fonctionner sur les versions SAPUI5 où ces bibliothèques sont supprimées. Correctif : migrez vers l'intégration directe des web components.
5. Oublier les ressources de thème. Les thèmes personnalisés et la police SAP 72 proviennent du contenu de theming de SAP ; vérifiez que le build les fournit.

La plupart des problèmes avec les UI5 Web Components viennent de la gestion du build et des versions, pas des composants eux-mêmes.