Allgemeine clientseitige WebtechnologienCommon client-side web technologies

„Websites sollten auf der Oberfläche und in ihrem Inneren gut aussehen.“"Websites should look good from the inside and out."
– Paul Cookson- Paul Cookson

ASP.NET Core-Anwendungen sind Webanwendungen. Sie bauen normalerweise auf clientseitigen Webtechnologien wie HTML, CSS oder JavaScript auf.ASP.NET Core applications are web applications and they typically rely on client-side web technologies like HTML, CSS, and JavaScript. Indem der Inhalt der Seite (die HTML) vom Layout und Format (das CSS) und dessen Verhalten (über JavaScript) getrennt wird, können komplexe Web-Apps dem Prinzip der Separation of Concerns folgen.By separating the content of the page (the HTML) from its layout and styling (the CSS), and its behavior (via JavaScript), complex web apps can leverage the Separation of Concerns principle. Die Struktur, das Design und das Verhalten der Anwendung können so unkomplizierter angepasst werden, da sie nicht miteinander verknüpft sind.Future changes to the structure, design, or behavior of the application can be made more easily when these concerns are not intertwined.

Während HTML und CSS verhältnismäßig stabil sind, entwickelt sich JavaScript bezüglich Anwendungsframeworks und Dienstprogrammen, die von Entwicklern zum Erstellen webbasierter Anwendungen verwendet werden, in Rekordgeschwindigkeit weiter.While HTML and CSS are relatively stable, JavaScript, by means of the application frameworks and utilities developers work with to build web-based applications, is evolving at breakneck speed. In diesem Artikel erfahren Sie, wie JavaScript von Webentwicklern verwendet wird. Darüber finden Sie einen allgemeinen Überblick über die clientseitigen Bibliotheken Angular und React.This chapter looks at a few ways that JavaScript is used by web developers and provides a high-level overview of the Angular and React client-side libraries.

Hinweis

Blazor bietet eine Alternative zu JavaScript-Frameworks für die Erstellung komplexer, interaktiver Clientbenutzeroberflächen.Blazor provides an alternative to JavaScript frameworks for building rich, interactive client user interfaces. Clientseitige Blazor-Unterstützung ist noch immer in der Vorschauphase, weshalb sie in diesem Kapitel nicht berücksichtigt wird.Client-side Blazor support is still in preview, so for now it's out of scope for this chapter.

HTMLHTML

HTML ist die standardmäßige Markupsprache zum Erstellen von Webseiten und -anwendungen.HTML is the standard markup language used to create web pages and web applications. Ihre Bestandteile bilden die Grundlage der Seiten und stehen für formatierten Text, Bilder, Formeingaben und andere Strukturen.Its elements form the building blocks of pages, representing formatted text, images, form inputs, and other structures. Wenn ein Browser eine Anforderung an eine URL durchführt, egal ob es sich dabei um das Abrufen einer Seite oder einer Anwendung handelt, ist die erste Rückgabe ein HTML-Dokument.When a browser makes a request to a URL, whether fetching a page or an application, the first thing that is returned is an HTML document. Dieses HTML-Dokument kann auf zusätzliche Informationen zu seinem Aussehen und Layout (in Form von CSS) oder Verhalten (in Form von JavaScript) verweisen oder diese beinhalten.This HTML document may reference or include additional information about its look and layout in the form of CSS, or behavior in the form of JavaScript.

CSSCSS

CSS (Cascading Stylesheet) wird verwendet, um das Aussehen und Layout eines HTML-Elements anzugeben.CSS (Cascading Style Sheets) is used to control the look and layout of HTML elements. CSS-Formate können direkt auf ein HTML-Element angewendet werden, das separat auf der gleichen Seite angegeben wird, oder das in einer anderen Datei angegeben wird, auf die von der Seite verwiesen wird.CSS styles can be applied directly to an HTML element, defined separately on the same page, or defined in a separate file and referenced by the page. Formate werden auf Grundlage ihrer Verwendung zum Auswählen eines HTML-Elements weitergegeben.Styles cascade based on how they are used to select a given HTML element. 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.For instance, a style might apply to an entire document, but would be overridden by a style that applied to a particular element. 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).Likewise, an element-specific style would be overridden by a style that applied to a CSS class that was applied to the element, which in turn would be overridden by a style targeting a specific instance of that element (via its ID). Abbildung 6–1Figure 6-1

