La position actuelle:Accueil du site>Discussion sur la relation entre Fiori Fundamentals et SAP ui5 Web Components

Discussion sur la relation entre Fiori Fundamentals et SAP ui5 Web Components

2022-05-14 14:56:41Wang Zixi

Récemment, au travail,L'auteur a été invité à travailler pour une équipe SAP Évolution historique de la technologie de développement.Ma Conférence est présentée sur les sujets suivants::

Parmi eux SAP Examen et évolution de la technologie,Mon idée est d'introduire l'avant et l'arrière - plan séparément.
J'ai fait une image très simple:

D'après les informations déjà publiées dans la communauté,,Fiori Les deux directions du développement,Je résume personnellement:

(1) Inclusive,C'est - à - dire Fiori Fundamentals,Utiliser non UI5 Développeurs de première ligne pour le cadre de développement,Avec ses techniques préférées,Peut également développer des Fiori UX Application de.

(2) Allez - y doucement.,C'est - à - dire SAP UI5 Web Components,Peut continuer à fournir des images UI5 Beaucoup de ces bibliothèques de contrôle sont hors de la boîte UI Contrôle,Et évite les paires d'applications frontalesUI5Dépendance du cadre.

Examinons les deux nouveaux concepts mentionnés ci - dessus..

Fiori Fundamentals

Regarde ça. SAP Autorité sur le site officiel Définition

Quelques points clés définis ci - dessus :

(1) Fiori Fundamentals Joue un rôle de couche de présentation légère dans les applications frontales ,CompatibleAngular, ReactEtVue Attendre que le cadre avant soit utilisé ensemble .

(2) Fiori Fundamentals Pas un nouveau UITechnique, Et ne remplacera pas UI5,C'est unCSSEtHTMLCollection d'étiquettes, Permettre aux développeurs d'utiliser leurs préférences UI Cadre de développement avec Fiori UX Application du style.

Fiori Fundamentals Est une sérieCSSEt HTML Collection d'onglets ,Prenons un exemple concret.

C'est Fiori Fundamentals Déploiement dans CDN Oui. CSS:

C'estSAP Fiori Fundamentals Étiquettes pour dessiner les tableaux mentionnés dans le document d'aide :

In Vue Application La façon dont ces étiquettes sont consommées :

Quant à l'ajout d'un mécanisme de gestion d'événements à une table dessinée pour cette étiquette , Sa méthode et sa pureté Vue Application entièrement cohérente , Donc une tradition Vue Développeurs,Aide Fiori Fundamentals Aide, Il n'y a pratiquement pas besoin d'études supplémentaires pour le faire SAP Fiori Développement de l'interface frontale de l'application .

SAP UI5 Web Components

Récemment SAP Il y a un article dans la communauté sur Web Components Blog de:UI5 Web Components - the Beta is there:

Comme le dit le titre du billet de blog ,SAP Publié récemment UI5 Web Components De Beta Version, Et d'inviter le grand SAP Les développeurs de l'écosystème essaient et commentent .

SAP UI5 Web Components,- Oui. SAP Avant SAP UI5 Contrôle dans la Bibliothèque de contrôle ,Selon Web Components Produit de la nouvelle mise en oeuvre de la spécification standard .

Croyez comprendre SAP UI5 Amis de, Après avoir lu ma description ci - dessus , Ces problèmes surgissent dans la tête :

  1. Qu'est - ce que Web Components Critères?

  2. SAP Pourquoi faire cette chose de re - implémentation ?

  3. Qu'est - ce que c'est que ce produit? ?

À propos de la première question,Accès direct Web Components La réponse se trouve sur le site Web de . Les singes du programme savent ,org Les sites finaux préfèrent définir une variété de spécifications techniques de centaines, voire de milliers de pages ,Web Components Et ça ne fait pas exception:

https://www.webcomponents.org/introduction

L'assemblage frontal a toujours été l'un des sujets de discussion les plus chauds dans l'écosystème frontal. , Comme la troïka avant Angular,React EtVue Ont leurs propres implémentations de composants ,Et webcomponents.org Spécification définie ci - dessus , En fait, ça donne un critère , Ce n'est qu'en répondant à la mise en oeuvre de cette norme , Peut être considéré comme une implémentation universelle basée sur des composants , Pour être pris en charge par tous les navigateurs modernes .

Le contenu de cette spécification est également hébergé dans githubOui.:

Il contient quatre critères Shadow DOM,Custom Elements,HTML Templates Et CSS changes,SAP UI5 Web Components Bien sûr, la mise en œuvre de ces normes .

Deuxième question,SAP Développement UI5 Web Components Motivation.

Mon opinion personnelle : Pour les clients et Partners Offre une utilisation plus flexible UI5 Comment contrôler ,Évitez d'avoir raison UI5 Dépendance du cadre.

Par exemple,,Si nous voulons utiliser UI5 Disponible dans la Bibliothèque de contrôle button Contrôle, Même si ce n'est que dans XML Écrivez une simple définition de ligne dans la vue ,

