SharePoint Framework – Client-Side Webparts mit React entwickeln

Datum

20.11.2018

Dieser Beitrag wurde verfasst von:

Lisa Reich

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.

Abbildung 1: React Komponente
Abbildung 1: React Komponente

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:

Abbildung 2: Lifecycle einer React-Komponente
Abbildung 2: Lifecycle einer React-Komponente

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:

Abbildung 3: Installieren des SharePoint Generators
Abbildung 3: Installieren des SharePoint Generators

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:

Abbildung 4: Workbench starten
Abbildung 4: Workbench starten

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:

Abbildung 5: Workbench
Abbildung 5: 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:

Erfahren Sie mehr

Office 365 Groups als Evolution von SharePoint?
Blog
Blog

Office 365 Groups als Evolution von SharePoint?

Zusätzlich zu SharePoint erlauben die Office 365 Groups es mir als Anwender, schnell und einfach neue Gruppen anzulegen und selbständig Benutzer hinzuzufügen.

Ich bin im Flow! – Eine Übersicht zu Microsoft Flow
Blog
Blog

Ich bin im Flow! – Eine Übersicht zu Microsoft Flow

Die Power Platform wird aktuell von Microsoft sehr stark gepusht. Zeit, sich mit dem Potenzial der einzelnen Komponenten zu beschäftigen. Heute: Flow.

Das neuste Mitglied der Office 365 Familie: Delve
Blog
Blog

Das neuste Mitglied der Office 365 Familie: Delve

Microsoft legt nach: Mit Delve startet eine neue Form des Suchens und des Auffinden von Dokumenten und Informationen.

PowerApps – Neuigkeiten, Übersicht, Tipps & Tricks
Blog
Blog

PowerApps – Neuigkeiten, Übersicht, Tipps & Tricks

Neues aus der Welt von PowerApps

Sprechen Sie LUIS? – Der intelligente Chat-Bot im Praxistest
Blog
Blog

Sprechen Sie LUIS? – Der intelligente Chat-Bot im Praxistest

Mit LUIS, der Sprach- und Texterkennungssoftware von Microsoft, und dem Bot Framework von Azure haben wir eine Lösung für den IT-Support entwickelt.

novaCapta auf der Fachtagung für Interne Revision
Event
Event

novaCapta auf der Fachtagung für Interne Revision

Das Expertenteam der novaCapta präsentiert am 15. und 16. November ihre innovative Audit Management Lösung auf dem DIIR-Kongress in Dresden. Besuchen Sie unsere...

May
04
novaCapta auf der dotnet Cologne
Event
Event

novaCapta auf der dotnet Cologne

In nächster Nachbarschaft zu unserem Kölner Büro findet am 04. und 05. Mai die dotnet Cologne im KOMED statt. Wir von der novaCapta sind auch dabei.

DevOps und Container
Blog
Blog

DevOps und Container

DevOps an sich ist nicht an eine Technologie gebunden, jedoch haben sich Container-Technologien und DevOps als Verwandte im Geiste gefunden.

Mit der HoloLens ein Stück Berlin nach Köln holen
News
News

Mit der HoloLens ein Stück Berlin nach Köln holen

Im Rahmen eines zweitägigen Hackathons haben sich einige Mitarbeiter der novaCapta der Microsoft HoloLens und dem Thema Mixed Reality gewidmet. Dabei haben wir...

Azure Functions: Der Webservice ohne Webserver
Blog
Blog

Azure Functions: Der Webservice ohne Webserver

Azure Functions als Authentifizierungs-Helfer für clientseitige Lösungen mit 3rd Party APIs

Paket Dependency Manager für .NET
Blog
Blog

Paket Dependency Manager für .NET

Paket ist ein Dependency Manager für .NET, welcher es sich zum Ziel gesetzt hat einige Probleme von NuGet zu beheben.

Nov
07
Webcast mit Microsoft: Das Intranet zu Ende gedacht
Webinar
Webinar

Webcast mit Microsoft: Das Intranet zu Ende gedacht

Am 07. November findet erneut eines unserer Webinare gemeinsam mit Mircosoft statt. Das Thema dieses Mal: Das Intranet zu Ende gedacht – Die Informationszentral...