CSS-Genauigkeitsregeln

Abbildung 6–1.Figure 6-1. CSS-Genauigkeitsregeln, aufsteigend.CSS Specificity rules, in order.

Es wird empfohlen, Formate in getrennten Stylesheetdateien zu speichern und das auswahlbasierte Weitergeben zu verwenden, um konsistente und wiederverwendbare Formate innerhalb der Anwendung zu verwenden.It's best to keep styles in their own separate stylesheet files, and to use selection-based cascading to implement consistent and reusable styles within the application. Vermeiden Sie Formatregeln in HTML. Wenden Sie nur in Ausnahmefällen Formate auf einzelne Elemente an (statt auf ganze Klassen von Elementen oder auf Elemente, auf die eine bestimmte CSS-Klasse angewendet wurde).Placing style rules within HTML should be avoided, and applying styles to specific individual elements (rather than whole classes of elements, or elements that have had a particular CSS class applied to them) should be the exception, not the rule.

CSS-PräprozessorenCSS preprocessors

CSS-Stylesheets unterstützen keine bedingte Logik, Variablen oder andere Programmiersprachenfeatures.CSS stylesheets lack support for conditional logic, variables, and other programming language features. Deshalb enthalten große Stylesheets oft Wiederholungen, da die gleiche Farbe, Schriftart oder eine andere Einstellung auf verschiedene Varianten von HTML-Elementen und CSS-Klassen angewendet wird.Thus, large stylesheets often include quite a bit of repetition, as the same color, font, or other setting is applied to many different variations of HTML elements and CSS classes. CSS-Präprozessoren tragen dazu bei, dass Ihre Stylesheets dem DRY-Prinzip treu bleiben, indem sie Unterstützung für Variablen und Logik hinzufügen.CSS preprocessors can help your stylesheets follow the DRY principle by adding support for variables and logic.

Die bekanntesten CSS-Präprozessoren sind Sass und LESS.The most popular CSS preprocessors are Sass and LESS. Beide erweitern CSS und stellen Rückwärtskompatibilität bereit. Das bedeutet, dass eine CSS-Datei eine gültige Sass- oder LESS-Datei ist.Both extend CSS and are backward compatible with it, meaning that a plain CSS file is a valid Sass or LESS file. Sass basiert auf Ruby und LESS auf JavaScript. Beide werden normalerweise im Rahmen Ihres lokalen Entwicklungsprozesses ausgeführt.Sass is Ruby-based and LESS is JavaScript based, and both typically run as part of your local development process. Beide verfügen über Befehlszeilentools. Visual Studio verfügt über integrierte Unterstützung für ihre Ausführung mithilfe von Gulp- und Grunt-Tasks.Both have command-line tools available, as well as built-in support in Visual Studio for running them using Gulp or Grunt tasks.

JavaScriptJavaScript

JavaScript ist eine dynamische, interpretierte Programmiersprache, die in der ECMAScript-Sprachspezifikation standardisiert wurde.JavaScript is a dynamic, interpreted programming language that has been standardized in the ECMAScript language specification. JavaScript ist die Programmiersprache des Internets.It is the programming language of the web. Ähnlich wie CSS kann JavaScript als Attribute innerhalb von HTML-Elementen, als Skriptblöcke auf einer Seite oder in separaten Dateien definiert werden.Like CSS, JavaScript can be defined as attributes within HTML elements, as blocks of script within a page, or in separate files. Genau wie bei CSS wird auch hier empfohlen, dass Sie JavaScript in separaten Dateien strukturieren, sodass es so weit wie möglich von der HTML getrennt bleibt, die sich auf Webseiten oder in Anwendungsansichten befindet.Just like CSS, it's recommended to organize JavaScript into separate files, keeping it separated as much as possible from the HTML found on individual web pages or application views.

Wenn Sie JavaScript in Ihrer Webanwendung verwenden, müssen Sie zumeist folgende Aufgaben ausführen:When working with JavaScript in your web application, there are a few tasks that you'll commonly need to perform:

  • Sie müssen ein HTML-Element auswählen und dieses abrufen und/oder dessen Wert aktualisieren.Selecting an HTML element and retrieving and/or updating its value.

  • Sie müssen eine Web-API abfragen, um Daten zu erhalten.Querying a Web API for data.

  • Sie müssen einen Befehl an eine Web-API senden (und auf einen Rückruf mit ihrem Ergebnis reagieren).Sending a command to a Web API (and responding to a callback with its result).

  • Sie müssen eine Validierung durchführen.Performing validation.

Diese Aufgaben können Sie alle mit JavaScript alleine durchführen, aber es gibt viele Bibliotheken, die Ihnen den Vorgang erleichtern.You can perform all of these tasks with JavaScript alone, but many libraries exist to make these tasks easier. Eine der ersten und erfolgreichsten Bibliotheken ist jQuery, die immer noch sehr beliebt ist, wenn es darum geht, diese Aufgaben auf Webseiten zu erleichtern.One of the first and most successful of these libraries is jQuery, which continues to be a popular choice for simplifying these tasks on web pages. jQuery bietet für Single-Page-Webanwendungen (SPAs) nur wenige der erwünschten Features, die von den Bibliotheken „Angular“ und „React“ bereitgestellt werden.For Single Page Applications (SPAs), jQuery doesn't provide many of the desired features that Angular and React offer.

Legacy-Webanwendungen mit jQueryLegacy web apps with jQuery

Obwohl jQuery für JavaScript-Verhältnisse schon sehr alt ist, ist sie immer noch eine häufig verwendete Bibliothek bei der Arbeit mit HTML/CSS und beim Erstellen von Anwendungen, die AJAX-Aufrufe an Web-APIs durchführen.Although ancient by JavaScript framework standards, jQuery continues to be a commonly used library for working with HTML/CSS and building applications that make AJAX calls to web APIs. jQuery funktioniert auf Ebene des Dokumentobjektmodells (DOM) des Browsers und bietet nur ein imperatives statt eines deklarativen Modells.However, jQuery operates at the level of the browser document object model (DOM), and by default offers only an imperative, rather than declarative, model.

Gehen wir z.B. davon aus, dass ein Element auf einer Seite sichtbar gemacht wird, wenn der Wert eines Textfelds höher als 10 ist.For example, imagine that if a textbox's value exceeds 10, an element on the page should be made visible. Dies sollte in jQuery normalerweise durch das Schreiben eines Ereignishandlers implementiert werden. Dazu wird Code benötigt, der den Wert des Textfelds untersucht und die Sichtbarkeit des Zielelements basierend auf diesem Wert ändert.In jQuery, this would typically be implemented by writing an event handler with code that would inspect the textbox's value and set the visibility of the target element based on that value. Dabei handelt es sich um eine imperative, codebasierte Herangehensweise.This is an imperative, code-based approach. In einem anderen Framework wird möglicherweise die Datenbindung verwendet, um die Sichtbarkeit von Elementen deklarativ an den Wert des Textfelds zu binden.Another framework might instead use databinding to bind the visibility of the element to the value of the textbox declaratively. Dazu ist das Schreiben von Code nicht nötig. Allerdings müssen Sie stattdessen die betreffenden Elemente mit Datenbindungsattributen versehen.This would not require writing any code, but instead only requires decorating the elements involved with data binding attributes. Mit steigender Komplexität des clientseitigen Verhaltens gewährleisten Herangehensweisen, die die Datenbindung einsetzen, oft einfachere Lösungen mit weniger Code und weniger bedingter Komplexität.As client-side behaviors grow more complex, data binding approaches frequently result in simpler solutions with less code and conditional complexity.

