Teil3

Benutzatkion fürhren zu Client-Sever-Kommunikation mit Neuladen der Webseite

Synchronität: Browser blockert und Benutzer wartet zwischen Anfrage und Antwort

Client ist Thin Client

Hauptarbeit bei Server

• auffinden/erzeugen und Auslieern HTML-seiten

• Navigation und Routing von urls

• zugriff auf fachlogik

Asynchronous JavaScript and XML

ermöglicht asynchronen Datenaustausch ohne Neuladen der Webseite

• native APIS im Browser

  • XMLhttpRequest

  • fetch-api

• Bibliothekten

  • JQuery

  • Axios

server stellt daten über zb. Rest-api zur verfügung

konzept, keine technologie kombiniert

• DOM als manipulierbare Respräsentation eines HTML-Docs

• JS für DOM-Manipulation

• Format zum Datenaustausch, z.B. JSON, XML

beschreibt datenstruktur, in welcher der Browser ein HTML-Dokument verwaltet

definiert ein API zum zugriff und zur manipulation der Datenstruktur per Javascript

elemente an enen ein Event auftritt heißen Event-ziele

bsp click an button (event-ziel)

für event-type an einem event-ziel eine JS-funktion registireren, damit reagieren möglich sit

XHR

klassiche api zur datenübertragung zwischen browser und server (fetch ist neuere variante)

nicht auf xml beschränkt

u.a. folgende funktionen

• open -> http-anfrage initalisieren

• send -> http-anfrage senden

• responseType

• status

• response

bessere user-experience und performance

geringere netzwerklast

Fragmentierung der Präsentationslogik und HTML-Erzeugung über Client und Server

wechsel zwischen Seiten ist weiterhin neuladen nötig

eigentliher applikationszsutand weiterhin im Server verwaltet

ziele

• Bedienkomfort und Reaktionszeit von desktop-Apps auch im Web

• Nutzung vorhandener Ressorucen am Client und Entlastung des Servers (Skalierung, Kosteneinsprarung)

• Offline-Fähigkeit

Eigenschaften

• inital load lädt komplette App mit allen ressourcen

• danach kein neuladen der seiten

  • änderungen/aktualisierung der Datenstellung über DOM-Manipulation

• serverkommunikation nur noch zum laden vo Daten bzw. Ausführen Geschächftslogik zb mit ajax

• client ist Fat Client

  • aufgaben server wandeln in client

    
    

entsthende Komplexität im Client beherrschen

• Wartbarkeit, Anpassbarkeit etc

Lösung:

• Entwurfsprinzipien

• Architekturmuster

• Frameworks

native browser-funktion zunächste beeinträchtet zb lesezeichen, vor-zurück

initial-load teuer, gelöst durch Server-side rendering

Search Engine Optimization (SEO) kann aufäwndiger sein

time to Frist Byte (TTFB)

• erste byte trifft beim client ein

First Contentful Paint (FCP):

• ersten Inhalte werden im Client dargestellt zb Texte

Time to Interactive (TTI)

• Ansicht im Client ist interatkiv, zb. Buttons

nicht für jeden Anwendungsfalls ist eine Optimierung aller gfaktoren notwendig/sinnvoll

Server Rendering

• klassiche MPAs

• erfolgt volständig auf server

• ansicht wird dynamisch nach bedarf gerendet wenn Anfrage eintriftt

• zb. Spring MV mit Thymeleaf)

statisches Rendering

• alle möglichen Ansichten im Build-Prozess vorgeneriert

• dynamische Erzeugung entfällt

• für MPA und SPA

Client-Side Rendering (CSR)

• SPAs

Hybride Ansätzen Server-Side Renderingern (SSR)

• kombi von CSR und Server Rendering

• auch genannt: Universal Rendering

• Ansicht wird server-seitig vorgerendet

• Antwort an Client enthält

  • vorgerenderte Ansicht (statisches HTML)

  • zusätzlich JS-Code

• Darstellung zweistufig:

  • server-setig vorgrenderte Ansicht direkt angzeigt

  • danach übernimmt JS-Code, die SPA wird “hochgefahren” (Rehydration)

zur beherrschung von komplexität

Strukturierung in in sich geschlosene Bausteine

ECMAScript-Standard lange keine Modulariserung vorgesehen, daher mit Libs

Mit ES6+

• modul in separate Datei definiert

• Datenkapselung: alle in einem Modul definierte Varaiblen nur innerhalb des Moduls sichtbar

• mit export gezielt sichtbar gemacht werden

• import-schlüsselwort nutzen für einbinden von modul

DOM-Manipulation und Event-Handling wird abstrahiert und übernimmt vue

Muster wie MVC clientseitig bei JS-frameworks

gleiche ziele wie auf server

• Trennung von Zuständigkeiten

• Anpassbarkeit

• Erweitbarkeit

• Wiederverwenbarkeit

selten in Reinform, sondern realisieren Varianten

MVC-Muster Variante

Zenrales Element: Bidirektionale Datenbindung über Binder

Zuästzliche Ziele

• Stärkere Entkopplung von View und Model

• Verbesserte Testbarkeit von Präsentationslogik

• kein Controller, Datenbindung über Binder-Komponente

Model keine verbinung zu View

Viewmodel bindeglied zwischen View und Model

