Rasanter Technologiewandel – .NET Core mit Angular

Die Technologien ändern schneller und die Vielfalt nimmt zu. Muss man immer auf dem neusten Stand sein? Am Beispiel der Microsoft .NET Core Technologie im Zusammenspiel mit Angular werden konkrete Antworten für eine Webanwendung aufgezeigt.

Webanwendung Heute

Eine mögliche Architektur auf dem neusten Stand der Technik sieht wie folgt aus:

  • Benutzeroberfläche mit Angular 4
  • Geschäftslogik, Datenhaltung mit .NET Core 2
  • Einsatz eines Frameworks für den Datenbank-Zugriff, z.B. Dapper
  • Test der Schnittstellen zwischen Angular und .NET Core mit Postman
  • Vollständige Entkopplung zwischen Benutzeroberfläche und Logik

.NET Core ist open source und Plattform unabhängig (läuft z.B. auf Windows, Linux und Mac). Angular ist die am weitesten verbreitete Technologie für Benutzeroberflächen von Webanwendungen.

VR-Technologie

Der Lauf der Zeit

Vor 4-5 Jahren sah die Vorgänger-Architektur so aus:

  • Benutzeroberfläche mit Razor Views (Einsatz eines JavaScript-Frameworks wie jQuery)
  • Geschäftslogik, Datenhaltung mit ASP.NET MVC (Model View Control) 5
  • Einsatz eines Frameworks für den Datenbank-Zugriff, z.B. Dapper
  • Vollständige Entkopplung zwischen Benutzeroberfläche und Logik

Im Jahr 2013/2014 gab es Angular 1 bereits, steckte noch in den Kinderschuhen. Ab 2015 war AngularJS verfügbar. D.h. vor 4-5 Jahren war Angular im Zusammenspiel mit ASP.NET MVC kein Thema.

Muss es immer das (Aller)Neuste sein?

Diese Frage hängt von der Konstellation ab:

1) Entwicklung einer neuen Anwendung

Hier lohnt sich der Einsatz der neusten Technologien. Damit wird die Zeit bis zum nächsten Wechsel maximal verzögert. Zu beachten sind folgende Punkte:

  • Technologie / eingesetzte Version muss stabil sein
  • Es müssen auf Fremdprodukte vorhanden sein. Konkretes Beispiel: NHibernate war Anfang 2018 nicht für .NET Core 2 verfügbar.
  • Neben der Entwicklung muss auch das Hosting angeschaut werden. .NET Core ist viel komplizierter als ASP.NET MVC

2) Weiterentwicklung einer bestehenden Anwendung

Meist werden noch andere Fremdprodukte / Bibliotheken eingesetzt. Solange der Support für diese Produkte und Technologien gewährleistet ist, muss nicht auf die neuste Technologie gewechselt werden. Dies ist meist für einige Jahre gewährleistet. Ausser es gibt neue Funktionen, die von der Anwendung gebraucht werden.

Technologie Wandel

Technologie Wechsel

In unserem Beispiel betrifft der Wechsel zwei Technologien:

1) Razor Views -> Angular

Es sind komplett verschiedene Technologien. Der bestehende Code kann nicht verwendete werden. Die Benutzeroberfläche muss neu entwickelt werden. Das bedeutet meistens viel Aufwand.

2) ASP.NET MVC -> .NET Core

Das Grundkonzept der Controller (Ablauflogik) kann übernommen werden. Der Startup-Code und die Konfiguration sind verschieden. Ein Teil des bestehenden Codes kann verwendet werden.

Im Normalfall ist der Controller-Teil eher klein. Darum ist es nicht so wichtig, wie viel davon wiederverwendet werden kann.

Wichtig ist, dass die Geschäftslogik nicht im Controller integriert ist.

