Über unsMediaKontaktImpressum
Elena Bochkor & Dr. Veikko Krypczyk 18. Oktober 2022

Business-Web-Applikationen mit .Net-Technologien ohne Blazor

Ein Technology-Stack für Web-Applikationen mit .NET 6 umsetzen

Die Vorteile von Web- gegenüber Desktop-Apps sind klar. Immer mehr Unternehmen setzen ihre Geschäftssoftware als solche um. Zur Ausführung wird lediglich ein Browser benötigt. Die Entwicklung stellt jedoch oft eine Herausforderung dar. Oft sind hunderte Dialoge mit einer großen Zahl von Eingabefeldern zu realisieren. Diese mit HTML und CSS zu gestalten, ist kaum zu schaffen. Auch die Programmlogik mit JavaScript zu implementieren ist mühsam. Ein Entwicklungszyklus, wie mit dem .NET-Framework in einer integrierten IDE beschleunigt die Arbeit. Mit Wisej.NET gibt es eine praxistaugliche Alternative zu Blazor und anderen bekannten Frameworks mit einem Fokus auf die Anforderungen moderner Geschäftsanwendungen.

Die stetige Neu- und Weiterentwicklung von zahlreichen Web-Frameworks zeigt den Bedarf an innovativen und vor allem effizienten Entwicklungszyklen für Web-Applikationen. Es gibt eine große Palette an Technologien, Frameworks und umfangreichen Bibliotheken, deren gemeinsames Ziel es ist, das Vorgehen zu vereinfachen, zu standardisieren und vor allem zu beschleunigen. Ein wichtiges Entscheidungskriterium ist neben den Anforderungen auch die technische Basis bzw. die Kenntnisse des Entwicklungsteams.

Entwicklungsansätze für Web-Applikationen

In diesem Abschnitt betrachten wir aktuelle Ansätze zur Entwicklung von modernen Single-Page-Web-Applikationen. Diese zeichnen sich dadurch aus, dass ein großer Teil der Programmlogik im Browser mittels JavaScript ausgeführt wird. Sie gelten gegenüber den Web-Applikationen, welche ausschließlich serverseitig implementiert sind, als schnell und performant bei Aktionen der Benutzer. Es gibt unterschiedliche Frameworks und Ansätze, wie diese Art von Web-Applikationen umgesetzt werden kann. Eine kompakte Gegenüberstellung ausgewählter und bekannter Frameworks liefern Tabelle 1 (Eigenschaften) und Abb. 1 (Architekturen).

Tabelle 1: Wichtige Eigenschaften ausgewählter Web-Frameworks im Vergleich

KriteriumAngularReactVueBlazorWisej
EntwicklerGoogleFacebookEvan You, CommunityMicrosoftIce Tea Group
SpracheJavaScript/ TypeScriptJavaScript/ TypeScriptJavaScript/ TypeScriptRazor-Syntax und C#C#, VB .NET
ModelVirtual DOMVirtual DOMMVCMVCVirtual DOM
Datenbindungjajajajaja
Komponentenansatzjajajajaja
grafischer Designerneinneinneinneinja
Entwicklungsgeschwindigkeitlangsamnormalschnellnormalschnell (RAD- Ansatz)
für Migration bestehender Anwendungen (Desktop) geeignetneinneinneinneinja
vollständiges Tooling
für App
jaErweiterung um zusätzliche Bibliotheken notwendigErweiterung um zusätzliche Bibliotheken notwendigjaja
leichte Erweiterbarkeitjajajajaja
EntwicklungsumgebungEditor, mit Plugin und weiteren ToolsEditor, mit Plugin und weiteren ToolsEditor, mit Plugin und weiteren Tools

Visual Studio, -Code

Visual Studio

Anhand der Auflistung ist die unterschiedliche Ausrichtung der Frameworks bzw. Bibliotheken zu erkennen. Ihnen gemeinsam ist beispielsweise, dass komponentenbasiert entwickelt wird. Wesentliche Unterschiede sind aus Sicht der Softwareentwicklung die verwendeten Programmiersprachen. Angular, React und Vue basieren im Kern weiterhin auf JavaScript, HTML und CSS. Mit TypeScript als Alternative zu JavaScript können dagegen die Vorteile einer typisierten Programmiersprache genutzt werden. Im Detail unterscheiden sich die Frameworks. Jedes bietet seinen eigenen Ansatz zur Definition der Komponenten, zur Umsetzung des Routings oder zum vorgeschlagenen Aufbau (Architektur) des Projektes. Hier macht Angular dem Entwickler beispielsweise im Sinne eines Frameworks deutlich mehr Vorschriften, während React als Bibliothek einen größeren Freiheitsgrad bietet. Beides hat Vor- und Nachteile. React und Vue stellen auch nur einen bestimmten Teil der benötigten Funktionen für eine Web-Applikation zur Verfügung. Entwickler können und müssen hier weitere Bibliotheken aus dem JavaScript-Ökosystem einbinden. Als Entwicklungsumgebung nutzt man i. d. R. eine Kombination aus einem Quelltexteditor, welcher mittels Plugins an die Spezifika des Frameworks angepasst wird, und der Kommandozeile (CLI), ergänzt um weitere Tools und Libraries beispielsweise für Debugging und Test.

