TypeScript SharePoint 2013 App

SharePoint-hosted Apps für SharePoint 2013 schreibt man bekanntlich vermehrt in JavaScript. Da für JavaScript Sprachkonstrukte wie Klasse, Interfaces, Vererbung oder Module nicht existieren, ist es für .NET Entwickler vielfach nicht ganz einfach JavaScript Anwendungen richtig zu schreiben. Um diese Probleme in der Frontend Entwicklung zu eliminieren, hat Microsoft die Programmiersprache TypeScript entwickelt. TypeScript stellt einen Compiler zur Verfügung, welcher TypeScript Code in JavaScript Code umwandelt. Ebenso existiert ein Visual Studio Plugin, welches dem Entwickler IDE Support für TypeScript gibt. Eine Anleitung für die Installation ist auf der offiziellen Website von TypeScript beschrieben.
(mehr …)

Datengetriebene Internet Geschäfts Anwendungen in Echtzeit

In diesem Blogbeitrag soll gezeigt werden wie im B2C/B2B Bereich Adressen der Schweiz für Kunden/Unternehmen in Echtzeit im Webbereich zur Verfügung gestellt werden.

Namics durfte den neuen Auftritt der Geschäftsanwendung der Künzlerbachmann AG Direktmarketing http://app.ch-address.ch/ realisieren. Anforderungen an die neue Plattform waren:

  • Hohe Performance
  • Modularer und datengesteuerter Aufbau
  • Widerverwendbarkeit der einzelnen Kriteriencontrols
  • Skalierbarkeit
  • .Net als Basistechnologie

Modalisierung

Die Selektionsseite, Kern dieser Anwendung, in der sich der Benutzer bewegt, wurde in sogenannte „Selektionsmodule“ unterteilt. Benutzer können die gewünschten Adressen anhand verschiedener Kriterien/Modulen zusammenstellen. So lassen sich die Regionen beispielsweise mit Hilfe einer interaktiven Karte.Ein anderes Selektionsmodule bietet die Auswahl aus verschiedenen verschiedenen Handelskategorien wie „Fischerei und Aquakultur“.

Jedes Selektionsmodul hat verschiedene Ausprägungen. Abhängig der Daten wird das entsprechende Selektionsmodul gerendert. Dieses besitzt eigene Operationen, die in Echtzeit mit dem Benutzer interagieren.

Beispiel Geographie Suche

2490-KB_geo-thumb-500x414-2489.png

Beispiel Selektionsmodul: „Liste mit Suche“:

2493-KB_Kategorien-thumb-500x186-2492.png

Auch „kommunizieren“ Module untereinander oder sind abhängig voneinander. Wählt ein Benutzer demnach verschiedene Kriterien aus, so wird eine neue Berechnung der Anzahl vorgenommen:

Beispiel Berechnung Anzahl Adressen:

2505-KB_Summary-thumb-239x266-2495.png

Echtzeit und Performance
-> Synergie zwischen Terrific und .NET

Die grössten Herausforderungen war es die Geschäftsdaten grafisch performant aufzubereiten und bei jeder Interaktion eines Benutzers in Echtzeit die neue Auswahl aufzubereiten und nachzuladen.

Um dieser Anforderung gerecht zu werden musste die Last auf verschiedene Komponenten verteilt werden. Jede dieser Komponenten wird heute auf verschiedenen System gehostet.

2499-KB_Componenten-thumb-500x219-2498.png

Die Renderlogik stellt bei einer Aktion des Benutzers eine Anfrage an die Applikationslogik. Diese verarbeitet diese, gibt die Nutzdaten an die Business Logik und gibt diese an das entsprechende Control zurück.
Komponentendetails

I Backend
Alle Geschäftsprozesse, sprich Preisberechnungen, Berechnung der Anzahl – Adressen und Kundentracking, werden auf Basis SQL realisiert. Das Backend, – auf das Namics aufgesetzt hat, wurde von Künzlerbachmann bereitgestellt.

II Middleware
Der Grösste Teil der Middleware ist eine Implementierung in reinem .NET. Diese Schicht hält die Daten bereit, verwaltet die Benutzer, tauscht Bestellungen mit dem Backend aus und stellt alle notwendigen Operationen mittels WCF Services via Rest für Terrific zur Verfügung. Zwischen dem Client und der Middleware werden lediglich noch REST Daten getauscht.

III Frontend
Wie bekommt man nun eine schnelle interaktive Webseite? Man trennt die Interaktion von der Logik auf, d.h. sämtliche Benutzerinteraktionen werden auf der Benutzerseite, sprich dem Browser, ausgelagert. Terrific (http://blog.namics.com/2010/06/terrific-part1.html) heisst das Zauberwort, das den Browser zu einem vollständigen selbständigen Layer ausbaut. Alle Operationen werden auf der Middleware durchgeführt, die Anzeige übernimmt der Client. Die Middleware rendert nur mehr das Grund HTML. Die Last auf der Middleware sinkt und kann den Prozess des Renders an die Browser jedes einzelnen Benutzers abgeben.

Skalierbarkeit

Durch die Windows Communcation Foundation (WCF, http://msdn.microsoft.com/en-us/netframework/aa663324.aspx) wird eine einfache Skalierbarkeit möglich. Die Logik könnte noch einmal separat auf einen eigenen Server ausgelagert werden, um noch mehr Performance zu erreichen:

2502-KB_Architektur-thumb-500x289-2501.jpg

Wiederverwendbarkeit

.NET Implementierung
Jede entwickelte Kompenente lässt sich dank implementierten Interfaces beliebig austauschen und beliebig wiederverwendeten. Dafür lässt sich das Managed Extensibility Framework (MEF, http://mef.codeplex.com) einsetzen, welches das Komponentenmanagement übernimmt und stark vereinfacht.
Frontend
Dank Terrific ist jedes Modul im Frontend beliebig austauschbar und kann auch wiederverwendet werden, da es sich an die vordefinierten Regeln und das Design hält.

Fazit
Das Ergebniss dieses Projekts ist eine hochperformante und wiederverwendbare Webanwendung, die in Zukunft einfach zu warten ist. Erweiterungen sind dank der Komponenten und definierten Schnittstellen einfach zu tauschen.