SPFx Series: Kerntechnologieën

Het bouwen van oplossingen met het SharePoint Framework (SPFx) stelt ontwikkelaars in staat moderne webontwikkeltools te benutten terwijl ze naadloos integreren met Microsoft 365. Met behulp van TypeScript, React, SCSS en Fluent UI kun je gebruikerservaringen maken die responsief en gemakkelijk te onderhouden zijn.

Waarom deze tools?

• TypeScript biedt een robuust typesysteem dat de codekwaliteit verbetert, bugs vermindert en onderhoudbaarheid garandeert in complexe SPFx-projecten.
• React maakt de creatie van dynamische, component-gebaseerde interfaces met state management-mogelijkheden mogelijk, waardoor het een perfecte keuze is voor SPFx-webonderdelen en extensies.
• SCSS (Sassy CSS) maakt modulaire en herbruikbare stijlbladen mogelijk, wat theming en aanpassing vereenvoudigt, vooral in grote projecten.
• Fluent UI, de officiële ontwerpbibliotheek van Microsoft, zorgt voor consistente stijl en gedrag met andere Microsoft 365-toepassingen terwijl de ontwikkeling wordt versneld door kant-en-klare componenten.

TypeScript in een notendop

TypeScript is een programmeertaal die voortbouwt op JavaScript door optionele statische typen en andere functies toe te voegen. Het wordt ontwikkeld en onderhouden door Microsoft. TypeScript-code kan worden getransponeerd (omgezet) naar gewoon JavaScript, waardoor het compatibel is met elke omgeving die JavaScript kan uitvoeren.

Een van de belangrijkste kenmerken van TypeScript zijn optionele statische typen, waarmee ontwikkelaars het type van een variabele of functieparameter kunnen opgeven. Je kunt bijvoorbeeld opgeven dat een variabele een getal is:

    let myAge: number = 30;

Je kunt ook opgeven dat een functie een string-parameter krijgt en een booleaanse waarde retourneert:

    function isValidEmail(email: string): boolean {
        // implementatie hier
    }

Een ander kenmerk van TypeScript zijn klassen en interfaces, die kunnen worden gebruikt om objecten met specifieke structuren en gedrag te maken. Je kunt bijvoorbeeld een klasse “Person” maken met naam- en leeftijdseigenschappen:

    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

Interfaces kunnen ook worden gebruikt om een specifieke structuur van een object te definiëren.

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

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

React, wat is het en wat doet het?

React is een JavaScript-bibliotheek voor het maken van gebruiksvriendelijke en efficiënte gebruikersinterfaces. Het is ontwikkeld door Facebook en wordt momenteel veel gebruikt bij de ontwikkeling van webapplicaties.

React gebruikt een concept genaamd componenten. Een component is een stuk code dat een deel van een gebruikersinterface definieert, zoals een knop, een formulier, een lijst, enz. Elk component heeft zijn eigen logica en toestand en kan andere componenten bevatten. Dit maakt componenten gemakkelijk herbruikbaar en te onderhouden.

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

In dit voorbeeld is er een component genaamd “MyButton” die een knop weergeeft met een label dat via de props wordt doorgegeven.

React gebruikt een techniek genaamd virtuele DOM (Document Object Model) om de prestaties te verbeteren. De virtuele DOM is een kopie van de werkelijke DOM die in het geheugen wordt bewaard. Wanneer er wijzigingen zijn in de componenten, worden alleen de componenten die daadwerkelijk zijn gewijzigd bijgewerkt in de werkelijke DOM. Dit vermindert de hoeveelheid werk die de browser moet doen en verbetert daardoor de prestaties van de applicatie.

React biedt ook een aantal tools voor het beheren van de toestand van de applicatie, zoals state en props. Hiermee kun je gegevens bijhouden die veranderen gedurende de levensduur van een component en deze gegevens gebruiken om het uiterlijk van de componenten te beïnvloeden.

     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/>
           );
        }
     }

In dit voorbeeld is er een component genaamd “MyComponent” die de naam en leeftijd van een persoon weergeeft. Deze gegevens worden opgeslagen in de toestand van het component en gebruikt in de renderfunctie om weer te geven.

