Teil4

Problem:

• viele dynmaische Änderungen ggf. viele langsame DOM-Manipulationen

• ggf. unnötige Operationen

bildet reale DOM in JS-Objekten nach

• leichtgewichtige Kopie des DOM

Vorgehen:

• erkannte Änderungen aus Component Instance zuerst auf Virtuel DOM

• nachgelagerter Prozess vergleicht aktualisierten virutel DOM mit vorheriger Version (diffing)

• beim diffing ermittelte Änderungen auf echten DOM angewendet (patch)

da alle änderungen zuerst auf virutel DOM hat vue eine aktuelle Repräsentation des echten DOMs

Vorteil:

• durch dfffing unnötige änderungen erkannt, verhindet DOM-Operation

• über Virtuel DOM kann Zustand eines View leichter getracked werden

• zwischenstruktur schirmt entwickler vor schlechter verwendung der DOM-API ab

Kein pauschaler performance-vorteil

Daten- bzw. Ressourcenzustand

• z.B. in einer Datenbank verwaltete Daten, per Rest-API verfügabre Ressourcen

Sitzungszustand

• Informationen einer Browsersitzung

• zb. Benutzer eingeloggt

Oberflächenzustand

• Zustände in Views und Komponenten

• zB. Navigationsleiste eingeblendet

Architekturmuster, bietet umgamg mit clientsetigem Zustand in komplexen Web-Anwendungen

Ziele:

• Klar festgelegter, unidirektionaler Datenfluss

• klar festglegete Zuständigkeiten (analog MV*)

• Strikte Separierung des Zustands von den Views (singel source ot thruth)

• bessere Nachvollziehbarkeit von Zuständen

strikt reglementierter, nachvollziehbarer Datenfluss durch zentralen Dispatcher

durch stores keine unerwünschten Verteilung von Zustandsinformationen

Daten in stores nicht direkt änderbar, nur indirekt über Actions

Actions

• Kommen von einem View oder anderen Quelle (zb Event)

Dispatcher

• Zentrale Stelle (singleton)

• fließen alle Actions durch

• arbeitet streng sequentiell -> gewährleistet Nachvollziehbarkeit

Stores

• Verwalten den Zustand

• steht für eine Domäne bzw. fachlichen Bereich der Anwendung

• via Callback-Funktion beim Dispatcher registrieren

• anhand type-Attrbut entscheiden, ob behandelt werden soll

• aktualisiert sich selbst

  • ggf. change event für Views erzeugen

Views

• lauschen auf change event von Stores -> aktualisieren sich entsprechend

• bei Hierarchie von Komponenten:

  • änderung durch Hierarchie propagiert

offiziele State-Managment bib für vue

options und composition api möglich

auf Komponenten können aus sicht entwickler direkt auf State, Getter und Actions des Stores zugreifen

pinia fungiert als Proxy für den Store und kontriolliert zugriff

• dispatcher rolle

komponenten interagieren direkt mit durch Pinia überwachten store

• seprate Action-Action objekte in sinne von flux obsolet

Custom elements

• js API zu definition eigener html-elemente inkl. verhalten

Shadow DOM

• JS-API zum erstellen gekapselter unterbäume im DOM

HTML-Templates

• html-elemente zur beschreibung wiederverwenbare Templates in HTML-docs

Autonomous custom elements

• eigenständige, unabhängige elemente

Customized built-in elements

• elemente, die auf bestehende HTML-elemente basieren und diese erweitern/modifizieren

Datenstrukutur und JS-API zum Verwalten gekapselter Unterbäume im DOM

erlaubt zuweisen eines versteckten DOM (shadow tree) zu einem DOM-Knoten (shadow host)

Shadow Trees besitzen eigenen Gültigkeitsbereich

• enthaltene css-regeln wirken innerhalb des Shadow trees

• DOM-Elemente nach außen versteckt

Offener shadow DOM

• per JS von außen auf shadow tree zugreifen

geschlossenen shadow dom

• kein zugruff, shadowRoot eigenschaft immer null

Shadow Tree

• versteckte DOM-Baum im Shadow DOM

Shadow host

• reguläre DOM Knoten, mit welchem das Shadow DOM verbunden ist

Shadow Root:

• Wurzelknoten des Shadow Trees

Shadow Boundary

• Übergang von Shadow DOM zum regulärem DOM

HTML-Elemente zur Beschreibung wiederverndbare Temapltes in HTML-Doc

zwei zentrale Elemente

• template

  • beschreibung wiederverwendbare Strukturen

  • Besonderheit: Inhalt im DOM ernhalten, aber nicht vom Browser dargestellt

• slot

  • spezifikation flexibler inhalte

  • vergleichbar zu vue js slots

  • über name attribut namen zuweisen