Blazor verwendet dagegen C# als Programmiersprache für die Programmlogik und auf dem Server (Backend) steht das .NET-Framework zur Verfügung. Die Verwendung des .NET-Frameworks bietet einige Vorteile. Es existiert eine sehr große Basis an Klassen für eine große Anzahl an Anforderungen. Ebenso kann Code – zum Beispiel aus vorhandenem Quellcode einer Desktop-Applikation – recycelt (migriert) werden. Entwickler, welche bereits mit .NET-Technologien entwickelt haben, können ihr Wissen weiterverwenden. Programmabläufe sind i. d. R. auch in C# und .NET leichter zu codieren als in JavaScript. Sowohl Blazor als auch Wisej.NET setzen im Backend auf .NET. Es gibt jedoch einen maßgeblichen Unterschied: In Blazor wird für das Erstellen der Benutzeroberfläche die so genannte Razor-Syntax verwendet. Das ist eine Mischung aus HTML und C#. Mit anderen Worten, der HTML-Code kann durch C#-Syntax angereichert und auf diese Weise dynamisiert werden. Die Razor-Syntax muss neu erlernt werden. Lediglich Entwickler, welche mit dem Ansatz ASP .NET gearbeitet hatten, können hier ggf. auf Erfahrungen zurückgreifen. Die Benutzeroberfläche wird in Blazor vollständig im Quellcode entworfen.

Einen grafischen Designer gibt es nicht, d. h. bei komplexen Entwürfen kann dieses durchaus zu Lasten der Effizienz gehen. Typischerweise kommt dabei ersetzend Hot Reload zum Einsatz. Das bedeutet, dass die gestartete App (Browser) und Quellcode (Entwicklungsumgebung) auf dem Bildschirm nebeneinander platziert werden. Änderungen am Quellcode zur Definition der Benutzeroberfläche werden dann ad hoc und ohne einen Neustart der Applikation direkt im Browser dargestellt. In Angular, React, Vue und Blazor kann man statt eines Designers Hot Reload verwenden (Abb. 2).

Einen anderen Ansatz geht Wisej.NET. In Visual Studio wird dazu ein vollständiger grafischer Designer bereitgestellt. Mit dessen Hilfe kann während des Entwurfs der Anwendung die Benutzeroberfläche komplett visuell gestaltet werden. Es gilt das bekannte WYSIWYG-Prinzip, d. h. das Aussehen zur Laufzeit wird sich von der Darstellung zur Entwurfszeit nicht unterscheiden. Über Eigenschaften können die Wisej.NET-Controls konfiguriert werden und über Mechanismen der Datenbindung werden diese an die Programmlogik gebunden. Das Vorgehen ist vielen Entwicklern aus einer Reihe von anderen Rapid-Application-Development-Ansätzen der Softwareentwicklung gut vertraut, beispielsweise Windows Forms für Desktop-Applikationen (Abb. 3).

Während die Entwicklerin bzw. der Entwickler zur Entwurfszeit die Benutzeroberfläche im Designer gestaltet, d. h. die Komponenten aus der Palette auswählt, per Drag-and-drop auf das Formular zieht, über Eigenschaften konfiguriert, die Datenbindung vornimmt und die Programmlogik in C# bzw. VB.NET schreibt, setzt das Framework nach dem Kompilieren des Quelltextes die Single-Page-Web-Applikation eigenständig um. Vom Server wird dazu lediglich HTML, CSS und JavaScript an den Browser übermittelt. Die serverseitigen Komponenten für die Benutzeroberfläche – dargestellt im Designer von Visual Studio – werden dabei durch die JavaScript-Bibliothek qooxdoo eins zu eins im Browser nachgebildet.