Fazit

  • Wird eine Anwendung neu entwickelt, lohnt sich der Einsatz der neusten Technologien. Es sollen stabile Versionen eingesetzt werden. Weiter muss geprüft werden, ob es die nötigen Fremdprodukte zu dieser Technologie gibt.
  • Bei einer bestehenden Anwendung gibt es keinen zeitlichen Druck, die neusten Technologien einzusetzen.
  • Bei einem Technologiewechsel muss meist die Benutzeroberfläche neu entwickelt werden. Das ist mit viel Aufwand verbunden.
  • Die Geschäftslogik MUSS technologie-neutral sein. In unserem Fall: Programmierung in C# ohne Verweise / Referenzen auf Angular oder spezifische .NET Core Bibliotheken. Auf diese Weise kann die Geschäftslogik mit jeder Technologie eingesetzt werden, auch für ein App.

Links

Effiziente Software Begutachtung im Detail

Die 3 Kernbereiche Architektur, Schnittstellen und Fremdprodukte werden detaillierter untersucht. Als Grundlage dient der Überblick.

Dieser Teil ist Technik lastig und setzt Programmierkenntnisse voraus.

Geschäftslogik

Die Geschäftslogik muss in sich gekapselt sein. Dies bedeutet, dass sie nicht weiss, wie die Daten gespeichert werden. Sie weiss nur, dass es eine interne Schnittstelle zur Speicherung gibt. Wie die konkrete Umsetzung aussieht (File, Datenbank), darf die Geschäftslogik nicht wissen. Somit kann auf einfache Weise eine Oracle-Datenbank durch eine mySQL-Datenbank ersetzt werden.

Die Geschäftslogik darf auch nicht wissen, ob sie von einer Webanwendung oder einer Mobile App verwendet wird. Oder ob es beides miteinander gibt. Ist diese Trennung garantiert, kann die Benutzeroberfläche ausgetauscht oder es können neue Benutzeroberflächen hinzugefügt werden.

Diese Abhängigkeiten können einfach geprüft werden: Gibt es einen technischen Verweis (Import) zur Datenhaltung oder Benutzeroberfläche? Falls ja, gibt es ein Problem.

Business Logik

Datenhaltung

Die Datenhaltung kümmert sich nur um das Speichern, Suchen und Lesen von Daten. Je nach Anwendung können folgende Punkte wichtig sein:

  • Schnelle Suche von Daten in grossen Tabellen oder in mehreren Tabellen (sog. Joins)
  • Schnelle Speicherung von mehreren tausend Datensätzen auf einmal (sog. Bulk Insert)