• enthält Präsentationslogik

View darstellung der Oberfläche

• lauscht uf Viewmodel

obermenge von HTML

HTML um folgende Elemente angereichert

• Interpolation

  • dynamisches Auswerten von Platzhaltern

  • bei referenzierung von data der Root-Component etabliert vue Data-binding

  • automatische aktualisierung der Werte

  • nur da verwendbar wo textinhalt stehen kann

• Direktiven

  • spezielle HTML-Attribute mit Präfix “v-”

  • repräsentieren zb. DOM-Manipulation oder Event-Handler

  • typischerweise JS ausdruck

  • v-if, v-else-if, v-else

  • v-for

erlaubt dynamische setzten von HTML-Attributen

Argument: Name es zu setzenden Attributs

erlaubt reagieren auf DOM-Events

Argument: Name des Events

Wert zb Name einer Funktion im methods bereich

Binder-Komponenten aus MVVM

bidirektionales Bindings zwischen HTML-Formularlemente und zb Data-teil der Root Component

für html-element input, select und textarea

Rolle: ViewModels

allgemeine bezeichnung: Component Instance

normales Objekt mit eigenschaften:

• data

  • funktion, liefer Daten für View

  • repräsentiert Model

  • auf das objekt kann aus Templates zugegriffen werden

  • eigenschaften sind reaktiv, dh. vue beobachtet änderungen (Binder-Komponente)

• methods

  • funktion, realisiert Präsentationslogik

  • direkt aus Templates aufrufbar

  • kann auf data zugreifen

• computed

  • repräsentiert berechnete Eigenschaften

  • aus kombi anderer eigenschaften

  • zugriff wie auf eigenschaften, ohne klammern

  • durch Caching nur neu berechnet, wenn abhängige Eigenschaften geändert

repräsentiert Vue-Anwendung

wird mit erstellen der rootComponent erstellt createApp(rootComponnent)

übernimmt mounten, wurzelkomponente mit dem DOM verbunden

• wert für selector ist CSS-Selektor

Wurzelkomponente wird am ersten Element im HTML-Dokument gemountet, auf das der CSS-Selektor zutrifft

komplexe Oberfläche nicht über ein ViewModel verwalten

Skalierbarkeit und Wiederverwendbarkeit erhöhen durch Komponentne

in sich geschlossene wiederverwendbare Bausteine, aus denen eine Web-Oberfläche zusammengesetzt wird

können ineinander verschachtelt werden, bilden daher Baumstruktur

In vue über Eigenschaft components registriert

zentrale eignschaften

• data, methods, computed etc. analog zur Root-Componnent unterstützt

• template zum rendern der komponente

• props für definition von Parametern zur Übergabe von Daten an eine Komponente

kann über namen wie normales html tag verwendet werden

• beim rendern durch template ersetzt

Props

• übergabe von daten an komponente

• wert von props ist array welches Parameter auflistet

• Wert kann statisch oder dynamisch über zb. v-bind gesetzt werden

Slots

• Standardmäßig jeder Inhalt in Costom-Tag ignoriert

• über slots kann beliebiger template-code an eine Komponente übergeben werden

  • auch übergabe andere Komponenten möglich -> Komponentenhierarchie

• über slot-tag definiert

• hat custom-element inhalt, wird slot-tag beim Rendern der Komponenten durch Inhalt ersetzt

• mehre slots tags = entsprechenden inhalt mehrfach

• können namen haben, mit v-slot direktive em benannten slot zuweisen

Dateiendung mit .vue

enthält drei Aspekte

• benötigter JS-Code (script)

  • einmal pro SFC

  • code als ECMAScript-Modul definiert

  • Standardexport ist das Options-Objekt für Komponente

• HTML-Temaplte der Komponente

  • nur einmal pro SFC

  • bentöigt eindeutiges Wurzelelement

• CSS-Regeln der Komponente

  • mehrmals pro SFC definierbar

  • landen in einem internen Stylsheet der resultieren seite

    • daher scoped-Attribut um nur SFC zu stylen

  • mit lang-attribut Präprozessorsprache möglich

Vorrausetzung

• nicht von Browser verstanden, daher zusätzlicher Schritt nötigt um vue-Daei in lauffähiger Form zu bringen

Kernaufgabe: menge von Artefakten transformieren und für Browser zu bündeln

Über URL-Fragment

• mit # in url

• dient zur Referenzierung innerhalb einer Ressource (typischerweise HTML-Element a)

• kein neuladen der Seite verursacht

• per JS ausgewertet und client-seitigem Routing innerhalb SPA verwendet

muss per npm nachinstalliert werden

Route-Outlet (auch Route-View) legt fest, wo die durch Route aktivierte Komponente dargestellt wird, z.B in main

• über Element router-view in Template definiert

navigation deklarativ:

• router-link Komponente verwenden

navigation imperativ

• mit this.$router.push() programmatisch route anstoßen

können verschatelt werden

• bei komplexen anwendungen sinnvoll

• beliebig oft möglich

• über Eigenschaft children der Routerkonfiguration array von Routerkonfigurationen zuweisen

• übergeordente Komponentne benötigten router-outlet um Komponenten darzustellen

pfadparameter

• pfad kann mehrere dynamische segemente enthalten

• innerhalb komponete können auf segmente zugegriffen werden