SharePoint Framework – Client-Side Webparts mit React entwickeln

React ist ein Framework, welches zum Erstellen von Benutzeroberflächen dient. Die Architektur besteht aus Komponenten, welche als Basis für einen modularen und leicht zu verstehenden sowie wieder verwendbaren Frontendcode dient. Gerade in der SharePoint Online Entwicklung bietet es sich an, React als Framework für die Entwicklung von Client-Side Webparts zu verwenden, da es einige Vorteile mit sich bringt:

1. Komponentenarchitektur

Komponenten sind der zentrale Baustein von React. Jede Komponente hat eine render()-Funktion, welche die DOM-Elemente zurück liefert, sodass diese anschließend gerendert werden können. Durch die Verwendung von JSX-Elementen wird ermöglicht, innerhalb der render()-Methode HTML zu schreiben. Das HTML kann allerdings auch außerhalb der Methode in Variablen gespeichert und anschließend in der render()-Methode durch geschweifte Klammern aufgerufen werden. Es gibt fertige Komponenten, welche eingebunden werden können (z.B. Buttons, Spinner) oder aber auch die Möglichkeit, eigene Komponenten zu erstellen. Der einfachste Aufbau einer Komponente mit Konstruktor, welche in dem Fall in Typescript geschrieben wurde, sieht wie folgt aus.

Diese Komponente erhält Properties, welche dieser beim Aufruf übergeben werden. Diese Properties sind read-only und können nun durch Aufruf in geschweiften Klammern gerendert werden. Es können aber auch, wie hier zu sehen ist, Variablen aufgerufen werden.

Die Komponentenarchitektur bietet folgende Vorteile:

Übersichtlichkeit

Durch das Auslagern einzelner Elemente (z.B. Suchfelder, Buttons, Fehlermeldungen) bleibt der Code in der Hauptkomponente übersichtlicher. Funktionalitäten für kleinere Bausteine eines Webparts können in eine eigene Komponente ausgelagert und von dort aus gerendert werden.

Wiederverwendbarkeit einzelner Komponenten

Eine selbst erstellte Komponente kann innerhalb des Projekts an jeder beliebigen Stelle wiederverwendet werden. Somit spart man sich nicht nur einige Zeilen Code, welche immer wieder kopiert/neu geschrieben werden müssten, sondern stellt auch sicher, dass ähnliche Elemente (z.B. Dialogfenster, welche sich nur vom Inhalt unterscheiden) auch dasselbe Aussehen und Verhalten haben.

2. Virtueller DOM

Das ständige Ändern des DOM-Objektes führt oftmals zu Performance-Problemen, vor allem wenn an vielen verschiedenen Stellen Änderungen vorgenommen werden müssen oder, um dies zu vermeiden, gleich der ganze DOM ausgetauscht wird. Durch die Nutzung eines virtuellen DOM-Objektes durch React werden diese Probleme jedoch bei Seite geschafft. Die render()-Funktionen passen hierbei nicht den tatsächlichen DOM an, sondern erstellen eine Repräsentation des DOMs. Somit kann diese mit einer früheren Version des DOMs verglichen werden, um minimale Änderungen zu bestimmen, die auf dem echten DOM vorgenommen werden müssen.

3. Komponenten-Lifecycle

Jede React-Komponente hat ihren eigenen Lifecycle. Dieser lässt sich wie folgt Darstellen:

Wie in der Abbildung zu sehen ist, wird bei Erstellung der Komponente (Mounting-Phase) der Konstruktor erstellt, die Properties werden zur Verfügung gestellt und es wird gerendert. Anschließend wird die zur Verfügung stehende Methode „componentDidMount()“ ausgeführt, welche vom Entwickler selbst implementiert werden kann. Sie eignet sich sehr gut, um Daten anzufragen, da die render()-Methode nicht unterbrochen wird, die Daten dennoch zum frühestmöglichen Zeitpunkt geladen werden. Ändern sich Properties oder der State der Komponente beginnt die Updating-Phase, welche ähnlich zur Mounting-Phase abläuft. Allerdings wird der Konstruktor nicht erneut ausgeführt, stattdessen stehen jedoch Methoden zur Verfügung, welche entscheiden lassen, ob die Updating-Phase überhaupt weiter ausgeführt oder abgebrochen werden soll. Zudem gibt es die Möglichkeit, einen Snapshot der alten Version zu erstellen. In der Unmounting-Phase gibt es die Möglichkeit vor dem Schließen der Komponente in der „componentWillUnmount()“-Methode letzte Schritte zu implementieren. Durch die zur Verfügung stehenden Methoden erhält der Benutzer zu jeder Phase die Möglichkeit, in diese einzugreifen und den Lifecycle zu beeinflussen. Er kann entscheiden, was passiert sobald die Komponente existiert („componentDidMount()“), sich Properties oder der State ändern („shouldComponentUpdate()“/„componentDidUpdate()“) oder die Komponente geschlossen (“componentWillUnmount()”) wird.

4. Unterstützung von Yeoman zur Erstellung von Webparts

Mithilfe von Visual Studio Code, Node.js, Gulp und Yeoman lassen sich ganz einfach über die Konsole SharePoint Client-Side Webparts erstellen. Yeoman bietet einen SharePoint-Generator, welcher folgendem Befehl installiert wird:

Mit dem Befehl “yo @microsoft/sharepoint” kann anschließend ein Webpart erstellt werden. Der Entwickler wird nun nach dem Namen der Solution sowie des Webparts gefragt, anschließend kann er auswählen ob er React, Knockout oder kein Framework verwenden möchte. Der SharePoint Generator erstellt nun alle benötigten Dateien sowie einen „Hello World“-Webpart. Somit muss sich der Entwickler hierbei um nichts weiteres kümmern und kann direkt mit der Implementierung seines Webparts beginnen. Zum Testen steht ihm die SharePoint Workbench zur Verfügung.

Die SharePoint Workbench ist eine Designoberfläche für Entwickler und bietet eine Vorschau seines Webparts auf einem lokalen Webserver. Durch die Eingabe folgender Befehle öffnet sich im Browser die lokale Workbench:

Hier können nun die im Projekt erstellten Webparts zur Seite hinzugefügt und getestet werden. Somit muss der Entwickler die Solution nicht direkt in SharePoint deployen, sondern kann erstmal lokal testen. Auch wenn man als Entwickler stets unter realistischen Bedingungen in SharePoint selbst testen sollte, ist es manchmal ganz nützlich, diese lokale Test-Seite zur Verfügung zu haben. Im Folgenden gibt es ein Beispiel für eine Workbench:

Fazit:

React erleichtert einem nicht nur die Arbeit während der Entwicklung von SharePoint Client-Side Webparts, sondern hilft dabei, sauberen und leicht wartbaren Code zu schreiben.

Quellen:

https://reactjs.de/artikel/react-tutorial-deutsch/
https://docs.microsoft.com/de-de/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part
https://www.google.de/search?q=react+lifecycle&safe=active&rlz=1C1CHBF_deDE806DE806&tbm=isch&source=iu&ictx=1&fir=oYk_iq7JSEJ5iM%253A%252CQ6JFIsD-oYVm-M%252C_&usg=AI4_-kTVxStAuHI2U6_xULCr9YrWk2o7g&sa=X&ved=2ahUKEwiykISLtsTeAhXGDSwKHd2qDjcQ9QEwAnoECAQQBA#imgrc=oYk_iq7JSEJ5iM: