Bougez avec les composants Web FAST de Microsoft

Il est souvent difficile de sélectionner la structure de technologie Web à utiliser pour les applications frontales. Construisez-vous le vôtre ou commencez-vous par des innovations comme Vue et React? Peut-être êtes-vous disponible à un niveau supérieur avec un framework d’éléments Web comme Bootstrap de Twitter, Polymer de Google ou Lightning de Salesforce. Leur modèle de création de modèles est puissant, vous permettant d’utiliser et de personnaliser les composants existants et de produire les vôtres, en traitant les aspects personnalisés et en isolant les performances en utilisant le shadow DOM JavaScript.

L’adoption des composants WebPart a été raisonnablement lente par rapport à d’autres Innovations HTML 5. Cela peut être dû au fait que l’assistance du navigateur Web a pris du retard ou au fait que les bibliothèques JavaScript familières utilisent leurs propres contrôles d’interface utilisateur. Quel que soit le facteur, le résultat est souvent une conception de page complexe qui choisit parmi plusieurs bibliothèques de contrôle, nécessitant de gros téléchargements et ralentissant les sites.

Sur L’Entrepreneur: 15 options formidables pour répondre, angulaire et vue]

Présentation RAPIDE

Microsoft a en fait discrètement utilisé ses propres outils d’élément Web depuis un certain temps maintenant, lançant sa structure d’éléments FAST l’été dernier. Il est prévu que FAST fournisse une technique basée sur des normes pour fournir une boîte à outils Web front-end basée sur des modèles, en s’appuyant sur le concept de « viser à adopter autant que possible des méthodes ouvertes basées sur des normes Web. »

À l’époque d’Internet Explorer, Microsoft aurait été le plus susceptible de créer et de fournir sa propre conception d’élément, en espérant que le reste du Web suivrait. Cependant, lorsqu’il s’agissait d’innovations telles que le HTML dynamique, Microsoft s’est retrouvé coincé à prendre en charge des méthodes d’avancement frontales incompatibles et a fini par abandonner ses propres outils au profit des exigences du Web. Il n’est pas surprenant que FAST soit une méthode axée sur les normes et que ses éléments Web soient construits à l’aide des exigences des composants Web du W3C. Une page créée à l’aide de FAST doit afficher la même méthode dans Edge, Chrome, Firefox et Safari.

Le groupe de promotion décrit cette approche comme «sans opinion». Vous pouvez choisir les propres éléments de l’interface utilisateur Fluent de Microsoft ou gérer les éléments de base fournis par FAST, en les adaptant à vos besoins et en utilisant des modèles de conception pour inclure vos propres conceptions. Dans le même temps, vous n’êtes pas limité par une option de cadre de promotion Web. Il n’est pas nécessaire de découvrir quoi que ce soit de nouveau; si vous utilisez Vue, vous pouvez continuer à l’utiliser avec QUICK, de même avec ASP.NET ou React. Vous pouvez même échanger des plans QUICK contre des bundles d’autres applications de composants Web, par exemple, en utilisant un contrôle Polymer dans le cadre d’un style de site Web FAST.

La pile FAST

FAST est construit à partir d’un ensemble de plans JavaScript. Ils sont tous gérés dans un monorepo GitHub, avec des liens vers les différents dépôts pour chaque section de la pile FAST. Les 4 packages principaux sont:

fast-element, qui fournit les outils fondamentaux pour créer et utiliser des éléments Web personnalisables

Il est peut-être préférable de considérer cela comme une pile, où les composants Web comme Fluent UI se trouvent au-dessus de la couche de structure. Diverses bibliothèques d’éléments exécuteront différentes versions des mêmes contrôles standard, au fur et à mesure qu’elles construisent sur la base et implémentent leurs propres contrôles et modèles. La plupart du code dont vous avez besoin pour implémenter un contrôle (comme la gestion de l’état, par exemple) est déjà fourni par la couche de base, il vous suffit donc d’ajouter vos propres conceptions, ce qui vous permet d’économiser beaucoup de temps et d’efforts. À un niveau inférieur, la bibliothèque fast-element vous permet de produire des composants WebPart entièrement nouveaux à partir de zéro, avec un échafaudage suffisant pour gérer les fonctionnalités au niveau de la plate-forme tout en conservant la marge nécessaire pour votre code et votre style. Utilement, fast-element est développé afin de supprimer les fonctionnalités indésirables, de sorte que vous ne livriez pas de fonctionnalités qui ne sont pas utilisées. Cela réduit le code au minimum et réduit la taille des surfaces d’attaque possibles.