Es ist möglich, dass die Geschäftslogik (teilweise) in der Datenbank in Form von Stored Procedures vorhanden ist. Aus Sicht der Wiederverwendbarkeit und des einfacheren Verständnisses bevorzugt der Autor eine Lösung im Programmcode (Java, C#).

Benutzeroberfläche

Jede Art der Benutzeroberfläche hat ihre Eigenheiten. Gemeinsam ist, dass es für jede Art Fremdprodukte gibt, welche die Entwicklungszeit verkürzen und die Qualität steigern. Wenn es sich nicht um eine ganz einfache Benutzeroberfläche handelt, sollte ein Fremdprodukt eingesetzt werden. Sonst wird das Rad nochmals erfunden.

Je nach eingesetztem Fremdprodukt drängt sich eine gewisse technische Struktur auf. Es ist wichtig, diese Struktur festzulegen und einzuhalten. Bei einer Webanwendung mit Angular ist eine Unterteilung in Module, Komponenten, Modelle und Services zwingend. Sonst ist der Code schwer verständlich und kaum erweiterbar.

Schnittstelle Programm

Schnittstellen

Folgende Punkte sind zu beachten:

  • Versionierung: Im Lauf der Zeit gibt es Erweiterungen der Schnittstelle. Jede Erweiterung kann zu Inkompatibilitäten bei den Benutzern (meist andere Programme) führen. Ändert die Datenstruktur, weil es z.B. zusätzliche Daten gibt oder bestehende Daten wegfallen, hat das Auswirkungen bei den Benutzern. Deshalb ist eine Versionierung der Schnittstelle wichtig: Mehrere Versionen werden gleichzeitig unterstützt. So entscheiden die Benutzer selber, wann sie die neue Version verwenden. Ohne Versionierung müssen alle Benutzer gleichzeitig wechseln.
  • Robustheit / Fehlertoleranz: Beim Bezug von Daten muss damit gerechnet werden, dass der Inhalt stark variieren kann. Manchmal gibt es Fehler und es werden nicht alle Daten geliefert. Wichtig ist, dass versucht wird, möglichst alle Daten heraus zu bekommen. Fehler sollen möglichst genau dem Benutzer gemeldet und in ein Logfile geschrieben werden.
  • Kapselung: Bei Problemen mit der Schnittstelle darf nicht die gesamte Anwendung betroffen sein (und nicht mehr funktionieren). Die Datenstruktur der Schnittstelle darf z.B. in der Geschäftslogik nicht bekannt sein. Sonst führen Anpassungen in der Datenstruktur auch zu Anpassungen in der Geschäftslogik. Daten und Methoden der Schnittstelle müssen gekapselt sein.

Komplexe Fremdprodukte

Die einfachen Fremdprodukte werden nicht analysiert, weil diese zu wenig wichtig sind.

Wird ein Fremdprodukt an vielen Stellen in der Anwendung eingesetzt, macht eine Kapselung Sinn. Das kann z.B. ein eigenes Modul fürs Lesen und Erstellen von Excel-Files sein. Innerhalb dieses Moduls wird das Fremdprodukt eingesetzt. Anpassungen (z.B. neue Version) beschränken sich nur auf das eine Modul. Das Fremdprodukt kann auf diese Weise einfacher ausgewechselt werden.

Zusammenfassung

Je nach Komplexität der Anwendung dauert die detaillierte Analyse 1-3 Wochen. Das Resultat sind konkrete Aussagen, was gut ist und was verbessert werden soll. Die Verbesserungsvorschläge beinhalten eine grobe Aufwandschätzung. Das ist für die Planung und das weitere Vorgehen wichtig.

Excel-Anwendungen im Unternehmen – Gefahr oder Segen?

Excel bietet mehr als Tabellenkalkulationen: Charts, komplexe Berechnungen oder umfangreiche Formulare sind nur einige Beispiele. Excel ist weit verbreitet und der Quasi-Standard. Es braucht wenig Zeit, um eine Excel-Anwendung zu erstellen.

Neben Excel gibt es die Möglichkeit, massgeschneiderte, firmenspezifische Anwendungen zu entwickeln. Eine solche Anwendung bietet bei gewissen Einsatzgebieten Vorteile. Die Vor- und Nachteile der Ansätze werden gegenübergestellt. Eine Checkliste hilft, die richtige Wahl zu treffen.

 

Excel Anwendung

Checkliste

Die Features beziehen sich auf typische Anwendungen in KMU’s. Die Checkliste ermöglicht eine erste Einschätzung, ob eine Excel-, Desktop oder Webanwendung Sinn macht.

Feature Excel Desktop Webanwendung
Benutzer-führung / Usability Möglich
kann sehr aufwendig sein
Ja
Wizzard: Benutzer füllt Daten in vordefinierter Reihenfolge aus
Navigation: Hilft für  Überblick
Ja
Wizzard: Benutzer füllt Daten in vordefinierter Reihenfolge aus
Navigation: Hilft für  Überblick
Validierung Eingabedaten Möglich

kann sehr aufwendig sein

Ja

Z.B. mit Tooltips, Fehler-meldungen

Ja

Z.B. mit Tooltips, Fehler-meldungen

Benutzer muss jederzeit Zugriff haben Kaum möglich

Zugriff von privat meist unmöglich

Zugriff von mobilen Geräten meist nicht möglich

Kaum möglich

Zugriff von privat meist unmöglich

Zugriff von mobilen Geräten gar nicht möglich

Ja

Zugriff von privat OK

Zugriff von mobilen Geräten OK

Mehrsprachig Kaum möglich

Keine Unterstützung

Ja

Wird von allen gängigen Programmier-sprachen unterstützt

Ja

Wird von allen gängigen Programmier-sprachen unterstützt

Daten von Schnittstellen (extern) holen Kaum möglich Ja

Muss programmiert werden

Ja

Muss programmiert werden

Nachvollzieh-barkeit: Wer hat wann welche Eingaben gemacht Kaum möglich Ja

Muss programmiert werden

Ja

Muss programmiert werden

Integration in Office-Anwendungen Optimal Möglich

Muss programmiert werden

Möglich

Muss programmiert werden

Schutz von Firmen-Wissen Gering

Wer das Excel hat, kennt die Logik

Hoch

Quellcode ist für Aussenstehende nicht verfügbar

Hoch

Quellcode ist für Aussenstehende nicht verfügbar

Modularität: Gleiche Funktionalität nur 1x vorhanden Schwierig

Meist sind die einzelnen Excel-Files isoliert

Möglich

Muss vom Entwickler umgesetzt werden

Möglich

Muss vom Entwickler umgesetzt werden

Immer die neuste Version der Anwendung verwenden Nicht garantiert

Es zirkulieren alte Excel-Sheets

Garantiert.

Benutzer muss Update machen.

Garantiert

Passiert automatisch

Kompatibilität Aufwand gering

Aufwand für verschiedene Excel-Versionen

Aufwand gering

Aufwand für verschiedene Betriebssysteme

Aufwand mittel

Aufwand für verschiedene Browser

Aufwand für erstmalige Entwicklung Gering

Schnelle Fortschritte

Je umfang-reicher desto schwieriger

Mittel

Es braucht Abklärungen bez. Architektur / Struktur

Eher hoch

Es braucht Abklärungen bez. Architektur / Struktur

Hosting

Aufwand für Weiterent-wicklung Mittel

Ab einer gewissen Grösse / Komplexität unübersichtlich

Gering

Voraussetzung: Struktur passt

Gering

Voraussetzung: Struktur passt

Begriffserklärung für diesen Blog

Firmenspezifische Anwendung

Eine Anwendung ist ein Computerprogramm. Eine firmenspezifische Anwendung liefert auf spezifische Anwendungsfälle der Firma eine massgeschneiderte Lösung.

Mit welcher Technologie (Excel, Desktop, Webanwendung) die firmenspezifische Anwendung umgesetzt wird, spielt aus Sicht der Anwender keine Rolle.

Excel-Anwendung

Eine Excel-Anwendung besteht aus einem Excel-File (.xlsx oder .xls). Häufig braucht es Makros, welche mit VBA (Visual Basic for Applications) programmiert werden. Damit die Excel-Anwendung verwendet werden kann, muss Excel auf dem Gerät installiert sein.

Desktop Anwendung

Eine Desktopanwendung wird auf einem bestimmten Gerät (PC, Laptop) installiert. Eine Windows-Anwendung wird typischerweise als Desktopanwendung (exe-File) geliefert und muss vom Benutzer installiert werden.

Webanwendung

Eine Webanwendung braucht keine Installation. Es braucht lediglich einen Browser. Auf Webanwendungen kann auch von mobilen Geräten zugegriffen werden.

Zusammenfassung

Die Checkliste gibt eine erste Einschätzung. Fällt diese klar zugunsten einer Anwendungsart aus, sind keine weiteren Abklärungen nötig. Bei Unsicherheit kann es Sinn machen, zuerst die Excel-Anwendung (als Prototyp) zu erstellen. Zu einem späteren Zeitpunkt kann diese durch eine Desktop- oder Webanwendung ersetzt werden.

Web Frameworks mit JavaScript und HTML5

Kennen Sie Web Frameworks mit JavaScript und HTML5? Sprechen Sie AngularJS, Ionic, jQuery, Kendo UI, MooTools oder Wakanda? Verstehen Sie Foundation, Gumby, Yaml, MontageJS, Bootstrap oder HTML Kickstart? Alles klar oder besteht Erklärungsbedarf? Es handelt sich um JavaScript und/oder HTML5-Frameworks.

Web Frameworks mit JavaScript und HTML5
Bootstrap

Bootstrap

Gut, jetzt sprechen wir Bootstrap. Der Einsatz dieses Frameworks verspricht einiges:

  • Geeignet für alle Personen (Anfänger – Experte)
  • Für alle Web-Anwendungen (von der einfachen statische Seite bis zur komplexen Verknüpfung mehrerer dynamischer Seiten)
  • Ideal für alle möglichen Geräte, insbesondere auch mobile Geräte wie Smartphone und Tablet
  • Diverse vorgefertigte Komponenten – ready to use

Als Anfänger freue ich mich, dass ich dieses Super-Framework einsetzen und so die Produktivität von Anfang an massiv steigern kann. Auf der Einstiegsseite kommen Begriffe wie CSS, Präprozessor, Less, Sass und Plugin vor. Wie war das mit dem Anfänger? Sich nur nicht entmutigen lassen und in die Welt vom Web-Engineering eintauchen!

Mit CSS (Cascading Stylesheet) wird die Darstellung von HTML-Elementen gemacht. Die Grundidee ist die Trennung von Inhalt (HTML) und Gestaltung (CSS). Auf diese Weise können Layout, Farben, Typographie und Animationen definiert werden. Gewisse Attribute können vererbt werden, müssen also nicht jedes Mal neu definiert werden. Ein zentraler Punkt für mobile-fähige Websites: Mit CSS können für verschiedene Ausgabemedien (PC, Smartphone, Tablet) unterschiedliche Darstellungen vorgegeben werden.

CSS3Less ist ein sog. CSS Präprozessor. Dieser bietet zusätzliche Funktionalität wie Variablen. Variablen kenne ich als Programmierer und freunde mich mit CSS immer mehr an. Mit Hilfe von Variablen können Farben, Font Eigenschaften etc. zentral gespeichert werden.

Sass (Software as a service) ist ein allgemeines Konzept bei der Software-Entwicklung. Für meine einfache Webseite brauche ich das zum Glück nicht.

Wie funktioniert es mit dem jQuery Plugin? Was hat jQuery mit Bootstrap zu tun? jQuery ist ein Framework, welches zusammen mit Bootstrap verwendet werden kann. jQuery plugins sind gekapselte Funktionalitäten, welche mit jQuery implementiert sind. Ich bin begeistert: es stehen unzählige Funktionalitäten zur Verfügung, welche ich nicht selber implementieren muss. Eines habe ich schon gelernt: ein neues Framework bedeutet viel Arbeit. Also beschliesse ich, im Moment auf jQuery plugins zu verzichten.

jQuery Carousel
jQuery Carousel

Erste Erfahrungen

Mittlerweile habe ich schon viel Zeit verbracht, um mir diese Informationen zu beschaffen. Geschafft, denke ich und starte voller Elan mit meinem ersten Projekt: Eine einfache statische Webseite, um erste Erfahrungen mit Bootstrap zu sammeln. Ich wollte absichtlich kein bestehendes Beispiel anschauen sondern von Beginn weg etwas selber machen. Schliesslich wollte ich etwas lernen. Gelernt habe ich mehr als ich wollte. Nicht unbedingt gewollt. Der Reihe nach:

  • Der Download der aktuellen Version hat geklappt (kompiliert mit minified CSS, JavaScript und Fonts).
  • Mit welchem Tool erstelle ich die Webseite? Notepad oder eine komfortable IDE? Da ich nicht viel Zeit verlieren wollte, entschied ich mich für Notepad. Was ich erst später bemerkte: eine Validierung der HTML-Tags sowie eine optisch (farbliche) Kennzeichnung ist nicht möglich. Das wäre sehr hilfreich gewesen, besonders als Anfänger.
  • Wie wird Bootstrap eingebunden, wo müssen die Files gespeichert sein? Wie funktioniert es mit relativen Pfaden? Auf Anhieb hat es nicht geklappt.
jQuery UI Bootstrap
jQuery UI Bootstrap

Schlussendlich habe ich es geschafft, eine statische Seite mit Bootstrap zu erstellen. Ohne Framework wäre es wesentlich schneller gegangen. Rückblickend kann ich sagen:

  • Damit ein Framework (ob JavaScript oder HTML) richtig eingesetzt werden kann, sind Grundlagenkenntnisse in JavaScript, HTML5 und CSS nötig.
  • Jedes Framework, das neu eingesetzt wird, erfordert am Anfang (viel) Zeit.
  • Längerfristig lohnt sich der Einsatz eines Frameworks.

Weiterführende Links:

Zutaten beim Online-Marketing

Zutaten

Es gibt verschiedene Zutaten beim Online-Marketing:

  • Zielperson: wer genau wird angesprochen, welche Bedürfnisse hat sie, was sucht sie nicht.
  • Suchmaschinenmarketing: ist der wichtigste Bestandteil und wird detaillierter angeschaut.
  • Website: steht im Zentrum und muss dem Besucher einen Mehrwert liefern.
  • Content: zugeschnitten auf die Zielperson(en) mit ansprechenden Bildern, aktuellem Inhalt und interessanten Videos.
  • E-Mail Marketing: zugeschnitten auf die Zielperson(en) mit spezifischen Informationen.
  • Social Media Instrumente: der Einsatz von Facebook drängt sich auf, weil damit mit potenziellen Kunden interagiert werden kann.

Google Adwords

Das Suchmaschinenmarketing (bei Google) besteht hauptsächlich aus SEO (Search Engine Optimization) und AdWords (bezahlte Werbung). Eine Suche nach „HTML5 Grundlagen“ liefert folgendes Ergebnis:

Google Suche mit AdWords
Google Suche

An erster Stelle kommen AdWords-Resultate, gekennzeichnet durch das gelbe Ad-Symbol. Danach folgen die Ergebnisse gemäss Google-Ranking von SEO. Anhand dieser Resultate sieht man, dass video2brain sowohl bezahlte Werbung schaltet wie auch im Google-Ranking zuoberst erscheint. Braucht es beides oder kann man sich auf eines beschränken?

Search Engine Optimization

Die Mehrheit der Nutzer steht bezahlter Werbung eher skeptisch gegenüber. Daher braucht es SEO auf jeden Fall. Dazu gehören folgende Themen:

  • Onsite Optimierung (Aktivitäten auf der eigenen Website):
  • Sauberen HTML Code ohne Validierungsfehler erstellen
  • Title, Description und Keywords verwenden
  • HTML-Tags verwenden, welche das Ranking verbessern
  • Text auf Keywords optimieren (wichtige Keywords müssen mehrfach vorkommen)
  • Bilder mit Keywords benennen
  • Offsite Optimierung (Links von fremden Websites auf unsere)
  • Social Bookmark Dienste
  • Websites von Freunden und Partnern
  • Anfrage bei themenverwandten Websites
  • Google Tools: Google stellt eine Reihe von Tools und Leitfäden zur Verfügung. Wichtig ist auch, ihre Suchergebnisse zu analysieren.

SEO: Search Engine Optimization

AdWords

Auch wenn nur eine Minderheit der Nutzer die AdWords-Resultate zuerst anwählt, lohnt es sich:

  • AdWords können ganz genau auf die Zielperson(en) abgestimmt werden
  • AdWords können nach Region und Uhrzeit gesteuert werden
  • Kosten fallen nur an, wenn der Nutzer via AdWord auf die Website gelangt (Cost per Click)
  • Kurzfristig einsetzbar, liefern meist nach kurzer Zeit messbare Erfolge

Wie so oft gibt es kein eindeutiges Erfolgsrezept. In den meisten Fällen macht eine Kombination von SEO und AdWords Sinn. Mit AdWords kann das Ranking kurzfristig beeinflusst werden. Mit SEO braucht es deutlich länger.

Weiterführende Links: