CoffeeBreak – Über die Entwicklungsumgebung

Entwickelt man heutzutage HTML5 / JavaScript Anwendungen dann ist man (irgendwie jeder für sich) an eine gewisse Entwicklungsumgebung gewohnt. Nach dem Erstellen des SharePoint AddIn Projektes in Visual Studio 2015 (Update 3) fehlte mir doch einiges zur Comfort Zone, das ich mir dann entsprechend eingerichtet habe.

Natürlich ist da erst einmal TypeScript – als Ergänzung zu JavaScript. Vielleicht habe ich da nicht richtig gesucht, aber Microsoft direkt scheint da nichts anzubieten. Ich habe daher im Projekt nur die Definitely Typed Definitionen verwendet. Zwar gibt es doch so einige Anwender mit TypeScript Bibliotheken zum Zugriff auf SharePoint, aber ich habe das Ganze hier minimalistisch gehalten und das Notwendigste selbst implementiert – vielleicht ein Ausgangspunkt für eine Bibliothek, vielleicht aber auch nur Ideen, die anderswo schon so umgesetzt sind und die ich einfach nur nicht gefunden habe. Auch der Start der Anwendung erfolgt natürlich in einer TypeScript Klasse – mit einem kleinen Tweak für den Unterschied zwischen Stand-Alone Betrieb und Integration als Client Web App.

Aus den einzelnen TypeScript Dateien wird eine einzige JavaScript Datei erstellt, die dann im Package der App landet – für alle TypeScript Dateien habe ich den Deployment Type auf NoDeployment gesetzt, da die nichts auf dem produktiven System zu suchen haben.

Zur Pflege der CSS Dateien verwende ich im Allgemeinen SASS, hier im Projekt via NodeJS und Gulp eingerichtet – will man das Projekt übersetzen, muss einmalig ein NPM UPDATE machen, ich habe darauf verzichtet das Modulverzeichnis auf GitHub hochzuladen. Tatsächlich war das hier ein absoluter Nebenschauplatz und auf Styling habe ich weitestgehend verzichtet – die SASS Datei ist minimal und da ist sicher eine Menge Luft nach oben. Kritisch ist vor allem, dass ich die SharePoint Umgebung weitestgehend ignoriere (die ASPX des Client Web Parts wurde entsprechend reduziert und referenziert nicht das Styling der Seite) darum sieht die Anwendung doch etwas eigenartig aus – naja, die Alternative wäre die Einarbeitung in die SharePoint Konventionen, was ich mir hier erst einmal ersparen wollte.

Die Anwendung ist als Single-Page-Application (SPA) angelegt, ich habe auf ein explizites Binding Framework wie AngularJS verzichtet und die paar Bindungen explizit (und meiner Ansicht nach auch klarer als die $watch-Magie von AngularJS 1.5) vorgenommen. Als externe JavaScript Bibliotheken sind lediglich (die heute 🙂 gerade) aktuelle Versionen von jQuery und jQueryUI über das in Visual Studio integrierten NuGet eingebunden – auch diese Pakete sind nicht auf GitHub und vor dem eigenen Übersetzen des Projektes muss einmalig ein Restore aus Visual Studio heraus ausgeführt werden. Die Programmierung gegen diese Bibliotheken erfolgt natürlich über die Definitely Typed Definitionen aus TypeScript heraus.

Mit diesen kleinen Vorbereitungen lässt sich das SharePoint-Hosted AddIn fast wie ein normales HTML5 / JavaScript Projekt entwickeln und auch gegen eine virtuelle Maschine (Windows Server 2012 R2 – etwas tricky in der Einrichtung der SharePoint Foundation 2013 aber zumindest alles wesentliche bekommt man ans Laufen) debuggen – sowohl Stand-Alone als auch als Client Web Part.

Die Struktur der Anwendung entspricht so ganz grob einem MVC Ansatz, richtig sauber war ich da aber nicht:

  • Zur Anzeige wird ein Controller und ein passender View erzeugt
  • Der Controller erstellt und verwaltet das Modell
  • Die Kommunikation des Controllers mit seinem Umfeld erfolgt ansonsten über eine Präsentationsschnittstelle
  • Aus Faulheit wird diese aber direkt vom View implementiert
  • Der View bindet sich geeignet an die HTML Element der Oberfläche
  • Für jeden View gibt es im Projekt eine HTML Datei, die bei Aktivieren des Views ins DOM geladen wird

Das muss erst mal reichen, weitere Details im Selbststudium…

Nun, der nächste Post der Reihe sollte sich dann auch mal wirklich um die Ziele der Evaluation kümmern – mit einem kleinen Fazit, das aber wie schon im vorherigen Post angedeutet durch unvollständige Informationen / Recherchen meinerseits verfälscht sein wird.

Jochen

Speichere in deinen Favoriten diesen permalink.

Kommentare sind geschlossen.