Vergleich: jQuery und ein SPA-FrameworkjQuery vs a SPA Framework

AspektFactor jQueryjQuery AngularAngular
Abstraktion des DOMAbstracts the DOM JaYes JaYes
AJAX-UnterstützungAJAX Support JaYes JaYes
Deklarative DatenbindungDeclarative Data Binding NoNo JaYes
MVC-RoutingMVC-style Routing NoNo JaYes
VorlagenTemplating NoNo JaYes
Deep-Link-RoutingDeep-Link Routing NoNo JaYes

Die meisten Features, die jQuery fehlen, können durch andere Bibliotheken hinzugefügt werden.Most of the features jQuery lacks intrinsically can be added with the addition of other libraries. Ein SPA-Framework wie Angular stellt diese Features einfacher bereit, da diese von Anfang an bei dessen Entwicklung berücksichtigt wurden.However, a SPA framework like Angular provides these features in a more integrated fashion, since it's been designed with all of them in mind from the start. Zudem ist jQuery eine imperative Bibliothek, was bedeutet, dass Sie jQuery-Funktionen aufrufen müssen, um Vorgänge mit jQuery durchführen zu können.Also, jQuery is an imperative library, meaning that you need to call jQuery functions in order to do anything with jQuery. Die meiste Arbeit und die meisten Funktionen, die von SPA-Frameworks bereitgestellt werden, können deklarativ durchgeführt werden, sodass kein Code geschrieben werden muss.Much of the work and functionality that SPA frameworks provide can be done declaratively, requiring no actual code to be written.

Die Datenbindung ist ein gutes Beispiel dafür.Data binding is a great example of this. In jQuery ist normalerweise nur eine Codezeile erforderlich, um den Wert eines DOM-Elements abzurufen oder den Wert eines Elements festzulegen.In jQuery, it usually only takes one line of code to get the value of a DOM element or to set an element's value. Diesen Code müssen Sie allerdings immer dann schreiben, wenn Sie den Wert eines Elements verändern möchten, und es kann sein, dass dies für mehrere Funktionen auf einer Seite erforderlich ist.However, you have to write this code anytime you need to change the value of the element, and sometimes this will occur in multiple functions on a page. Ein weiteres Beispiel ist die Sichtbarkeit von Elementen.Another common example is element visibility. In jQuery müssen Sie an verschiedenen Stellen Code schreiben, um zu steuern, welche Elemente sichtbar sein sollen.In jQuery, there might be many different places where you'd write code to control whether certain elements were visible. In allen diesen Fällen muss jedoch beim Gebrauch der Datenbindung kein Code geschrieben werden.In each of these cases, when using data binding, no code would need to be written. Sie binden lediglich den Wert oder die Sichtbarkeit eines Elements oder mehrerer Elemente an ein ViewModel-Objekt auf der Seite, und dann werden Änderungen an diesem Objekt automatisch in den gebundenen Elementen widergespiegelt.You'd simply bind the value or visibility of the elements in question to a viewmodel on the page, and changes to that viewmodel would automatically be reflected in the bound elements.

Angular-SPAsAngular SPAs

Angular bleibt weltweit eines der beliebtesten JavaScript-Frameworks.Angular remains one of the world's most popular JavaScript frameworks. Ab Angular 2 hat das Team das Framework (mithilfe von TypeScript) komplett neu gestaltet und den ursprünglichen Namen AngularJS in Angular geändert.Since Angular 2, the team rebuilt the framework from the ground up (using TypeScript) and rebranded from the original AngularJS name to simply Angular. Das mehrere Jahre alte, jetzt neu gestaltete Angular ist weiterhin ein solides Framework für die Erstellung von Single-Page-Webanwendungen.Now several years old, the redesigned Angular continues to be a robust framework for building Single Page Applications.

Angular-Anwendungen setzen sich aus Komponenten zusammen.Angular applications are built from components. Komponenten vereinen HTML-Vorlagen mit besonderen Objekten und steuern einen Teil der Seite.Components combine HTML templates with special objects and control a portion of the page. Hier sehen Sie eine einfache Komponente aus der Angular-Dokumentation:A simple component from Angular's docs is shown here:

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

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

export class AppComponent { name = 'Angular'; }

Komponenten werden mit der Decorator-Funktion @Component definiert, die Metadaten zur Komponente beinhaltet.Components are defined using the @Component decorator function, which takes in metadata about the component. Die selector-Eigenschaft gibt die ID des Elements auf der Seite an, auf der die Komponente angezeigt wird.The selector property identifies the ID of the element on the page where this component will be displayed. Die template-Eigenschaft ist eine einfache HTML-Vorlage, die einen Platzhalter enthält, der für die name-Eigenschaft des Elements steht, die in der letzten Zeile definiert wird.The template property is a simple HTML template that includes a placeholder that corresponds to the component's name property, defined on the last line.

Da Angular-Anwendungen mit Komponenten und Vorlagen statt mit DOM-Elementen arbeiten, ist ihr Grad an Abstraktion höher, und sie erfordern insgesamt weniger Code als Apps, die nur mit JavaScript (auch als „Vanilla JS“ bezeichnet) oder jQuery geschrieben wurden.By working with components and templates, instead of DOM elements, Angular apps can operate at a higher level of abstraction and with less overall code than apps written using just JavaScript (also called "vanilla JS") or with jQuery. Außerdem sorgt Angular für einen gewissen Grad an Ordnung bei der Organisation Ihrer clientseitigen Skriptdateien.Angular also imposes some order on how you organize your client-side script files. Gemäß der Konvention verwenden Angular-Apps eine gemeinsame Ordnerstruktur, wobei sich Modul- und Komponentenskriptdateien in einem App-Ordner befinden.By convention, Angular apps use a common folder structure, with module and component script files located in an app folder. Angular-Skripts zum Erstellen, Bereitstellen und Testen der App befinden sich normalerweise in einem Ordner auf einer höheren Ebene.Angular scripts concerned with building, deploying, and testing the app are typically located in a higher-level folder.

Angular-Apps können mithilfe einer CLI entwickelt werden.You can develop Angular apps by using a CLI. Um lokal mit der Angular-Entwicklung beginnen zu können (wenn Sie git und npm bereits installiert haben), müssen Sie einfach nur ein Repository von GitHub kopieren und npm install und npm start ausführen.Getting started with Angular development locally (assuming you already have git and npm installed) consists of simply cloning a repo from GitHub and running npm install and npm start. Darüber hinaus ist eine eigene CLI im Lieferumfang von Angular enthalten, mit der Projekte erstellt, Dateien hinzugefügt und Test-, Bündelungs- und Bereitstellungstasks unterstützt werden können.Beyond this, Angular ships its own CLI, which can create projects, add files, and assist with testing, bundling, and deployment tasks. Durch diese CLI-Fähigkeit ist Angular insbesondere kompatibel mit ASP.NET Core, das ebenfalls CLI-Unterstützung beinhaltet.This CLI friendliness makes Angular especially compatible with ASP.NET Core, which also features great CLI support.

Microsoft hat die Beispielanwendung eShopOnContainers entwickelt, die eine Angular-SPA-Implementierung enthält.Microsoft has developed a reference application, eShopOnContainers, which includes an Angular SPA implementation. Diese App beinhaltet Angular-Module zum Verwalten von Einkaufswagen in Onlineshops, zum Laden und Anzeigen von Artikeln aus dem Katalog des Shops und zum Verarbeiten einer Bestellung.This app includes Angular modules to manage the online store's shopping basket, load and display items from its catalog, and handling order creation. Sie können die Beispielanwendung von GitHub herunterladen.You can view and download the sample application from GitHub.

ReactReact

