Freigeben über

Gängige clientseitige Webtechnologien

Tipp

Dieser Inhalt ist ein Auszug aus dem eBook, Architect Modern Web Applications mit ASP.NET Core und Azure, verfügbar auf .NET Docs oder als kostenloses herunterladbares PDF, das offline gelesen werden kann.

PDF herunterladen

Miniaturansicht des E-Books „Architect Modern Web Applications with ASP.NET Core and Azure“.

"Websites sollten von innen und außen gut aussehen." - Paul Cookson

ASP.NET Kernanwendungen sind Webanwendungen und basieren in der Regel auf clientseitigen Webtechnologien wie HTML, CSS und JavaScript. Durch das Trennen des Inhalts der Seite (html) von ihrem Layout und Stil (css) und seinem Verhalten (über JavaScript) können komplexe Web-Apps das Prinzip "Trennung von Bedenken" nutzen. Zukünftige Änderungen der Struktur, des Entwurfs oder des Verhaltens der Anwendung können einfacher gemacht werden, wenn diese Bedenken nicht miteinander verknüpft sind.

Während HTML und CSS relativ stabil sind, entwickelt sich JavaScript mithilfe der Anwendungsframeworks und Hilfsprogramme, mit denen Entwickler webbasierte Anwendungen erstellen können, mit unterbrechungsfreier Geschwindigkeit. In diesem Kapitel werden einige Möglichkeiten erläutert, wie JavaScript von Webentwicklern verwendet wird, und bietet eine allgemeine Übersicht über die clientseitigen Angular- und React-Bibliotheken.

Hinweis

Blazor bietet eine Alternative zu JavaScript-Frameworks zum Erstellen von umfangreichen, interaktiven Clientbenutzeroberflächen.

HTML

HTML ist die Standardmarkupsprache zum Erstellen von Webseiten und Webanwendungen. Seine Elemente bilden die Bausteine von Seiten, die formatierten Text, Bilder, Formulareingaben und andere Strukturen darstellen. Wenn ein Browser eine Anforderung an eine URL sendet, unabhängig davon, ob eine Seite oder eine Anwendung abgerufen wird, handelt es sich beim ersten Zurückgegebenen um ein HTML-Dokument. Dieses HTML-Dokument kann auf das Aussehen und das Layout in Form von CSS oder auf das Verhalten in Form von JavaScript verweisen oder zusätzliche Informationen dazu enthalten.

CSS

CSS (Cascading StyleSheets) wird verwendet, um das Aussehen und Layout von HTML-Elementen zu steuern. CSS-Formatvorlagen können direkt auf ein HTML-Element angewendet werden, separat auf derselben Seite definiert oder in einer separaten Datei definiert und von der Seite referenziert werden. Stile kaskadieren je nachdem, wie sie verwendet werden, um ein bestimmtes HTML-Element auszuwählen. Ein Format kann z.B. für ein ganzes Dokument gelten, kann aber von einem Format überschrieben werden, das für ein bestimmtes Element gilt. Ebenso wird ein elementspezifisches Format von einem Format überschrieben, das für eine CSS-Klasse gilt, die auf das Element angewendet wurde. Dieses Format wird wiederum von einem Format überschrieben, das auf eine bestimmte Instanz dieses Elements angewendet wird (über dessen ID). Abbildung 6-1

CSS-Spezifitätsregeln

Abbildung 6-1. CSS-Spezifitätsregeln in der Reihenfolge.

Es ist am besten, Formatvorlagen in ihren eigenen separaten Stylesheetdateien beizubehalten und auswahlbasierte Cascading zu verwenden, um konsistente und wiederverwendbare Formatvorlagen in der Anwendung zu implementieren. Das Platzieren von Stilregeln in HTML sollte vermieden werden, und das Anwenden von Formatvorlagen auf bestimmte einzelne Elemente (anstelle von ganzen Klassen von Elementen oder Elementen, auf die eine bestimmte CSS-Klasse angewendet wurde) sollte die Ausnahme sein, nicht die Regel.

CSS-Präprozessoren

