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

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...

Valo ist neuer Partner der novaCapta für Intranets
News
News

Valo ist neuer Partner der novaCapta für Intranets

Durch die Partnerschaft mit Valo, dem Ready-2-Go Intranet-Baukasten aus Finnland baut die novaCapta ihr Angebot bei der Umsetzung von schnellen und funktionalen...

Jan
25
Webcast mit Microsoft: Fit für die digitale Arbeitswelt
Webinar
Webinar

Webcast mit Microsoft: Fit für die digitale Arbeitswelt

Die digitale Transformation und die Veränderung der Arbeitswelt ist längst in vielen Unternehmen und in den öffentlichen Einrichtungen angekommen. Dennoch stell...

Sliding to heaven – A short story of a SPFx Slider Webpart
Blog
Blog

Sliding to heaven – A short story of a SPFx Slider Webpart

SharePoint Framework, kurz SPFx, ist eine zukunftsträchtige Technologie zur Erstellung von Webparts oder Extensions auf der Basis von TypeScript.

Bundesliga-Tippspiel

Bundesliga-Tippspiel

Fußball ist in Ihrem Unternehmen jeden Montag Gesprächsthema Nummer eins? Dann holen Sie sich die Fußball Bundesliga in Ihr Intranet!

novaBirthday

novaBirthday

novaBirthday erweitert Ihr SharePoint-Intranet um ein soziales Feature und kann damit die Akzeptanz und Reichweite verbessern.

Jan
17
Webinar Azure DevOps und Docker Machine
Webinar
Webinar

Webinar Azure DevOps und Docker Machine

DevOps ist in aller Munde, doch was genau verbirgt sich eigentlich hinter dem so viel beschworenen Konzept der IT-Zusammenarbeit? Im Webinar am 17.01.2019 erfah...

End of Life – Eine Applikation wird abgelöst
Blog
Blog

End of Life – Eine Applikation wird abgelöst

Die Stilllegung einer Applikation im Application Lifecycle Management nicht beachtet. Dennoch sollten sie in einem ganzheitlichen Ansatz beachtet werden.

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.

SharePoint Fachapplikationen

SharePoint Fachapplikationen

Fachapplikationen für Microsoft SharePoint erweitern den Funktionsumfang von SharePoint in vielfältiger Weise, lassen sich auf individuelle Bedürfnisse zuschnei...

Junge mit rotem Herz aus Filz in der Hand als Symbol der Nächstenliebe
Referenz: Caritasverband Köln

Referenz: Caritasverband Köln

Dem hohen Anspruch an das Qualitätsmanagement wurde nun mit einer neuen SharePoint 2013 basierten Lösung der novaCapta Rechnung getragen.

Strukturen lernen und leben – Praxis Informationsarchitektur
Blog
Blog

Strukturen lernen und leben – Praxis Informationsarchitektur

Teil 1 – Strukturen lernen – Informationsarchitektur erfolgreich vertreten