Im Gegensatz zu Angular, das eine vollständige Implementierung des MVC-Musters bereitstellt, befasst React sich nur mit Ansichten.Unlike Angular, which offers a full Model-View-Controller pattern implementation, React is only concerned with views. React ist kein Framework, sondern lediglich eine Bibliothek, sodass Sie zum Erstellen einer SPA zusätzliche Bibliotheken benötigen.It's not a framework, just a library, so to build a SPA you'll need to leverage additional libraries. Es gibt eine Reihe von Bibliotheken, die für die Verwendung mit React entwickelt wurden, um komplexe Single-Page-Webanwendungen zu erstellen.There are a number of libraries that are designed to be used with React to produce rich single page applications.

Eines der wichtigsten Features von React ist das virtuelle DOM.One of React's most important features is its use of a virtual DOM. Das virtuelle DOM in React hat mehrere Vorteile, u.a. bei der Leistung (das virtuelle DOM optimiert, welche Teile des DOM tatsächlich aktualisiert werden müssen) und bei der Testbarkeit (es wird kein Browser zum Testen von React und dessen Interaktionen mit seinem virtuellen DOM benötigt).The virtual DOM provides React with several advantages, including performance (the virtual DOM can optimize which parts of the actual DOM need to be updated) and testability (no need to have a browser to test React and its interactions with its virtual DOM).

Außerdem arbeitet React auf ungewöhnliche Weise mit HTML.React is also unusual in how it works with HTML. Statt einer strikten Trennung zwischen Code und Markup (mit möglichen Verweisen auf JavaScript in HTML-Attributen), fügt React HTML direkt als JSX in seinen JavaScript-Code ein.Rather than having a strict separation between code and markup (with references to JavaScript appearing in HTML attributes perhaps), React adds HTML directly within its JavaScript code as JSX. JSX ist eine Syntax ähnlich wie HTML, die zu reinem JavaScript kompiliert werden kann.JSX is HTML-like syntax that can compile down to pure JavaScript. Zum Beispiel:For example:

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

Wenn Sie bereits mit JavaScript vertraut sind, sollte das Erlernen von React unkompliziert sein.If you already know JavaScript, learning React should be easy. Sie müssen sich bei Weitem nicht so viel Wissen oder besondere Syntax aneignen wie bei Angular oder anderen beliebten Bibliotheken.There isn't nearly as much learning curve or special syntax involved as with Angular or other popular libraries.

Da es sich bei React nicht um ein vollständiges Framework handelt, sollten sich andere Bibliotheken um Routing, Web-API-Aufrufe und die Abhängigkeitsverwaltung kümmern.Because React isn't a full framework, you'll typically want other libraries to handle things like routing, web API calls, and dependency management. Der Vorteil besteht darin, dass Sie sich so die beste Bibliothek für jede dieser Aufgaben aussuchen können. Der Nachteil besteht allerdings darin, dass sie sich aktiv mit diesen Entscheidungen auseinandersetzen und sicherstellen müssen, dass die ausgewählten Bibliotheken gut miteinander funktionieren.The nice thing is, you can pick the best library for each of these, but the disadvantage is that you need to make all of these decisions and verify all of your chosen libraries work well together when you're done. Wenn Sie einen guten Ausgangspunkt haben möchten, können Sie ein Starter Kit wie React Slingshot verwenden, in dem mehrere kompatible Bibliotheken gemeinsam mit React vorverpackt sind.If you want a good starting point, you can use a starter kit like React Slingshot, which prepackages a set of compatible libraries together with React.

VueVue

Im Leitfaden für die ersten Schritte heißt es: „Vue ist ein fortschrittliches Framework für die Erstellung von Benutzeroberflächen.From its getting started guide, "Vue is a progressive framework for building user interfaces. Im Gegensatz zu anderen monolithischen Frameworks ist Vue von Grund auf so konzipiert, dass es schrittweise angepasst werden kann.Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. Die Kernbibliothek konzentriert sich nur auf die Ansichtsschicht und ist leicht zu übernehmen und in andere Bibliotheken oder bestehende Projekte zu integrieren.The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. Auf der anderen Seite ist Vue perfekt in der Lage, anspruchsvolle Single-Page-Webanwendungen zu ermöglichen, wenn es in Kombination mit modernen Tools und unterstützenden Bibliotheken eingesetzt wird.“On the other hand, Vue is perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries."

Die ersten Schritte mit Vue erfordern lediglich die Einbindung seines Skripts in eine HTML-Datei:Getting started with Vue simply requires including its script within an HTML file:

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

Bei hinzugefügtem Framework sind Sie anschließend in der Lage, Daten mithilfe der einfachen Vorlagensyntax von Vue deklarativ für das DOM zu rendern:With the framework added, you're then able to declaratively render data to the DOM using Vue's straightforward templating syntax:

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

und dann das folgende Skript hinzuzufügen:and then adding the following script:

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

Dies reicht aus, um „Hello Vue!“This is enough to render "Hello Vue!" auf der Seite zu rendern.on the page. Beachten Sie jedoch, dass Vue die Nachricht nicht bloß einmal für das Div-Element rendert.Note, however, that Vue isn't simply rendering the message to the div once. Es unterstützt die Datenbindung und dynamische Aktualisierungen dergestalt, dass bei einer Änderung des Werts von message der Wert in <div> sofort aktualisiert wird, um ihn widerzuspiegeln.It supports databinding and dynamic updates such that if the value of message changes, the value in the <div> is immediately updated to reflect it.

Freilich kratzt dies nur an der Oberfläche dessen, was Vue zu leisten vermag.Of course, this only scratches the surface of what Vue is capable of. Das Framework hat in den letzten Jahren sehr viel an Popularität gewonnen und eine große Community.It's gained a great deal of popularity in the last several years and has a large community. Es gibt eine große und wachsende Liste von unterstützenden Komponenten und Bibliotheken, die mit Vue zusammenarbeiten, um das Framework außerdem zu erweitern.There's a huge and growing list of supporting components and libraries that work with Vue to extend it as well. Wenn Sie Ihrer Webanwendung clientseitiges Verhalten hinzufügen möchten oder die Einrichtung einer vollständigen SPA in Betracht ziehen, lohnt sich ein Blick auf Vue.If you're looking to add client-side behavior to your web application or considering building a full SPA, Vue is worth investigating.

Entscheidung für ein SPA-FrameworkChoosing a SPA Framework

Wenn Sie sich für ein JavaScript-Framework entscheiden müssen, das Ihre SPA am besten unterstützt, beachten Sie besonders die folgenden Aspekte:When considering which JavaScript framework will work best to support your SPA, keep in mind the following considerations:

  • Kennt sich Ihr Team mit dem Framework und dessen Abhängigkeiten aus (dies umfasst in einigen Fällen auch TypeScript)?Is your team familiar with the framework and its dependencies (including TypeScript in some cases)?

  • Wie „eigenwillig“ ist das Framework, und passt sein Standardverhalten zu Ihren Bedürfnissen?How opinionated is the framework, and do you agree with its default way of doing things?

  • Enthält es (oder eine zugehörige Bibliothek) alle Features, die Ihre App benötigt?Does it (or a companion library) include all of the features your app requires?

  • Ist es gut dokumentiert?Is it well documented?

  • Wie aktiv ist seine Community?How active is its community? Werden damit neue Projekte erstellt?Are new projects being built with it?

  • Wie aktiv ist das Kernteam?How active is its core team? Werden Probleme behoben und regelmäßig neue Versionen veröffentlicht?Are issues being resolved and new versions shipped regularly?

JavaScript-Frameworks entwickeln sich in Rekordgeschwindigkeit weiter.JavaScript frameworks continue to evolve with breakneck speed. Entscheiden Sie sich anhand der oben aufgelisteten Fragen für ein geeignetes Framework.Use the considerations listed above to help mitigate the risk of choosing a framework you'll later regret being dependent upon. Wenn es sein kann, dass sich ein Framework für Sie schnell als ungeeignet herausstellt, entscheiden Sie sich für ein Framework, dass kommerziellen Support anbietet und/oder von einem großen Unternehmen entwickelt wird.If you're particularly risk-averse, consider a framework that offers commercial support and/or is being developed by a large enterprise.

Ressourcen: Clientseitige WebtechnologienReferences – Client Web Technologies