SCSS & Fluent UI

SCSS

SCSS staat voor Sassy Cascading Style Sheets en is een preprocessor voor CSS. Het biedt extra functionaliteit zoals variabelen, nesting, mixins en functies die standaard niet beschikbaar zijn in CSS. Hiermee kun je efficiënter en overzichtelijker werken met CSS in je projecten.

SCSS wordt gekenmerkt door een .scss-bestand dat standaard aanwezig is wanneer je een webonderdeel of extensie maakt met de Yeoman-generator. Je kunt dit bestand vervolgens gebruiken door het te importeren in je component- of webonderdeel TypeScript-bestand.

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

Wanneer je de opdracht gulp bundle uitvoert, wordt het scss-bestand gecompileerd naar CSS. De klassenamen in het scss-bestand kunnen vervolgens in je React-component als volgt worden gebruikt:

     .helloWorld {
        display: block;
     }

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

In SCSS kun je functies gebruiken om berekeningen uit te voeren en het resultaat in je CSS te gebruiken. Hierdoor kun je je CSS efficiënter en flexibeler maken.

Een voorbeeld van een functie die je kunt gebruiken is de lighten() functie. Deze functie neemt een kleurwaarde en een percentage als invoer en retourneert een nieuwe kleurwaarde die lichter is dan de oorspronkelijke kleur.

     $primary-color: #0078d4;

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

In dit voorbeeld gebruiken we de lighten() functie om de achtergrondkleur van de header 20% lichter te maken dan de oorspronkelijke kleur die we hebben opgeslagen in de variabele $primary-colour.

Bovendien zijn er veel andere functies zoals darken(), saturate(), desaturate(), rgba(), hsla() enz. die je in je CSS kunt gebruiken.

Er zijn ook functies die je zelf kunt maken, zoals een functie om de tekstkleur te bepalen op basis van de achtergrondkleur:

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

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

In deze functie bepalen we of de achtergrondkleur lichter of donkerder is dan 50% grijs, en retourneren we dienovereenkomstig de juiste tekstkleur.

Door functies te gebruiken in je CSS kun je de onderhoudbaarheid en flexibiliteit van je CSS aanzienlijk vergroten.

Fluent UI

Fluent UI is een ontwerpsysteem van Microsoft dat wordt gebruikt in SharePoint, Office en andere Microsoft-producten. Het is gebaseerd op het Fluent Design System van Microsoft en biedt een consistente en moderne gebruikersinterface voor web- en mobiele apps.

Fluent UI biedt een reeks React-componenten die je kunt gebruiken in je SharePoint Framework (SPFx)-projecten. Deze componenten zijn ontworpen om de moderne Microsoft-ervaring te bieden, zoals de Office-toepassingen, bijvoorbeeld.

Voorbeelden van Fluent UI-componenten die je kunt gebruiken in je SPFx-projecten zijn:

• CommandBar: Een balk bovenaan de pagina waar gebruikers snelkoppelingen en acties kunnen uitvoeren.
• DetailsList: Een goed georganiseerde lijst met items die gebruikers kunnen sorteren, filteren en selecteren.
• Pivot: Een navigatie-element waarmee gebruikers eenvoudig kunnen schakelen tussen verschillende schermen of items.

Een voorbeeld van hoe je de CommandBar-component kunt gebruiken in een SPFx-project:

     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') },
                     },
                 ]}
             />
         );
       }
     }

In dit voorbeeld gebruiken we de CommandBar-component en geven we de items op die we willen weergeven, zoals “New” en “Upload”. Elk item heeft een sleutel, naam, pictogram en een onClick-functie die wordt uitgevoerd wanneer de gebruiker op het item klikt.

Fluent UI gebruikt Office UI Fabric, een verzameling CSS-stijlen, pictogrammen en React-componenten. Dit maakt het gemakkelijk om een consistente en professionele gebruikersinterface te maken die overeenkomt met de stijl van Office-toepassingen.

Fluent UI is beschikbaar via npm en is eenvoudig te gebruiken in SPFx-projecten. Je kunt het gebruiken in combinatie met andere frameworks zoals React, Angular of Vue.js.