CSS-Stylesheets bieten keine Unterstützung für bedingte Logik, Variablen und andere Programmiersprachenfeatures. Daher enthalten große Stylesheets häufig eine ziemliche Wiederholung, da dieselbe Farbe, Schriftart oder andere Einstellung auf viele verschiedene Variationen von HTML-Elementen und CSS-Klassen angewendet wird. CSS-Präprozessoren können Ihren Stylesheets dabei helfen, dem DRY-Prinzip zu folgen, indem Unterstützung für Variablen und Logik hinzugefügt wird.

Die beliebtesten CSS-Präprozessoren sind Sass und LESS. Beide erweitern CSS und sind damit abwärtskompatibel, was bedeutet, dass eine normale CSS-Datei eine gültige Sass- oder LESS-Datei ist. Sass ist Ruby-basiert und LESS ist JavaScript-basiert und beide werden in der Regel als Teil Ihres lokalen Entwicklungsprozesses ausgeführt. Beide verfügen über verfügbare Befehlszeilentools sowie über eine integrierte Unterstützung in Visual Studio, um sie mit Gulp- oder Grunt-Aufgaben auszuführen.

JavaScript

JavaScript ist eine dynamische, interpretierte Programmiersprache, die in der ECMAScript-Sprachspezifikation standardisiert wurde. Es ist die Programmiersprache des Webs. Wie CSS kann JavaScript als Attribute innerhalb von HTML-Elementen, als Skriptblöcke innerhalb einer Seite oder in separaten Dateien definiert werden. Genau wie CSS empfiehlt es sich, JavaScript in separate Dateien zu organisieren und so weit wie möglich vom HTML-Code zu trennen, der auf einzelnen Webseiten oder Anwendungsansichten zu finden ist.

Beim Arbeiten mit JavaScript in Ihrer Webanwendung gibt es einige Aufgaben, die Sie häufig ausführen müssen:

  • Auswählen eines HTML-Elements und Abrufen und/oder Aktualisieren des Werts.

  • Abfragen einer Web-API für Daten.

  • Senden eines Befehls an eine Web-API (und Reagieren auf einen Rückruf mit dem Ergebnis).

  • Sie müssen eine Validierung durchführen.

Sie können alle diese Aufgaben allein mit JavaScript ausführen, aber viele Bibliotheken sind vorhanden, um diese Aufgaben zu vereinfachen. Eine der ersten und erfolgreichsten dieser Bibliotheken ist jQuery, die weiterhin eine beliebte Wahl zur Vereinfachung dieser Aufgaben auf Webseiten ist. Für Single Page Applications (SPAs) bietet jQuery nicht viele der gewünschten Features, die Angular und React anbieten.

Ältere Web-Apps mit jQuery

Obwohl jQuery nach Maßstäben moderner JavaScript-Frameworks als veraltet gilt, bleibt es eine oft genutzte Bibliothek für die Arbeit mit HTML/CSS und das Erstellen von Anwendungen, die AJAX-Anfragen an Web-APIs senden. jQuery wird jedoch auf der Ebene des Browserdokumentobjektmodells (DOM) ausgeführt und bietet standardmäßig nur ein imperatives, nicht deklaratives Modell.

Angenommen, wenn der Wert eines Textfelds 10 überschreitet, sollte ein Element auf der Seite sichtbar gemacht werden. In jQuery würde diese Funktionalität in der Regel durch Schreiben eines Ereignishandlers mit Code implementiert, der den Wert des Textfelds überprüft und die Sichtbarkeit des Zielelements basierend auf diesem Wert festgelegt. Dieser Prozess ist ein imperativer, codebasierter Ansatz. Ein anderes Framework kann stattdessen databinding verwenden, um die Sichtbarkeit des Elements deklarativ an den Wert des Textfelds zu binden. Bei diesem Ansatz wäre kein Code schreiben erforderlich, sondern stattdessen nur das Dekorieren der Elemente, die mit Datenbindungsattributen verbunden sind. Da clientseitige Verhaltensweisen komplexer werden, führen Datenbindungsansätze häufig zu einfacheren Lösungen mit weniger Code und bedingter Komplexität.

jQuery vs a SPA Framework

