Im Bereich der Webtechnologien und der Webentwicklung gab es in den letzten Jahren eine Bewegung weg von klassischen Serveranwendungen - bei welchen HTML Seiten auf dem Server erzeugt und dem Client mittels Web Response übermittelt wurden - hin zu leichtgewchtigeren client-basierten Anwendungen. Bei diesen Anwendungen dient der Server primär als Backend System, welches dem Client leichtgewichtige Schnittstellen (bspw. REST) zur Verfügung stellt. Die Darstellung einer Applikation, sowie die Benutzerführung werden dabei direkt auf dem Client umgesetzt.
Dieser Ansatz wurde in den vergangenen Jahren auch in Office365 und SharePoint immer wichtiger und treibt heute Weiterentwicklungen an (siehe bspw. SharePoint Framework)
Der neue Ansatz bietet diverse Vorteile:
- Schnelles Prototyping und kürzere Iterationen in der Entwicklung
- Entlastung des Servers
- Entwicklung der Client Applikation in einer Echtzeit Browserumgebung
- O365- und dadurch zukunftssicher
- Nutzung neuster und gängiger Webtechnologien
- Keine oder weniger (einfachere) SharePoint Farmsolutions
- Kein Unterbruch des SharePoint Servers bei Updates
- Bessere Wartbarkeit / Erweiterbarkeit
- Einfachere Wiederverwendbarkeit / Modularisierung
Moderne SharePoint Entwichlung bei Nexplore
Mit dem SharePoint Framework (SPFx) werden SharePoint Entwicklern modernere Web-Entwicklungswerkzeuge zur Verfügung gestellt. Mit SPFx können moderne Webparts für O365 und SharePoint Server 2016 umgesetzt werden. Weitere Anpassungen (Custom Actions, JSLink, Portale, etc.) sind bereits jetzt oder bald in SharePoint 2016 verfügbar, eine Umsetzung von Funktionalitäten mittels SPFx in SharePoint 2013 wird aber auch in Zukunft nicht möglich sein.
Bei Nexplore wollten wir Ende 2016 nicht auf SharePoint 2016 und entsprechende Feature Packs warten, respektive auf O365 Projekte eingeschränkt sein, sondern den vielversprechenden Ansatz evaluieren und auch in bestehenden Projekten einsetzen. Daraus ist unser SharePoint Webstack Development Framework entstanden, welches wir im letzten Jahr in diversen Projekten erfolgreich eingesetzt haben.
SharePoint Webstack Development Framework
Analog des SharePoint Frameworks (SPFx) haben wir eine Webstack Development Umgebung aufgebaut, welche unsere Anforderungen erfüllt und zunkunftssicher ist. Wichtig bei der Wahl von Werkzeugen war für uns die Berücksichtigung von Technologien die auch im SPFx verwendet werden. So lassen sich unsere Weiterentwicklungen schnell in SPFx überführen und es gibt keine (oder nur eine kleine) Lernkurve falls man in beiden Frameworks entwickelt.
Unsere Webstack Development Umgebung basiert auf folgenden Technologien
Nebst den genannten Komponenten sind noch weitere im Einsatz. SPFx verwendet dieselben Komponenten, einzig als Bundler wird Gulp eingesetzt.
Unser Webstack Framework sowie SPFx bieten beide eine Technologie namens 'Hot Reloading' an. Hierbei wird die Applikation (Source Code) live auf einem lokalen Webserver ausgeführt. Änderungen in Visual Studio Code können dadurch direkt im Browser (in der Applikation) evaluiert und weiterentwickelt werden. Der Entwicklungsprozess wird hier markant optimiert.
In der Abbildung ist ein Ausschnitt der Entwicklungsumgebung dargestellt. Der Code ist kompiliert und läuft auf dem lokalen Server (Terminal Ausgabe unten rechts). Änderungen am Code sind nun direkt im Browser sichtbar.
Wie funktioniert das genau?
In Visual Studio Code werden Projekt, Quellcode, etc. verwaltet. Mittels webpack werden die verschiedenen Dateien (Javascript, CSS, Bilder, Fonts, etc.) zusammengeführt (bundling) und es wird ein ausführbarer Output generiert. Im Falle des Development Build handelt es sich hierbei um eine einzelne bundle.js Datei, welche alle Artifakte (JS, CSS, Bilder, etc.) enthält. Beim Production Build kann der Output auf mehrere Dateien aufgesplittet werden. Typischerweise wird hier auch das CSS extrahiert.
Über einen lokalen Entwicklungsserver (webpack-dev-server) basierend auf NodeJS, wird der generierte Development Output (bundle.js) geladen und der Client Applikation (Webbrowser) direkt zur Verfügung gestellt. Der Ablauf ist in der folgenden Abbildung dargestellt.
Im Quellcode (JS oder CSS) wird eine Änderung gemacht. Beim Speichern aktualisiert webpack die bundle.js Datei. Dies wird vom webpack-dev-server erkannt und die aktualisierte bundle.js Datei wird über den Endpunkt http://localhost:3000/bundle.js live zur Verfügung gestellt. Im Webbrowser wird bundle.js unter dieser Adresse geladen und die Änderung ist direkt im Webbrowser ersichtlich (Hot Reloading / Live Development). Durch Hot Reloading aktualisiert webpack-dev-server den Browser (analog F5) sobald eine Änderung erfolgt ist, d.h., sobald im Visual Studio Code gespeichert wird.
Ist die Entwicklung abgeschlossen wird ein Production Build ausgeführt und die generierten (optimierten) Javascript und CSS Dateien können in der Applikation verwendet werden.
In unserer Entwicklungsumgebung benutzen wir ReactJS und Typescript für die Umsetzung der UI Komponenten und Schnittstellen. Diese Dateien (.tsx und .ts) werden von Typescript während des bundling Pozesses (webpack) in nativen Javascript übersetzt.
Anwendungen
Das Framework kam bei uns im laufenden Jahr in diversen Projekten zum Einsatz, so haben wir mehrere Portalseiten und Webparts mit diesem Ansatz gebaut oder umgebaut. Insbesondere sind wir mit dem Ansatz imstande schnell erste Entwürfe zu generieren und dem Kunden zu zeigen. Das so erhaltene Feedback fliesst dadurch früh in den Entwicklungsprozess zurück. Ausserdem sind Anpassungen und Erweiterungen (generell) viel schneller entwickelt.
Das neue Entwicklungsframework benötigt eine gewisse Lernkurve die recht steil sein kann. Der Merhaufwand lohnt sich aber eindeutig, sobald man sieht was für Früchte der Aufwand trägt.
Wir setzen in der SharePoint Entwicklung zukünftig stark auf unser Framework und auf das SharePoint Framework SPFx und sind gespannt was im O365/SharePoint Umfeld für weitere Neuerungen kommen.