Et avec SAP UI5 Web Components, Les développeurs n'ont pas besoin d'importer du tout UI5 Cadre,Peut être utilisé directement UI5Contrôle dans.SAP UI5 Web Components Peut être utilisé dans n'importe quel cadre frontal , C'est la dernière phrase mise en évidence dans l'image ci - dessous .

Il faut répondre à la troisième question. .SAP UI5 Web Components Qu'est - ce que c'est?? Les points saillants de la figure ci - dessus :

  1. SAP UI5 Web ComponentsCe n'est pas basé surUI5Cadre.En d'autres termes,,EtUI5 Le cadre n'a aucune dépendance ,Peut être utilisé indépendamment.

  2. SAP UI5 Web Components Ce n'est pasSAP UI5 Le successeur du cadre , Et doit être considéré comme un complément à ce dernier .

  3. Oui. UI5 Les contrôles fournis par la Bibliothèque de contrôle sont HTML Niveau d'exposition des consommateurs , Au lieu de la façon traditionnelle API Mode d'exposition au niveau .Et ainsi de suite.,UI5 Web ComponentsPeut ne pas dépendre deUI5Cadre, Peut être utilisé directement sur d'autres cadres frontaux .

Voir un exemple concret:

Ouvrez dans votre navigateur HTMLPage,

Vous verrez unUI5 Boutons. Cliquez pour afficher l'Instance de ce bouton innerHTMLValeur de la propriété.C'est l'un des plus simplesSAP UI5 Web ComponentsDeHello WorldExemple.

Par exemple, nous avons utilisé SAP UI5 Web ComponentsÉtiquettes personnalisées <ui5-button>. Pour les développeurs d'applications frontales , Cette étiquette personnalisée et W3C À l'intérieur.button Les étiquettes ne sont pas différentes , Tout à fait cohérent, du moins en termes de consommation .

À propos de UI5 Web Components Comme <ui5-button> Description détaillée de ce type d'étiquette personnalisée ,Vous pouvez voirSAP Documents d'aide:

Exécution,Et dansUI5 Les contrôles sont les mêmes dans le cadre , Il y a encore un ButtonRenderer Responsable de la génération du bouton natif HTMLCode:

Généré à partir de l'exécution HTML Le code source n'est pas difficile à trouver ,UI5 Web ComponentsPersonnaliséHTML L'étiquette n'est qu'un substituant (place holder)Le rôle de, Le bouton réel avec lequel l'utilisateur peut réellement interagir pendant l'exécution , Ou par l'image ci - dessus ButtonRendererProduitHTMLPrimitivebuttonÉtiquettes.

Il convient de souligner que,Adoption de ce qui précèdeButtonRenderer Exemple de bouton d'exécution généré , Toujours satisfait de l'utilisation UI5 Les mêmes propriétés pour les contrôles que vous avez dessinés de façon traditionnelle pour les cadres , Comme dans la tradition SAP Toutes les normes de produit garanties ,CommeAccessibility,InternationalizationCes,InSAP UI5 Web Components Li continue de soutenir , Aucune mise en œuvre de programmation supplémentaire par le développeur d'application n'est nécessaire .

Pour usage local npm install @ui5/webcomponents Commande d'installation UI5 Web Components Après,

Pour trouver les implémentations de composants les plus simples ,Button.js, Pour apprendreSAPEst basé surWeb ComponentsCritères,AdoptionES6SoutienmobuleEtclass La fonction equal implémente une étiquette personnalisée .

Enfin,SAP UI5 Web ComponentsQuel est le scénario d'utilisation de?

Deux scénarios s'appliquent :

  1. Dans une page statique simple développée sans cadre frontal , Si vous voulez ajouter des contrôles qui fournissent une interaction utilisateur ,Peut - être.SAP UI5 Web Components.

  2. Basé sur d'autres cadres de développement de première ligne WebApplication, Si vous avez besoin de quelque chose qui interagit avec l'utilisateur et que vous ne voulez pas répéter la construction de la roue ,On peut y aller.SAP UI5 Web Component Cherchez sur le site officiel .

D'un autre côté,SAP UI5 Le cadre reste SAP Solutions recommandées pour le développement d'applications frontales complexes et réactives au niveau de l'entreprise .

Enfin,Il y a des amis qui peuvent avoir des questions,fundamental-vue Ça compte. Fiori Fundamentals Toujours Web Component?
Une image pour répondre :

Résumé

Cet article présente SAP Fiori Les deux fronts de l'évolution technologique :Fiori Fundamentals Et SAP UI5 Web Components. Le premier permet aux développeurs frontaux de développer des cadres avec Fiori UX Application de, Ce dernier ne dépend pas SAP UI5 Dans la prémisse du cadre , Un grand nombre de contrôles hors de la boîte sont disponibles .

Mentions de copyright
Auteur de cet article [Wang Zixi],Réimpression s’il vous plaît apporter le lien vers l’original, merci
https://fra.chowdera.com/2022/134/202205141454016579.html

Recommandé au hasard