Faktor jQuery Eckig
Abstrahiert das DOM Ja Ja
AJAX-Unterstützung Ja Ja
Deklarative Datenbindung Nein Ja
Routing im MVC-Stil Nein Ja
Anwenden von Vorlagen Nein Ja
Deep-Link-Routing Nein Ja

Die meisten Features von jQuery fehlen systemintern, können mit dem Hinzufügen anderer Bibliotheken hinzugefügt werden. Ein SPA-Framework wie Angular bietet diese Features jedoch auf integrierte Weise, da es von Anfang an unter Berücksichtigung all dieser Merkmale entworfen wurde. Außerdem ist jQuery eine imperative Bibliothek, was bedeutet, dass Sie jQuery-Funktionen aufrufen müssen, um alles mit jQuery zu erledigen. Viele der von SPA-Frameworks bereitgestellten Aufgaben und Funktionen können deklarativ ausgeführt werden, sodass kein tatsächlicher Code geschrieben werden muss.

Die Datenbindung ist ein hervorragendes Beispiel für diese Funktionalität. In jQuery benötigt es in der Regel nur eine Codezeile, um den Wert eines DOM-Elements abzurufen oder den Wert eines Elements festzulegen. Sie müssen diesen Code jedoch jederzeit schreiben, wenn Sie den Wert des Elements ändern müssen, und manchmal tritt dies in mehreren Funktionen auf einer Seite auf. Ein weiteres gängiges Beispiel ist die Elementsichtbarkeit. In jQuery gibt es möglicherweise viele verschiedene Stellen, an denen Sie Code schreiben würden, um zu steuern, ob bestimmte Elemente sichtbar waren. In jedem dieser Fälle müsste bei Verwendung der Datenbindung kein Code geschrieben werden. Sie würden einfach den Wert oder die Sichtbarkeit der betreffenden Elemente an ein Ansichtsmodell auf der Seite binden, und Änderungen an diesem Ansichtsmodell würden sich automatisch in den gebundenen Elementen widerspiegeln.

Angular-SPAs

Angular bleibt eines der beliebtesten JavaScript-Frameworks der Welt. Seit Angular 2 hat das Team das Framework von Grund auf neu aufgebaut (mit TypeScript) und von dem ursprünglichen AngularJS-Namen in Angular umgebrandet. Seit mehreren Jahren ist das neu gestaltete Angular weiterhin ein robustes Framework zum Erstellen von Single Page Applications.

Angular-Anwendungen werden aus Komponenten erstellt. Komponenten kombinieren HTML-Vorlagen mit speziellen Objekten und steuern einen Teil der Seite. Hier sehen Sie eine einfache Komponente aus angular-Dokumenten:

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `<h1>Hello {{name}}</h1>`
})

export class AppComponent { name = 'Angular'; }

Komponenten werden mithilfe der @Component Dekorierfunktion definiert, die Metadaten zur Komponente einnimmt. Die Selektoreigenschaft identifiziert die ID des Elements auf der Seite, auf der diese Komponente angezeigt wird. Die Vorlageneigenschaft ist eine einfache HTML-Vorlage, die einen Platzhalter enthält, der der Namenseigenschaft der Komponente entspricht, die in der letzten Zeile definiert ist.

Durch das Arbeiten mit Komponenten und Vorlagen können Angular-Apps anstelle von DOM-Elementen auf einer höheren Abstraktionsebene und mit weniger allgemeinem Code als Apps arbeiten, die nur mit JavaScript (auch als "vanilla JS" bezeichnet) oder mit jQuery geschrieben wurden. Angular erzwingt auch eine Gewisse Reihenfolge, wie Sie Ihre clientseitigen Skriptdateien organisieren. Standardmäßig verwenden Angular-Apps eine allgemeine Ordnerstruktur mit Modul- und Komponentenskriptdateien, die sich in einem App-Ordner befinden. Angular-Skripts, die sich mit dem Erstellen, Bereitstellen und Testen der App befassen, befinden sich in der Regel in einem Ordner auf höherer Ebene.

