Introduit l’année dernière par Rob Eisenberg lors d’un événement ASP.NET, FAST, pour « Functional, Adaptive, Secure, and Timeless » se présente comme une librairie JavaScript permettant aux développeurs de créer rapidement une interface Web en se reposant sur des composants Web pré-stylés ou facilement customisables. La force de FAST réside sur une approche axée sur les normes (standards-first) et que les composants Web fournis soient conçus en s’appuyant sur les standards du W3C. De ce fait le rendu d’une page Web utilisant FAST doit être le même qu’importe le navigateur utilisé.
Qu’elle est l’intérêt de FAST ?
Lors du démarrage d’un projet, il est toujours difficile de choisir sur quelle technologie on souhaite s’appuyer pour développer l’interface Web. Doit-on utiliser un Framework comme React ou Angular, devons nous concevoir nos composants à l’aide de Bootstrap ? L’avantage de FAST est de pouvoir s’intégrer facilement avec n’importe quelle bibliothèque citée précédemment pour la simple raison que FAST ne dispose pas de son propre modèle de composant mais s’appuis sur les éléments HTML natifs. Le composant produit avec FAST est alors parfaitement utilisable avec la librairie BootStrap ou être couplé à un autre composant web produit avec Salesforce Lightning ou Lit.
Microsoft met à disposition des exemples d’intégration avec les framework les plus connus :
https://www.fast.design/docs/integrations/introduction
FAST propose deux ensembles de composants disposant chacun d’un design propre. Le premier est @fluentui/web-components
dont le design (Fluent design) est inspiré des composants que l’on rencontre dans les applications Office ou Windows. Le deuxième, @microsoft/fast-components
, propose un design plus générique avec des options de personnalisation plus nombreuses appelé FAST Frame. Chacun de ces ensembles utilise un design system qui lui est propre.
On peut voir le design system comme une brique permettant d’unifier le style des composants de votre page, on parle également d’alignement de la marque. Il est bien entendu tout à fait possible de réaliser son propre Design System via l’objet DesignSystemProvider
. Pour les composants FAST, c’est un objet FASTDesignSystemProvider
qui est appliqué. Des variables sont ensuite consommées dans les feuilles de style pour habiller les composants.
Mais ce qui reste probablement le plus important avec FAST c’est la possibilité d’intégrer facilement les composants comme n’importe quel autre composant HTML natif comme <b>
, <a>
ou <p>
. Pour un UX Designer, pas besoin d’entrer dans le code pour utiliser un composant FAST, une déclaration simple dans la page Web suffit. Le styling CSS ou l’intégration avec Javascript fonctionne exactement de la même manière. Pour rendre l’intégration encore plus simple, Microsoft fournit également des outils pour vous aider à faire passer rapidement le contenu du mode clair au mode sombre.
Comment s’applique FAST ?
Comme n’importe quelle autre librairie JavaScript, FAST dispose d’une installation via npm :
npm install --save @microsoft/fast-components
Si vous n’êtes pas habitué à l’utilisation des nouvelles normes de développement des applications Web, vous pouvez parfaitement injecter un script depuis un CDN dans votre page web statique de cette manière :
<!DOCTYPE html>
<html lang="en">
<head>
<script type="module" src="https://unpkg.com/@microsoft/fast-components"></script>
</head>
<!-- ... -->
</html>
Le plus important reste ensuite d’encadrer les composants FAST enfants à l’aide d’un élément DesignSystemProvider
, celui là même qui définit le design de vos composants. Pour appliquer par exemple le FAST Frame, il vous suffit d’ajouter cette balise :
<!-- ... -->
<body>
<fast-design-system-provider use-defaults>
</fast-design-system-provider>
</body>
<!-- ... -->
Enfin il ne vous reste plus qu’à injecter les composants FAST dans votre code HTML :
<!-- ... -->
<fast-design-system-provider use-defaults>
<fast-button href="#">Hello world</fast-button>
</fast-design-system-provider>
<!-- ... -->
Microsoft met à disposition une page vous permettant de jouer avec les différents composants de FAST. Vous pouvez modifier à la volée les paramètres, copier le code généré et en voir le rendu dans la page :
https://explore.fast.design/components/
Pour facilité l’intégration de FAST dans vos pages Web, Microsoft propose également des plugins pour la colorisation syntaxique et l’auto-complétions de votre code pour Visual Studio Code.
Créer son propre composant
L’écriture des composants FAST se fait via TypeScript. Si vous n’êtes pas à l’aise avec ce langage, je vous invite à lire les articles suivants avant d’aller plus loin :
Un composant FAST se définit à partir d’un élément FAST qui hérite lui même d’un objet HTMLElement
. Vous devez dans un premier temps installer la librairie fast-element
:
npm install --save @microsoft/fast-element
Ensuite dans un fichier d’extension .ts
, vous pouvez insérer le code suivant pour créer un élément FAST personnalisé :
import { FASTElement, customElement, attr } from '@microsoft/fast-element';
@customElement('my-fast-component')
export class MyFastComponent extends FASTElement {
@attr greeting: string = 'Hello';
}
A noter l’utilisation de décorateurs comme @customElement
pour définir les propriétés du composant, ou @attr
pour les attributs que l’on souhaite exposer depuis l’élément HTML dans le DOM de la page. Il est maintenant possible d’appeler votre élément my-fast-component
n’importe où depuis le code HTML via la balise suivante :
<my-fast-component greeting="Salut"></my-fast-component>
Les noms de composants Web doivent contenir un « – » afin d’éviter de futurs conflits avec les éléments intégrés et les composants d’espace de noms de différentes bibliothèques. Pour plus d’informations sur les principes de base des composants Web, consultez la page suivante : https://developers.google.com/web/fundamentals/web-components.
Vous retrouverez un exemple de projet comportant la création d’un composant personnalisé et s’appuyant sur Webpack pour le déploiement du code source en fin de cet article. Si vous n’êtes pas familiarisé avec Webpack, je vous invite à lire l’article suivant : Initialiser un projet React sous TypeScript avec Webpack
Templating, Styling et Shadow DOM
Maintenant que nous avons un composant prêt à l’emploi, il serait intéressant de voir comment nous pouvons l’exploiter. Premier point important l’ajout d’un modèle ou template HTML qui servira de squelette à la structure du rendu de notre composant dans le DOM de la page Web. Deuxième point et pas des moindre, l’habillage de notre composant via les feuilles de style CCS.
Nous allons procéder à quelques ajustements de notre exemple précédent :
import { FASTElement, customElement, attr, html, css } from "@microsoft/fast-element";
const template = html<MyFastComponent>`
<div>
<h3>${wc => wc.sub + ' ' + wc.greeting} !</h3>
<p>My name is <span class="name">${wc => wc.name}</span>.</p>
</div>
`;
const styles = css`
:host {
display: inline-block;
contain: content;
color: white;
text-align: left;
}
:host([hidden]) {
display: none;
}
`;
@customElement({ name: 'my-fast-component', template: template, styles: styles })
export class MyFastComponent extends FASTElement {
constructor(public sub = "Hello"){
super();
}
@attr greeting: string = "World";
@attr name: string | null = null;
}
Via le décorateur @customElement
on injecte la template et les styles qui serviront à définir le rendu de notre composant. Il est tout à fait possible d’utiliser des directives nous permettant de structurer notre rendu HTML comme des conditions ou des boucles. Le binding des données se fait à l’aide de fonctions fléchées où wc
, dans notre exemple, représente une instance de MyFastComponent
.
Avant d’aborder le sujet des styles, il y a un dernier point important à discuter, c’est le Shadow DOM. Pour ne pas endommager la structure des composants Web, leur arborescence est masquée du DOM via un « Shadow DOM ». Voyez cela comme une sous arborescence privé. Ce Shadow DOM permet d’encapsuler la mise en forme du composant dans la page Web sans qu’elle puisse être altérée ou polluer inconsidérément le DOM de la dite page. Mais cela induit un problème dans le cas de l’application d’un style guide global à la page. Le CSS déclaré dans une page Web ne pourra pas modifier le comportement ou la structure de la template HTML de votre composant Web. Cependant, il existe une standardisation utilisée par FAST qui permet d’injecter des paramètres de style dans votre composant depuis l’extérieure.
On va déjà modifier le helper CSS de notre composant de cette manière :
const styles = css`
[...]
span.name {
font-style: var(--name-font-style);
}
`;
Depuis notre page HTML nous pouvons maintenant définir le style de l’objet en modifiant l’attribut --name-font-style
:
<fast-design-system-provider use-defaults>
<my-fast-component name="Cyrille">
<p>I love <span>FAST</span> web components <3</p>
</my-fast-component>
</fast-design-system-provider>
<style>
fast-design-system-provider {
display: inline-block;
}
my-fast-component:not(:defined) {
visibility: hidden;
}
my-fast-component {
--name-font-style: italic;
}
</style>
Autre point non négligeable des limitations établies par le Shadow DOM, c’est la composition avec d’autres éléments HTML. J’ai pourtant expliqué plus haut que le point fort des composants FAST étaient leur intégration facile avec d’autres librairies / éléments HTML. FAST s’appuis sur l’élément standard <slot>
dans la composition de ses templates.
Vous avez sans doute remarqué que mon composant my-fast-component
comportait des éléments enfants dans l’exemple précédent :
<my-fast-component name="Cyrille">
<p>I love <span>FAST</span> web components <3</p>
</my-fast-component>
En l’état, ces éléments ne seront pas rendus dans la page. Pour cela, il faut modifier notre template de la manière suivante en ajoutant un élément <slot>
à notre structure :
const template = html<MyFastComponent>`
<div>
<h3>${wc => wc.sub + ' ' + wc.greeting} !</h3>
<p>My name is <span class="name">${wc => wc.name}</span>.</p>
<slot></slot>
</div>
`;
Ainsi, tout le contenu placé entre les balises d’ouverture et de fermeture de l’élément my-fast-component
sera rendu à cet emplacement.
Conclusion
Au delà de la création personnalisée de composants, la bibliothèque FAST est simple d’utilisation et permet l’ajout de composants dans les pages Web de la même manière que n’importe quel autre élément HTML. FAST propose des solutions aux UX designer pour facilement étendre le design des composants, et la création est facilité à l’aide des multiples objets fournit par les API. Et pour une composition accrue de vos pages Microsoft met à disposition un tas d’exemples d’intégration avec les autres librairies du marché, sans compter l’API de référence qui est très bien documentée.
Nous avons vu dans cet article :
- Comment intégrer les composants FAST dans une page Web
- Comment créer son propre composant Web à l’aide de l’API FAST
- Appréhender la notion de Shadow DOM
Références
- Dépôt GitHub d’un exemple de composant FAST personnalisé utilisant Webpack : https://github.com/INGENIANCE/custom-fast-componant-example-with-webpack
- FAST – The adaptive interface system for modern web experiences : https://www.fast.design/
- MDN – Concepts et utilisation des Web Components : https://developer.mozilla.org/fr/docs/Web/Web_Components
- MDN – Utiliser le shadow DOM : https://developer.mozilla.org/fr/docs/Web/Web_Components/Using_shadow_DOM
- Styling Web Components Using A Shared Style Sheet : https://www.smashingmagazine.com/2016/12/styling-web-components-using-a-shared-style-sheet/
- Dépôt GitHub du code source des composants FAST : https://github.com/microsoft/fast/tree/master/packages/web-components
0 commentaire