Die erste Website der Welt wurde am 20. Dezember 1990 von Tim Berners-Lee unter der Adresse http://info.cern.ch/hypertext/WWW/TheProject.html publiziert1. Seit diesem Zeitpunkt steigt das Angebot sowie die Nachfrage an weiteren Möglichkeiten der Umsetzung von Softwareprojekten im Web. Immer mehr Technologien entstehen zielgerichtet mit dem Einsatzgebiet WEB oder werden um Bibliotheken oder ganze Frameworks für diesen Einsatz erweitert.
Viele Unternehmen wie bspw. Microsoft oder Google unterstützen diesen Fortschritt und stellen eigene Softwaretechnologien bereit, welche von Entwicklern genutzt werden können.
Lesen Sie mehr über Webentwicklung und den Vergleich von Technologien wie Blazor Server, Blazor WebAssembly und PHP.
Inhaltsverzeichnis
Abbildungsverzeichnis
Tabellenverzeichnis
1 Einleitung
1.1 Relevanz und Problemstellung
1.2 Ziel und Aufbau der Arbeit
2 Blazor Grundlagen & Architekturansätze
2.1 Blazor Server
2.2 Blazor WebAssembly
3 Evaluierung des Frameworks Blazor
3.1 Blazor vs. PHP
3.2 Blazor Server vs. Blazor WebAssembly
3.3 Blazor und RDBMS
4 Webprojekt
4.1 Analyse
4.2 Design
4.2.1 Anwendungsarchitektur
4.2.2 Technologie-Stack
4.2.3 Website-Layout
4.2.4 Datenbankmodell
4.2.5 Designrichtlinien
4.3 Implementierung
4.4 Test
4.4.1 Unit-Tests
4.4.2 Systemtest
5 Zusammenfassung und kritische Reflexion
5.1 Zusammenfassung
5.2 Kritische Reflexion
Literaturverzeichnis
Abbildungsverzeichnis
Abbildung 1: Blazor-Server Architekturmodell, Quelle: entwickler, Der erste Blazor-Streich, Internetquelle
Abbildung 2: Blazor WebAssembly Architekturmodell, Quelle: entwickler, Der erste Blazor- Streich, Internetquelle
Abbildung 3: Anwendungsarchitektur
Abbildung 4: Redaktioneller Entwurf des Website-Layouts
Abbildung 5: Datenbankmodelle (users, blogposts, images, tags)
Abbildung 6: Projektstruktur
Abbildung 7: Systemtestszenario - Suchfunktion mit Ergebnis
Abbildung 8: Systemtestszenario - Suchfunktion ohne Ergebnis
Tabellenverzeichnis
Tabelle 1: Blazor vs. PHP 5
Tabelle 2: User-Stories 9
Tabelle 3: Technologie-Stack 10
Tabelle 4: Verwendete Farbtöne 12
Tabelle 5: Test-Explorer mit Unit-Tests
Schreibweise
In dieser Arbeit sind zur besseren Übersicht Variablen- und Methodennamen, sowie Codeausschnitte in der Schriftart Courier New dargestellt.
1 Einleitung
Die erste Website der Welt wurde am 20. Dezember 1990 von Tim Berners-Lee unter der Adresse http://info.cern.ch/hypertext/WWW/TheProject.html publiziert1. Seit diesem Zeitpunkt steigt das Angebot sowie die Nachfrage an weiteren Möglichkeiten der Umsetzung von Softwareprojekten im Web. Immer mehr Technologien entstehen zielgerichtet mit dem Einsatzgebiet WEB oder werden um Bibliotheken oder ganze Frameworks für diesen Einsatz erweitert.
Viele Unternehmen wie bspw. Microsoft oder Google unterstützen diesen Fortschritt und stellen eigene Softwaretechnologien bereit, welche von Entwicklern genutzt werden können.
1.1 Relevanz und Problemstellung
Durch das stetig steigende Angebot an Technologien und die Weiterentwicklung dessen, wird die Anzahl an Realisierungsmöglichkeiten immer größer. Relevant ist hierbei nicht nur die Ersparnis der Entwicklungszeit, welche durch einfachere Handhabung oder sogenannten Built-in Funktionen2 verkürzt wird, auch die Möglichkeiten für Entwickler, welche bisher nicht auf den WEB-Bereich spezialisiert waren, steigt dank der Verwendung von bereits bekannten Technologien.
Als zentrale Problemstellung der vorliegenden Arbeit gilt es einen Onlineblog mit dem .NET Framework Blazor zu realisieren. Hierfür muss die Verwendung des geeigneten Blazor Architekturmodells, WebAssembly vs. Blazor Server, evaluiert und dokumentiert werden. Zudem gilt es, die Webanwendung mit einem RDBMS zu verbinden und die Einträge sowie Benutzer des Blogs sinnvoll zu persistieren.
1.2 Ziel und Aufbau der Arbeit
Ziel der Arbeit soll es sein, die geforderte Aufgabe "digitaler Blog" im Zusammenspiel mit der Evaluierung und Verwendung der Blazor Technologie als Gegenspieler zu PHP als serverseitige Skriptsprache umzusetzen. Zudem soll die Webanwendung datenbankbasiert erstellt werden und die Entwicklung mit dem RDBMS dokumentiert werden. Die gesamte Entwicklung orientiert sich hierbei am Wasserfallmodell und soll dementsprechend dokumentiert werden.
Der Aufbau der Arbeit gliedert sich in die folgenden Kapitel. Kapitel 2 klärt die Grundlagen zu Blazor im Allgemeinen und den Architekturmodellen - Blazor Server und Blazor Assembly. In Kapitel 3 wird das Framework Blazor im Kontext der Aufgabenstellung evaluiert. Hierfür soll zu Beginn eine Gegenüberstellung von Blazor und PHP skizziert werden. Anschließend erfolgt die Gegenüberstellung und Auswahl der passenden Blazor-Architektur. Abschließend in Kapitel 3 wird die Verwendung eines RDBMS im Zusammenspiel mit Blazor erläutert. Kapitel 4 dokumentiert die Entwicklung des Projektes in einer leicht abgeänderten Form des Wasserfallmodells. Abschließend erfolgt die Zusammenfassung der gewonnenen Erkenntnisse und eine kritische Reflexion der Arbeit.
2 Blazor Grundlagen & Architekturansätze
Bevor die Grundlagen von Blazor im Folgenden erläutert werden, soll eine kleine Definition des Begriffs WebAssembly erfolgen. Bei diesem Begriff handelt sich um Bytecodeformat, welches für ein schnelles Downloaden und maximale Ausführungsgeschwindigkeit im Browser optimiert ist. WebAssembly ist ein offener Webstandard, der in Webbrowsern ohne Plug-Ins unterstützt wird.
Im März 2018 stellte Microsoft Blazor auf Basis von WebAssembly im Webbrowser vor. Hierbei läuft C#-Code und .NET Assemblies direkt im Browser. Ein halbes Jahr später präsentierte Microsoft Server-side Blazor, welches den gleichen Programmcode auch auf dem Webserver ausführen konnte3. Blazor bündelt beide Architekturmodelle als Framework und stellt so beide Varianten zu Verfügung. Zur besseren Abgrenzung bezeichnet Microsoft das ursprüngliche WebAssembly-basierte Architekturmodell als Client-side Blazor. In den folgenden Unterkapiteln sollen diese beiden Ansätze mit Architekturabbildungen etwas genauer erläutert werden.
2.1 Blazor Server
In den Grundlagen als Server-side Blazor bezeichnet, publizierte Microsoft Mitte 2019 den einheitlichen Namen Blazor Server. Dies bedarf an dieser Stelle eine Erklärung, da Blazor Server nicht wie die klassischen Server-side Rendering Frameworks wie z.B. ASP.NET MVC, ASP.NET Razor Pages oder auch PHP funktioniert. Es macht keine vollständigen Seitenrundgänge, sondern erstellt vielmehr eine Single Page Application. In der folgenden Abbildung lässt sich die Architektur und Funktionsweise gut erläutern.
Abbildung in dieser Leseprobe nicht enthalten
Abbildung 1: Blazor-Server Architekturmodell, Quelle: entwickler, Der erste Blazor-Streich, Internetquelle
Serverseitig läuft eine Razor Component, welche neben dem Razor-Template (HTML-Tags mit eingestreutem C#) auch eine Code-behind-Datei (in C#) umfassen kann. Zusätzlich kann auf dem Webserver auf die .NET Core-API zugegriffen werde. Beim ersten Aufruf der Seite wird einmalig die komplette Webseite zum Browser versendet. Hinzu kommt noch die JavaScript-Bibliothek blazor.server.js von Microsoft. Blazor merkt sich nun die gesendete HTML in Form eines virtuellen Abbilds. Dieses Abbild wird nun auf der Serverseite dafür verwendet, um jegliche Änderungen am Document Object Model (DOM) festzustellen und nur diese an den Webbrowser zu übertragen. Die versendete blazor.server.js Datei ist nun clientseitig für die Umsetzung der Änderungsmitteilungen zuständig und aktualisiert das echte DOM. Zudem hat es die Aufgabe, Interaktionen des Benutzers mit dem Browser an den Webserver zu übertragen und dort die Ereignisse in der Razor Component zu erzeugen. Anschließend werden die DOM-Änderungen wieder an den Client übertragen. Für die Verbindung zwischen Webbrowser und Webserver verwendet Blazor das von Microsoft definierte Format ASP.NET Core SignalR über eine WebSocket-Verbindung. Das Protokoll wird als BlazorPack bezeichnet.4
2.2 Blazor WebAssembly
Anfänglich noch mit Client-side Blazor bezeichnet, wurde hierbei ebenfalls von Microsoft der Name in Blazor WebAssembly umbenannt. Die Architektur unterscheidet sich deutlich von der Blazor Server Variante und soll aus diesem Grund nachfolgend veranschaulicht und erläutert werden.
Abbildung in dieser Leseprobe nicht enthalten
Abbildung 2: Blazor WebAssembly Architekturmodell, Quelle: entwickler, Der erste Blazor-Streich, Internetquelle
Blazor WebAssembly wird auf der Clientseite in einer auf WebAssembly basierenden .NETRuntime ausgeführt. Die Blazor-App, .NET-Runtime und die jeweiligen Abhängigkeiten werden im Browser heruntergeladen, wodurch die Applikation somit direkt im UI-Thread des Browsers ausgeführt werden kann5. Bei diesem Ansatz ist die Verwendung einer JavaScript Bibliothek notwendig. Die blazor.webassembly.js übernimmt wieder die Synchronisation zwischen virtuellen und tatsächlichen DOM. Daten, welche in der Anwendung angezeigt werden sollen, jedoch in einer Datenbank gespeichert sind, werden mittels HTTP von der REST WebAPI angefordert.
3 Evaluierung des Frameworks Blazor
Um für die Umsetzung der Webanwendung den richtigen Ansatz zu verwenden, soll dies nachfolgend anhand unterschiedlicher Kriterien bewertet, kommentiert und ausgewählt werden. Vorab soll noch das Framework Blazor und die Scriptsprache PHP gegenübergestellt werden.
3.1 Blazor vs. PHP
Da Blazor als Framework und PHP als serverseitige Scriptsprache nicht direkt miteinander verglichen werden können, soll der Vergleich nachfolgend auf Applikationsebene geschehen.
Wie bereits in Kapitel 2 angeschnitten, geschieht das Rendering einer PHP-Anwendung auf dem Server. Hierbei wird immer die komplette neue Seite an den Browser versendet. Die Kommunikation ist hierbei üblicherweise mittels HTTP-Protokoll. Im Gegensatz hierzu steht das ASP.NET Core Framework Blazor, welches anhand der zwei Modelle in Kapitel 2 erläutert wurde. Die folgende Tabelle soll verschiedene Eigenschaften der Technologien skizzieren.
Abbildung in dieser Leseprobe nicht enthalten
Tabelle 1: Blazor vs. PHP
Aus der obenstehenden Tabelle ist schnell ersichtlich, dass die meisten Eigenschaften nicht mit fixen Werten ausgewiesen werden, sondern immer an bestimmte Abhängigkeiten geknüpft sind. So hat bspw. die WebAssembly Version von Blazor eine sehr hohe initiale Ladezeit, kann anschließend allerdings ohne Kommunikation zum Server, durch Interaktionen mit dem Benutzer, Aktionen auslösen und den DOM verändern.
Es ist also immer anhand der Anforderungen und den Rahmenbedingungen zu prüfen, welche Technologie sich besser für die Implementierung eignet.
3.2 Blazor Server vs. Blazor WebAssembly
Für den Vergleich der beiden Ansätze müssen zuerst Kriterien spezifiziert werden, welche für eine Bewertung im Projektkontext sinnvoll sind. Hierbei ist auch der Entwicklungsaufwand zu betrachten. Nachfolgend sollen diese Kriterien aufgeführt, erläutert und die beiden Architekturansätze kurz verglichen werden.
Entwicklungsaufwand
Da der Umfang des Assignment begrenzt ist und die Entwicklungszeit im Idealfall immer so gering wie möglich gehalten werden sollte, muss auch die Komplexität sowie der Entwicklungskomfort bewertet werden.
Blazor Server bietet im Gegensatz zu WebAssembly einen hohen Entwicklungskomfort dank integriertem Debugging in der Entwicklungsumgebung und Verwendung von Tools bei Bedarf. Die Komplexität ist bei den beiden Architekturansätzen nur schwer zu vergleichen, da dank gleichem Framework, die Komponenten in beiden Varianten genutzt werden können.
Ladezeit
Die Ladezeit ist besonders für den Benutzer und somit für den Erfolg des Projekts von hoher Wichtigkeit. Kein Benutzer wartet gerne lange auf die Antwort nach einer Interaktion mit der Benutzeroberfläche.
Durch serverseitiges Rendern und lediglich einmaliges versenden der gesamten HTML-Datei, kann bei diesem Aspekt Blazor Server punkten. Blazor WebAssembly benötigt nämlich beim ersten Aufruf eine unverhältnismäßig lange Ladezeit, da erst App, Abhängigkeiten und Laufzeitumgebung heruntergeladen werden müssen. Im Kontext des Onlineblogs, welcher von vielen Benutzer nur einmalig aufgerufen wird und anschließend lesend konsumiert wird, fällt die initiale Ladezeit des WebAssembly stark ins Gewicht.
Offline-Fähigkeit
Die Offline-Fähigkeit ist zwar kein Erfolgskriterium, da die Anwendung ohne Verbindung zur Datenbank wenig Sinn macht, soll jedoch aus Gründen der entstehenden Seiteneffekte trotzdem aufgeführt werden.
Blazor WebAssembly bietet eine Offline-Fähigkeit, ermöglicht jedoch durch das Downloaden der App den Zugang zum Code beim Client. Dies fordert bei vergleichsweiser Entwicklung mittels Blazor Server einen erhöhten Sicherheitsstandard. An dieser Stelle punktet der Serveransatz, da hier der Code privat und geschützt auf dem Server bleibt.
[...]
1 Vgl. Deutschland, Die erste Website der Welt, Internetquelle
2 Funktionen die in der Technologie ohne explizite Programmierung verwendbar sind.
3 Vgl. entwickler, Der erste Blazor-Streich, Internetquelle
4 Vgl. entwickler, Der erste Blazor-Streich, Internetquelle
5 Vgl. Microsoft, Blazor-Hostingmodelle in ASP.NET Core, Internetquelle
- Quote paper
- Nick Wahrenberger (Author), 2022, Webentwicklung Online Blog, Munich, GRIN Verlag, https://www.hausarbeiten.de/document/1362534