Sie können Angular-Apps mithilfe einer CLI entwickeln. Die ersten Schritte mit der Angular-Entwicklung (vorausgesetzt, Sie haben bereits Git und npm installiert) bestehen darin, einfach ein Repository von GitHub zu klonen und npm install sowie npm start auszuführen. Darüber hinaus liefert Angular eine eigene CLI, die Projekte erstellen, Dateien hinzufügen und mit Test-, Bündelungs- und Bereitstellungsaufgaben unterstützen kann. Diese CLI-Freundlichkeit macht Angular besonders kompatibel mit ASP.NET Core, das auch eine hervorragende CLI-Unterstützung bietet.

Microsoft hat eine Referenzanwendung, eShopOnContainers, entwickelt, die eine Angular SPA-Implementierung enthält. Diese App enthält Angular-Module, um den Einkaufskorb des Online-Stores zu verwalten, Artikel aus dem Katalog zu laden und anzuzeigen sowie die Auftragserstellung zu verarbeiten. Sie können die Beispielanwendung von GitHub anzeigen und herunterladen.

Reagieren

Im Gegensatz zu Angular, das eine umfassende Modell-View-Controller-Musterimplementierung bietet, konzentriert sich React ausschließlich auf die Darstellung. Es handelt sich nicht um ein Rahmenwerk, sondern nur um eine Bibliothek, daher müssen Sie zusätzliche Bibliotheken nutzen, um eine SPA zu erstellen. Es gibt eine Reihe von Bibliotheken, die mit React verwendet werden sollen, um umfangreiche Einzelseitenanwendungen zu erstellen.

Eines der wichtigsten Features von React ist die Verwendung eines virtuellen DOM. Das virtuelle DOM bietet React mehrere Vorteile, einschließlich leistung (das virtuelle DOM kann optimieren, welche Teile des tatsächlichen DOM aktualisiert werden müssen) und Testbarkeit (kein Browser zum Testen von React und deren Interaktionen mit seinem virtuellen DOM).

React ist auch ungewöhnlich bei der Funktionsweise mit HTML. Anstatt eine strikte Trennung zwischen Code und Markup zu haben (mit Verweisen auf JavaScript, die möglicherweise in HTML-Attributen angezeigt werden), fügt React HTML direkt in seinem JavaScript-Code als JSX hinzu. JSX ist HTML-ähnliche Syntax, die in reines JavaScript kompiliert werden kann. Beispiel:

<ul>
{ authors.map(author =>
    <li key={author.id}>{author.name}</li>
)}
</ul>

Wenn Sie JavaScript bereits kennen, sollte das Erlernen von React einfach sein. Es gibt nicht fast so viel Lernkurve oder spezielle Syntax wie bei Angular oder anderen beliebten Bibliotheken.

Da React kein vollständiges Framework ist, möchten Sie in der Regel, dass andere Bibliotheken Elemente wie Routing, Web-API-Aufrufe und Abhängigkeitsverwaltung verarbeiten. Das Schöne ist, Sie können die beste Bibliothek für jede dieser Bibliotheken auswählen, aber der Nachteil besteht darin, dass Sie alle diese Entscheidungen treffen und überprüfen müssen, ob alle ausgewählten Bibliotheken gut zusammenarbeiten, wenn Sie fertig sind. Wenn Sie einen guten Ausgangspunkt benötigen, können Sie ein Startkit wie React Slingshot verwenden, das eine Reihe kompatibler Bibliotheken zusammen mit React vorpackt.

Vue

Der Einsteigerleitfaden besagt: "Vue ist ein fortschrittliches Framework zum Erstellen von Benutzeroberflächen." Im Gegensatz zu anderen monolithischen Frameworks ist Vue von Grund auf so konzipiert, dass es inkrementell adoptierbar ist. Die Kernbibliothek konzentriert sich nur auf die Ansichtsebene und ist einfach in andere Bibliotheken oder vorhandene Projekte aufzunehmen und zu integrieren. Andererseits ist Vue perfekt in der Lage, anspruchsvolle Single-Page Anwendungen in Kombination mit modernen Tools und unterstützenden Bibliotheken zu unterstützen."