Wisej.NET eignet sich gleichermaßen für neue Projekte als auch für umfassende Modernisierungsvorhaben vorhandener Applikationen. Beispielsweise kann eine Windows-Forms-Anwendung mit überschaubarem Aufwand zu einer Web-Applikation migriert werden. Die Basis-Controls von Wisej.NET für die Benutzeroberfläche entsprechen den Standard-Steuerelementen aus Windows Forms. Durch neue Eigenschaften und ein Theming können diese jedoch an die heutigen erweiterten Anforderungen angepasst werden. Ebenso steht eine große Auswahl zusätzlicher Controls zur Verfügung.

Komponentenbasierter und erweiterungsfähiger Ansatz

Alle modernen Web-Frameworks basieren auf einem komponentenbasierten Ansatz. Durch Komponenten kann Funktionalität umfassend wiederverwendet werden. Typischerweise werden Komponenten für den Aufbau der Benutzerschnittstelle eingesetzt. Einfache Komponenten sind beispielsweise ein Button oder ein Label und diese kommen in nahezu jeder Anwendung vor. Komplexere Komponenten kapseln umfassendere Funktionen. Komponenten stammen dabei aus unterschiedlichen Quellen:

  • Basis-Komponenten: Werden i. d. R. durch das Framework bereitgestellt und bieten den Einstieg für die Entwicklung der Web-Applikation. In einer Blazor-Applikation sind es beispielsweise die Layout-Komponenten für den Aufbau der Anwendung oder in Wisej.NET sind es Eingabekomponenten wie eine TextBox oder eine Auswahlbox.
  • Komponenten von Drittanbietern: Diese erweitern die Palette um häufig genutzte Komponenten, beispielsweise ein Chart-Control oder ein Dashboard. Sie sind meist kostenpflichtig zu lizenzieren.
  • Eigene Komponenten: Entwickler haben die Möglichkeit, entwickelte Funktionalität in Form einer universell nutzbaren Komponente zusammenzustellen und für die Verwendung in der gleichen App an anderer Stelle oder für andere Anwendungen einzusetzen.

In Wisej.NET werden die Komponenten in der Toolbox angezeigt und können mittels Drag-and-drop auf dem Formular im Designer platziert und konfiguriert werden. Es werden bereits eine große Anzahl von Komponenten bereitgestellt, welche viele typische Anforderungen von Business-Anwendungen abdecken. Die Komponentenpalette kann erweitert werden, beispielsweise um die leistungsfähigen JavaScript-Komponenten von Telerik, Syncfusion und weiterer Hersteller. Auf diese Weise können umfassendere Anforderungen an die Benutzerschnittstelle in Fragen der Funktion und des Designs abgedeckt werden.

Praxisanforderungen

Business-Web-Applikationen stellen einige typische Anforderungen an die Entwicklung:

  • Komplexe grafische Oberflächen: In Geschäftsanwendungen muss häufig eine große Anzahl von Daten erfasst werden. Digitalisierte Formulare sind für die Abwicklung und Verarbeitung von Geschäftsprozessen notwendig. Dazu sind umfangreiche Dialogfelder zu erstellen.
  • Hohe User Experience: Geschäftsanwendungen müssen in Fragen des Designs und der Bedienung in allen Belangen modern und ansprechend gestaltet werden. Das betrifft das Layout, die Interaktionsmöglichkeiten der Nutzerinnen und Nutzer und die farbliche Gestaltung, beispielsweise passend zu den Unternehmensvorgaben.
  • Responsive Darstellung: Die Applikation muss eine korrekte Darstellung auf Geräten mit unterschiedlichen Bildschirmgrößen und -auflösungen ermöglichen, d. h. die Ausführung auf Desktop und Mobile darf kein Problem darstellen.
  • Komplexe Businesslogik: Die Anforderungen aus der Geschäftslogik sollten sich einfach umsetzen lassen, d. h. für die Realisierung komplexer Algorithmen beispielsweise aus den Bereichen der Finanzmathematik oder Statistik sollten leistungsfähige Bibliotheken bereitstehen.
  • Effiziente Umsetzung: Hier gilt die einfache Aussage: "Zeit ist Geld", d. h. durch einen effizienten Entwicklungszyklus kann die Time to Market reduziert und Wettbewerbsvorteile erreicht werden.
  • Datenbanken: Das System muss mit den unterschiedlichsten Datenhaltungssystemen, welche i. d. R. schon vorhanden sind, umgehen können.
  • Bereitstellung: Die universelle Nutzbarkeit einer Web-Applikation mittels eines Browsers sollte durch eine schnelle Bereitstellung, zum Beispiel über Cloud-Services, unterstützt werden.

