Série SPFx : Technologies de base

La création de solutions avec le SharePoint Framework (SPFx) permet aux développeurs de tirer parti des outils modernes de développement web tout en s’intégrant parfaitement à Microsoft 365. En utilisant TypeScript, React, SCSS et Fluent UI, vous pouvez créer des expériences utilisateur réactives et faciles à maintenir.

Pourquoi ces outils ?

• TypeScript fournit un système de typage robuste qui améliore la qualité du code, réduit les bugs et assure la maintenabilité dans les projets SPFx complexes.
• React permet la création d’interfaces dynamiques basées sur des composants avec des capacités de gestion d’état, ce qui en fait un choix parfait pour les WebParts et extensions SPFx.
• SCSS (Sassy CSS) permet des feuilles de style modulaires et réutilisables, simplifiant les thèmes et la personnalisation, en particulier dans les grands projets.
• Fluent UI, la bibliothèque de conception officielle de Microsoft, assure un style et un comportement cohérents avec les autres applications Microsoft 365 tout en accélérant le développement grâce à des composants préconstruits.

TypeScript en bref

TypeScript est un langage de programmation qui s’appuie sur JavaScript en ajoutant des types statiques optionnels et d’autres fonctions. Il est développé et maintenu par Microsoft. Le code TypeScript peut être transposé (converti) en JavaScript standard, le rendant compatible avec tout environnement capable d’exécuter JavaScript.

L’une des fonctionnalités clés de TypeScript est les types statiques optionnels, qui permettent aux développeurs de spécifier le type d’une variable ou d’un paramètre de fonction. Par exemple, vous pouvez spécifier qu’une variable est un nombre :

    let myAge: number = 30;

Vous pouvez également spécifier qu’une fonction reçoit un paramètre de type string et retourne une valeur booléenne :

    function isValidEmail(email: string): boolean {
        // implementation here
    }

Une autre fonctionnalité de TypeScript est les classes et les interfaces, qui peuvent être utilisées pour créer des objets avec des structures et des comportements spécifiques. Par exemple, vous pouvez créer une classe « Person » avec des propriétés name et age :

    class Person {
        name: string;
        age: number;
        constructor(name: string, age: number) {
            this.name = name; {
            this.age = age;
        }
    }
    let me = new Person("John", 30);
    console.log(me.name); // "John"
    console.log(me.age); // 30

Les interfaces peuvent également être utilisées pour définir une structure spécifique d’un objet.

    interface IPlayer {
        name: string;
        score: number;
    }

    const player: IPlayer = { name: 'John', score: 100};

React, qu’est-ce que c’est, que fait-il ?

React est une bibliothèque JavaScript pour créer des interfaces utilisateur conviviales et efficaces. Elle a été développée par Facebook et est actuellement largement utilisée dans le développement d’applications web.

React utilise un concept appelé composants. Un composant est un morceau de code qui définit une partie d’une interface utilisateur, comme un bouton, un formulaire, une liste, etc. Chaque composant possède sa propre logique et son propre état et peut contenir d’autres composants. Cela rend les composants faciles à réutiliser et à maintenir.

     import * as React from 'react';
     export default class MyButton extends React.Component<IMyButtonProps, {}>
     {
        public render(): React.ReactElement<IMyButtonProps> {
           return <button>{this.props.label}</button>;
        }
     }

Dans cet exemple, il y a un composant appelé « MyButton » qui affiche un bouton avec une étiquette passée via les props.

React utilise une technique appelée DOM virtuel (Document Object Model) pour améliorer les performances. Le DOM virtuel est une copie du DOM réel maintenue en mémoire. Lorsqu’il y a des changements dans les composants, seuls les composants qui ont réellement été modifiés sont mis à jour dans le DOM réel. Cela réduit la quantité de travail que le navigateur doit effectuer et améliore donc les performances de l’application.

React offre également un certain nombre d’outils pour gérer l’état de l’application, tels que state et props. Cela vous permet de suivre les données qui changent au cours de la vie d’un composant et d’utiliser ces données pour influencer l’apparence des composants.

     import * as React from 'react';
     export default class MyComponent extends React.Component<IMyComponentProps, IMyComponentState>
     {
  	  state = {
           name: 'John Doe',
           age: 35
        };

        public render(): React.ReactElement<IMyComponentProps> {
           return (
               <div>
                   <p>Name: {this.state.name}</p>
                   <p>Age: {this.state.age}</p>
               <div/>
           );
        }
     }

Dans cet exemple, il y a un composant appelé « MyComponent » qui affiche le nom et l’âge d’une personne. Ces données sont stockées dans l’état du composant et utilisées dans la fonction render pour l’affichage.

SCSS et Fluent UI

SCSS

SCSS signifie Sassy Cascading Style Sheets et est un préprocesseur pour CSS. Il offre des fonctionnalités supplémentaires telles que les variables, les imbrications, les mixins et les fonctions qui ne sont pas disponibles par défaut dans CSS. Cela vous permet de travailler de manière plus efficace et claire avec CSS dans vos projets.

SCSS se caractérise par un fichier .scss présent par défaut lorsque vous créez un WebPart ou une extension avec le générateur Yeoman. Vous pouvez ensuite utiliser ce fichier en l’important dans votre fichier TypeScript de composant ou de WebPart.

     import styles from './HelloWorld.module.scss';

Lorsque vous exécutez la commande gulp bundle, le fichier scss est compilé en CSS. Les noms de classes dans le fichier scss peuvent ensuite être utilisés dans votre composant React comme suit :

     .helloWorld {
        display: block;
     }

     return (
       <section className={styles.helloWorld}>
       </section>
     );

Dans SCSS, vous pouvez utiliser des fonctions pour effectuer des calculs et utiliser le résultat dans votre CSS. Cela vous permet de rendre votre CSS plus efficace et flexible.

Un exemple de fonction que vous pouvez utiliser est la fonction lighten(). Cette fonction prend une valeur de couleur et un pourcentage en entrée et retourne une nouvelle valeur de couleur plus claire que la couleur originale.

     $primary-color: #0078d4;

     .header {
         background-color: lighten($primary-color, 20%);
     }

Dans cet exemple, nous utilisons la fonction lighten() pour rendre la couleur de fond de l’en-tête 20% plus claire que la couleur originale que nous avons enregistrée dans la variable $primary-colour.

De plus, il existe de nombreuses autres fonctions telles que darken(), saturate(), desaturate(), rgba(), hsla() etc. que vous pouvez utiliser dans votre CSS.

Il existe également des fonctions que vous pouvez créer vous-même, comme une fonction pour déterminer la couleur du texte en fonction de la couleur d’arrière-plan :

     @function text-color($bg-color) {
       @if lightness($bg-color) > 50 {
         @return black;
       } @else {
         @return white;
       }
     }

     .header {
       background-color: #0078d4;
       color: text-color(#0078d4);
     }

Dans cette fonction, nous déterminons si la couleur d’arrière-plan est plus claire ou plus foncée que 50% de gris, et nous retournons la couleur de texte correcte en conséquence.

En utilisant des fonctions dans votre CSS, vous pouvez grandement augmenter la maintenabilité et la flexibilité de votre CSS.

Fluent UI

Fluent UI est un système de conception de Microsoft utilisé dans SharePoint, Office et d’autres produits Microsoft. Il est basé sur le Fluent Design System de Microsoft et fournit une interface utilisateur cohérente et moderne pour les applications web et mobiles.

Fluent UI propose une gamme de composants React que vous pouvez utiliser dans vos projets SharePoint Framework (SPFx). Ces composants sont conçus pour offrir l’expérience Microsoft moderne, comme les applications Office, par exemple.

Exemples de composants Fluent UI que vous pouvez utiliser dans vos projets SPFx :

• CommandBar : Une barre en haut de la page où les utilisateurs peuvent effectuer des raccourcis et des actions.
• DetailsList : Une liste bien organisée d’éléments que les utilisateurs peuvent trier, filtrer et sélectionner.
• Pivot : Un élément de navigation qui permet aux utilisateurs de passer facilement entre différents écrans ou éléments.

Un exemple d’utilisation du composant CommandBar dans un projet SPFx :

     import { CommandBar } from '@fluentui/react/lib/CommandBar';
     export default class MyCommandBar extends React.Component<IHelloWorldProps, {}> {
     public render(): React.ReactElement<IHelloWorldProps> {
       return (
            <CommandBar
                 items={[
                     {
                         key: 'newItem',
                         name: 'New',
                         iconProps: {
                             iconName: 'Add'
                         },
                         onClick: () => { console.log('New clicked') },
                     },
                     {
                         key: 'upload',
                         name: 'Upload',
                         iconProps: {
                             iconName: 'Upload'
                         },
                         onClick: () => { console.log('Upload clicked') },
                     },
                 ]}
             />
         );
       }
     }

Dans cet exemple, nous utilisons le composant CommandBar et spécifions les éléments que nous voulons afficher, tels que « New » et « Upload ». Chaque élément possède une clé, un nom, une icône et une fonction onClick qui s’exécute lorsque l’utilisateur clique sur l’élément.

Fluent UI utilise Office UI Fabric, une collection de styles CSS, d’icônes et de composants React. Cela facilite la création d’une interface utilisateur cohérente et professionnelle qui correspond au style des applications Office.

Fluent UI est disponible via npm et est facile à utiliser dans les projets SPFx. Vous pouvez l’utiliser en combinaison avec d’autres frameworks tels que React, Angular ou Vue.js.