Für die ersten Schritte mit Vue ist es einfach erforderlich, das Skript in eine HTML-Datei einzugeben:

<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Nachdem das Framework hinzugefügt wurde, können Sie daten deklarativ mithilfe der einfachen Vorlagensyntax von Vue in das DOM rendern:

<div id="app">
  {{ message }}
</div>

und dann das folgende Skript hinzuzufügen:

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Dies reicht aus, um "Hello Vue!" auf der Seite zu rendern. Beachten Sie jedoch, dass Vue die Nachricht nicht einfach einmal in das div-Element rendert. Es unterstützt Datenbindung und dynamische Aktualisierungen, sodass, wenn sich der Wert in message ändert, der Wert in <div> sofort aktualisiert wird, um dies widerzuspiegeln.

Natürlich kratzt dies nur an der Oberfläche dessen, was Vue leisten kann. Es wurde in den letzten Jahren sehr beliebt und hat eine große Gemeinschaft. Es gibt eine große und wachsende Liste der unterstützenden Komponenten und Bibliotheken , die mit Vue arbeiten, um sie auch zu erweitern. Wenn Sie Ihrer Webanwendung clientseitiges Verhalten hinzufügen möchten oder die Erstellung eines vollständigen SPA in Erwägung ziehen, lohnt Vue eine Untersuchung.

Blazor WebAssembly

Im Gegensatz zu anderen JavaScript-Frameworks ist Blazor WebAssembly ein Framework für SPAs (Single Page Apps) zum Erstellen interaktiver clientseitiger Web-Apps mit .NET. Blazor WebAssembly verwendet offene Webstandards ohne Plug-Ins oder erneutes Kompilieren von Code in andere Sprachen. Blazor WebAssembly funktioniert in allen modernen Webbrowsern, einschließlich mobiler Browser.

Das Ausführen von .NET-Code in Webbrowsern wird durch WebAssembly (gekürzt wasm) ermöglicht. Es handelt sich um ein Bytecodeformat, das für schnelles Downloaden und die maximale Ausführungsgeschwindigkeit optimiert ist. WebAssembly ist ein offener Webstandard und wird in Webbrowsern ohne Plug-Ins unterstützt.

WebAssembly-Code kann über JavaScript auf die vollständige Funktionalität des Browsers zugreifen, die als JavaScript-Interoperabilität bezeichnet wird, häufig auf JavaScript-Interoperabilität oder JS-Interoperabilität gekürzt. Über WebAssembly im Browser ausgeführter .NET-Code wird in der JavaScript-Sandbox des Browsers ausgeführt. Hierbei greifen die Schutzmaßnahmen der Sandbox gegen schädliche Aktionen auf dem Clientcomputer.

Weitere Informationen finden Sie in der Einführung in ASP.NET Core Blazor.

Auswählen eines SPA-Frameworks

Wenn Sie überlegen, welche Option am besten geeignet ist, um Ihre SPA zu unterstützen, beachten Sie die folgenden Überlegungen:

  • Ist Ihr Team mit dem Framework und seinen Abhängigkeiten (einschließlich TypeScript in einigen Fällen) vertraut?

  • Wie stark voreingenommen ist das Framework, und stimmen Sie mit der Standardvorgehensweise überein?

  • Enthält sie (oder eine Begleitbibliothek) alle Features, die Ihre App benötigt?

  • Ist es gut dokumentiert?

  • Wie aktiv ist ihre Community? Werden neue Projekte damit erstellt?

  • Wie aktiv ist das Kernteam? Werden Probleme behoben und neue Versionen regelmäßig ausgeliefert?

Frameworks entwickeln sich weiterhin mit rasender Geschwindigkeit. Verwenden Sie die oben aufgeführten Überlegungen, um das Risiko der Auswahl eines Frameworks zu verringern, von dem Sie später bedauern, dass Sie davon abhängig sind. Wenn Sie besonders risikoavers sind, sollten Sie ein Framework in Betracht ziehen, das kommerzielle Unterstützung bietet und/oder von einem großen Unternehmen entwickelt wird.

Referenzen – Clientwebtechnologien

ZurückWeiter

  • Last updated on