Ein Großteil dieser genannten Anforderungen kann durch Rückgriff auf das .NET-Framework erfüllt werden. Für die Implementierung der Geschäftslogik, der Anbindung von Datenbanken und für die Umsetzung eines etablierten Entwicklungszyklus stehen im .NET-Framework erprobte Lösungen bereit, welche nun auch dank Wisej.NET bzw. Blazor für Web-Applikationen genutzt werden können. Wisej.NET ist darüber hinaus durch die Verwendung des WYSIWYG-Designers und der Integration in Visual Studio auch in den anderen Fragen auf die genannten Anforderungen einer Business-Applikation zugeschnitten. Beispielsweise wird das direkte Deployment aus Visual Studio auf einem Cloud-Dienst wie Azure zur unmittelbaren Bereitstellung der Applikation unterstützt. Updates können daher ohne Verzögerungen an die Anwenderinnen und Anwender weitergegeben werden (Continuous Deployment).

Praxistauglichkeit

Die Eignung eines komplexen Entwicklungsansatzes zeigt sich durch die erfolgreiche Verwendung in Praxisprojekten, insbesondere wenn diese eine bestimmte Größe und Komplexität erreicht haben. Ein gutes Beispiel ist die Lösung zur Digitalisierung von Geschäftsprozessen namens HALO (Hartmans Advanced Logistics Orderung) (Abb. 5).

Es geht um eine Anwendung für Bestell- und Auftragsprozesse im Medizinbereich eines führenden Anbieters von Produkten aus dem Medizinbereich für die Wundversorgung, Inkontinenz, Desinfektion und chirurgische Eingriffe. Das Unternehmen ist in über 30 Ländern präsent und beschäftigt mehr als 10.000 Mitarbeiter. Die Berücksichtigung von speziellen branchenspezifischen Anforderungen stand bei der Entwicklung im Vordergrund. Auch Zuverlässigkeit und Sicherheit waren von höchster Priorität. Es hat mit relativ wenig Zeitaufwand geklappt, eine in allen Browsern lauffähige Anwendung zu erstellen. Dazu wurde das Framework Wisej.NET verwendet. Die vorhandene Geschäftslogik und Systemschnittstellen auf Basis von .NET konnten dabei genutzt werden. Die erstellte Anwendung trägt dazu bei, die Bestell-, Genehmigungs- und Abwicklungsprozesse im Bereich des Gesundheitswesens zu vereinfachen. HALO implementiert Funktionen, welche für Online-Bestellsysteme üblich sind, z. B. Produktsuche, Warenkorbverwaltung oder die Möglichkeit, administrative Genehmigungsvorgänge zu integrieren. Die Anwendung ist ein wichtiger Bestandteil der laufenden digitalen Transformation. Vor der technischen Umsetzung wurden einige Alternativen abgewogen und man hat sich für Wisej.NET entschieden. Besonders schätzenswert war die Nutzung des grafischen Designers für die Erstellung der Benutzeroberfläche mit einer pixelgenauen Kontrolle über das Layout, eine umfangreiche Toolbox an grafischen Controls und ein flexibles visuelles Themensystem für eine passende Auswahl des Designs.

Fazit

Web-Applikationen können und müssen ebenso effizient realisiert werden, wie man es von RAD-Tools für andere Anwendungsarten kennt. Mit der Nutzung des .NET-Frameworks hat man einen leistungsfähigen technischen Hintergrund. Ergänzt um einen grafischen Designer und mit der Nutzung einer integrierten Entwicklungsumgebung wie Visual Studio entsteht ein effizient nutzbarer Technology-Stack. Die gesamte Web-Applikation kann dabei mittels C# (VB.NET) statt aufwändig mit HTML, CSS und JavaScript erstellt werden.

Quellen

Autor:innen

Elena Bochkor

Elena Bochkor ist studierte Wirtschaftsinformatikerin. Sie setzt sich u.a. mit Fragen der digitalen Transformation, des Mobile Computings und weiteren Zukunftsthemen auseinander.
>> Weiterlesen

Dr. Veikko Krypczyk

Dr. Veikko Krypczyk arbeitet u. a. als Softwareentwickler, Fachautor und Dozent. Über die Firma LARInet gibt er darüber hinaus sein Wissen in Schulungen zu aktuellen Fragestellungen der IT weiter.
>> Weiterlesen
Das könnte Sie auch interessieren
Kommentare (0)

Neuen Kommentar schreiben