Utilisation de QUICK dans vos sites Web

Si vous envisagez d’examiner RAPIDEMENT, il mérite de commencer par implémenter des composants Web sur votre site. Vous pouvez installer les composants standard rapides ou les éléments Fluent UI dans votre système de développement en utilisant soit npm, soit yarn. Dès l’installation, vous enregistrez d’abord la classe JavaScript d’un élément dans votre ensemble d’applications. Dès que la classe est importée, vous avez la possibilité d’utiliser le composant associé dans votre code.

un outil Element Explorer pour vous aider à exécuter des parties de votre contenu. Il implémente un éditeur de code intégré que vous pouvez utiliser pour développer et évaluer votre propre implémentation de composant pour votre site Web. L’explorateur d’éléments se compose de conseils standard et montre la signification et le schéma de la pièce. Si vous utilisez Visual Studio Code, les extensions recommandées simplifient l’utilisation de FAST.

Ce qui est peut-être le plus important dans l’utilisation d’une technologie comme FAST, c’est qu’elle sépare la conception du code, en conservant le matériel de la page en déclarations d’aspect déclaratives. Les concepteurs peuvent traiter des parties RAPIDEMENT comme n’importe quel élément HTML, tandis que tout code frontal traite vos composants FAST de la même manière. Par exemple, un bouton rapide est simple à styliser et à exécuter, et est traité comme tout autre bouton HTML dans JavaScript ou formulaires. Microsoft propose également des outils pour vous aider à changer rapidement le contenu du mode clair au mode sombre, garantissant ainsi que les pages fonctionnent de la même manière dans des conditions de luminosité intense ou faible.

Intégrations avec votre pile de développement Web

En fait, nous nous sommes familiarisés avec le choix des piles de promotion Web, en nous standardisant sur celle qui nous convient le mieux. La technique sans opinion de FAST implique qu’elle est indépendante de la pile et capable de gérer votre option de structure Web. Microsoft propose une documentation pour de nombreux environnements populaires, et si votre option ne figure pas dans la liste, vous pouvez travailler avec l’équipe de développement FAST via GitHub pour inclure des intégrations appropriées.

Une intégration avantageuse ajoute la prise en charge de Blazor, à la fois dans les applications WebAssembly côté client et dans les pages Razor côté serveur. La prise en charge des éléments peut être chargée au moment de l’exécution à partir du CDN de Microsoft, ou si vous préférez être constituée des bibliothèques avec votre code, vous pouvez utiliser npm. Lorsque FAST est prêt à être utilisé, incluez un composant dans l’index.html de votre application, puis incluez les composants que vous souhaitez utiliser dans vos pages et vos vues.

Utilisation de Fluent Les éléments Web de l’interface utilisateur avec Blazor donneront à vos applications Web une apparence et une convivialité comparables à toutes les applications Windows de bureau. Cela vaut la peine de considérer cela comme un moyen d’ajouter rapidement des composants d’interface utilisateur de manière déclarative aux Progressive Web Apps afin de distribuer des applications de type Windows via le Web et via des navigateurs Internet modernes comme Edge.

Il y a beaucoup à faire comme dans FAST. Il est rapide et facile à utiliser, traitant des frameworks Web familiers tout en offrant un ensemble bien conçu et convivial de composants d’interface. Il n’est pas nécessaire de découvrir quoi que ce soit de nouveau, car les éléments Web de FAST agissent comme n’importe quel autre composant HTML (et leur fournissent fréquemment des remplacements instantanés). Vous n’êtes pas limité non plus aux styles de Microsoft, car il existe une alternative de revenir aux fondamentaux et d’utiliser les niveaux inférieurs de la pile FAST pour ajouter vos propres conceptions et même créer vos propres éléments.