@ -9,8 +9,31 @@
\usepackage { graphicx}
\usepackage { transparent}
\usepackage { csquotes}
\usepackage { graphicx}
\usepackage { subfig}
\usepackage { tikz}
\usepackage { subfig}
\usepackage { longtable}
\usepackage { adjustbox}
\usepackage { array}
\usepackage { xparse} % http://ctan.org/pkg/xparse
\NewDocumentCommand { \rot } { O{ 45} O{ 1em} m} { \makebox [#2] [l] { \rotatebox { #1} { #3} } } %
\usepackage { amssymb} % http://ctan.org/pkg/amssymb
\usepackage { pifont} % http://ctan.org/pkg/pifont
\usepackage [beamer,customcolors] { hf-tikz}
\tikzset { hl/.style={
set fill color=red!80!black!40,
set border color=red!80!black,
} ,
}
\usepackage [natbib=true,style=alphabetic,dateabbrev=false] { biblatex}
\usepackage { booktabs}
\addbibresource { ../bibliography.bib}
\usetikzlibrary { positioning}
\usetikzlibrary { matrix}
@ -28,38 +51,15 @@
\begin { document}
\maketitle
\begin { frame} { Gliederung}
\setbeamertemplate { section in toc} [sections numbered]
% \tableofcontents [hideallsubsections]
\begin { itemize}
\item Einführung
\item Grundlagen
\item Bewertungskriterien
\item Versuchsaufbau
\item Ergebnisse
\item Fazit
\end { itemize}
\end { frame}
\section { Einführung}
\begin { frame} { Ziel der Arbeit}
\begin { itemize}
\item Die Zustandsverwaltung ist ein entscheidender Aspekt einer Flutter-Anwendung
\item Fragestellung: Wie lässt sich der Zustand einer Flutter-Anwendung am besten verwalten?
\item Evaluation von verschiedenen Lösungsansätzen für die Zustandsverwaltung in Flutter
\item Welcher Lösungsansatz ist am beste für verschiedene Anwendungsfälle geeignet?
\end { itemize}
\end { frame}
\begin { frame} { Motivation}
\begin { itemize}
\item Die Zustandsverwaltung ist ein entscheidender Aspekt einer Flutter-Anwendung
\item Entscheidet mit über dem Erfolg eines Projektes
\item Kein etablierter Standard vorhanden
\item Entscheidung schwer umkehrbar
\end { itemize}
\end { frame}
\begin { frame} { Vorgehen}
\begin { enumerate}
\item Recherche zu bestehenden Zustandsverwaltungssystemen
@ -73,13 +73,29 @@
\section { Grundlagen}
\begin { frame} { Grundlagen}
\begin { itemize}
\item Was ist die Aufgabe der Zustandsverwaltung in Flutter?
\item Was ist Flutter?
\item Wie funktioniert Flutter?
\item Was ist die Aufgabe der Zustandsverwaltung in Flutter ?
\item Welche Zustandsverwaltungssystem werden evaluiert ?
\end { itemize}
\end { frame}
\begin { frame} { Aufgabe der Zustandsverwaltung}
\foreignblockcquote { american} [Kap.8.1.2]{ flutterInAction} { State management is a combination of passing data around the app, but also re-rendering pieces of your app at the right time.}
\foreignblockcquote { american} [Kap.1]{ managingStateInFlutter} { State management is simply a technique, or multiple techniques, used to take care of the changes that occur in your application.}
\end { frame}
\begin { frame} { Aufgabe der Zustandsverwaltung}
\begin { itemize}
\item Verwaltung von Änderungen in der App
\item Neu Rendern von Widgets zur richtigen Zeit
\item Verteilung von Daten innerhalb der App
\item Aufteilung in verschieden Zustandsebenen \autocite { appState}
\end { itemize}
\end { frame}
\begin { frame} { Was ist Flutter?}
\begin { itemize}
\item Flutter ist ein Cross-Plattform-Framework zur Entwicklung von Anwendungen für diverse Plattformen wie iOS und Android \autocite { flutterSupportedPlatforms}
@ -105,7 +121,6 @@
\end { columns}
\end { frame}
\begin { frame} { Widgets in Flutter}
\begin { itemize}
\item \textcquote [Kap.1.9] { flutterInAction} { Everything is a widget}
@ -128,292 +143,343 @@
\end { itemize}
\end { frame}
\begin { frame} { Aufgabe der Zustandsverwaltung}
\foreignblockcquote { american} [Kap.8.1.2]{ flutterInAction} { State management is a combination of passing data around the app, but also re-rendering pieces of your app at the right time.}
\foreignblockcquote { american} [Kap.1]{ managingStateInFlutter} { State management is simply a technique, or multiple techniques, used to take care of the changes that occur in your application.}
\end { frame}
\begin { frame} { Aufgabe der Zustandsverwaltung}
\begin { itemize}
\item Verwaltung von Änderungen in der App
\item Neu Rendern von Widgets zur richtigen Zeit
\item Verteilung von Daten innerhalb der App
\item Aufteilung in verschieden Zustandsebenen \autocite { appState}
\item Anwendungsbeispiele: Anmeldezustand, Einstellungen, Einkaufskorb in einer Shopping-App
\end { itemize}
\end { frame}
\section { Bewertungskriterien}
\begin { frame} { Anforderungen}
\begin { itemize}
\item Änderbarkeit / Skalierbarkeit
\item Testbarkeit
\item Effizienz
\item Komplexität / Wartbarkeit
\item Verständlichkeit
\item Dokumentierung
\item Strukturbestimmung
\end { itemize}
\end { frame}
\begin { frame} { Änderbarkeit / Skalierbarkeit}
\begin { itemize}
\item Umgang mit wachsender Größe von Zuständen
\item Effektive Vernüpfung verschiedener Zustände
\item Metrik: qualitativ (nicht-/teilweise-/vollständig erfüllt)
\end { itemize}
\end { frame}
\begin { frame} { Testbarkeit}
\begin { frame} { Zustandsverwaltungssysteme}
\begin { itemize}
\item Mitgelieferte Werkzeuge:
\begin { itemize}
\item Testbarkeit der Geschäftslogik
\item Widget-Tests von Widgets, die auf Zustände zugreifen
\item Metrik: qualitativ (nicht-/teilweise-/vollständig erfüllt)
\item setState
\item InheritedWidget
\end { itemize}
\end { frame}
\begin { frame} { Effizienz}
\begin { itemize}
\item Wie effizient orchestriert das System das Neubauen von Widgets?
\item Einbau von Prüfstellen
\item Zählen der Widget-Neubauten an den Prüfstellen
\item Metrik: Anzahl der Neubauten (kleiner ist besser)
\end { itemize}
\end { frame}
\begin { frame} { Komplexität / Wartbarkeit}
\begin { itemize}
\item Messung anhand von Quelltext-Metriken
\item Verwendung des Maintainability-Index
\item Kombiniert verschiedene Metriken \autocite [133] { mi}
\begin { itemize}
\item Halstead-Volumen
\item Zyklomatische Komplexität
\item Anzahl der Quelltextzeilen
\end { itemize}
\item Ergebnis wird auf eine Skala von 0 bis 100 abgebildet (größer ist besser)
\end { itemize}
\end { frame}
\begin { frame} { Verständlichkeit / Lesbarkeit}
\begin { itemize}
\item Werden neue Flutter-fremde Konzepte eingeführt?
\item Gibt es eine nachvollziehbare Struktur?
\item Wird der tiefen Verschachtelung von Widgets entgegengewirkt? (Nesting)
\item Metrik: qualitativ (nicht-/teilweise-/vollständig erfüllt)
\end { itemize}
\end { frame}
\begin { frame} { Dokumentierung}
\begin { itemize}
\item Gibt es eine Entwickler*innen-Dokumentation?
\item Werden die Grundkonzepte erläutert?
\item Gibt es umfangreiche Beispiele?
\item Metrik: qualitativ (nicht-/teilweise-/vollständig erfüllt)
\end { itemize}
\end { frame}
\begin { frame} { Strukturbestimmung}
\begin { itemize}
\item Macht das System Vorgaben an die Struktur / Architektur der Anwendung?
\item Werden diese technisch forciert?
\item Metrik: qualitativ (nicht-/teilweise-/vollständig erfüllt)
\end { itemize}
\end { frame}
\section { Versuchsaufbau}
\begin { frame} { Versuchsaufbau}
\item Pattern:
\begin { itemize}
\item Implementierung einer Beispiel-Anwendung
\item Ziel: Grundlage für die Evaluation anhand der Bewertungskriterien
\item Maintainability Index wird automatisiert erfasst
\item Die Effizienz wird über eine automatisierte Teststrecke gemessen
\begin { itemize}
\item zwei Messstellen: Warenkorb-Button und Anmeldeschalter
\item Business Logic Components (BLoC)
\end { itemize}
\end { itemize}
\end { frame}
\begin { frame} { Demo}
Demonstration
\end { frame}
\section { Ergebnisse}
\begin { frame} { setState}
\item Bibliotheken aufbauend auf dem Provider-Prinzip
\begin { itemize}
\item Verwendung des \texttt { StatefulWidget} zum Speichern des Zustands
\item Zustände müssen im Widget-Baum durchgereicht werden
\item Umsetzung der Beispielanwendung war nicht möglich, da ein Zustand nicht über mehrere Seiten hinweg konsistent gehalten werden konnte
\item Provider
\item Riverpod
\end { itemize}
\end { frame}
\begin { frame} { InheritedWidget}
\item Ansätze aus dem React-Ökosystem
\begin { itemize}
\item Verwendung des \texttt { InheritedWidget} zum Speichern des Zustands
\item Verwendung von \texttt { StatefulWidget} s zum aktualiseren des \texttt { InheritedWidget}
\item Redux
\item MobX
\end { itemize}
\end { itemize}
\end { frame}
\begin { frame} { Ergebnisse: InheritedWidget}
\section { Bewertungskriterien}
\begin { frame} { Anforderungen und Metriken}
\begin { table}
\centering
\begin { tabular} { cc}
\begin { tabular} { c|c}
\hline
Metrik & Ergebnis \\
\textbf { Anforderung} & \textbf { Metrik} \\
\hline
Änderbarkeit/Skalierbarkeit & teilweise erfüllt \\
Testbarkeit & teilweise erfüllt \\
Effizienz & Warenkorb-Button: 8; Anmeldeschalter: 6 \\
Komplexität/Wartbarkeit & 83 \\
Verständlichkeit/Lesbarkeit & nicht erfüllt \\
Dokumentierung & teilweise erfüllt \\
Strukturbestimmung & nicht erfüllt\\
\hline
\end { tabular}
\end { table}
\end { frame}
\begin { frame} { Business Logic Components (BLoC)}
\begin { itemize}
\item Komplette Trennung von Geschäftslogik und Benutzeroberfläche \autocite [17] { Faust}
\item Änderungen und Lesen eines Zustands nur über Streams und Sinks
\item Keine Abhängigkeiten zur Benutzeroberfläche
\item Kein Plattformabhängiger Quelltext in den Zuständen (BLoCs) \autocite { blocTalk}
\end { itemize}
\end { frame}
\begin { frame} { Ergebnisse: BLoC}
\begin { table}
\centering
\begin { tabular} { cc}
Änderbarkeit / Skalierbarkeit & qualitativ \\
\hline
Metrik & Ergebnis \\
Testbarkeit & qualitativ \\
\hline
Änderbarkeit/Skalierbarkeit & vollständig erfüllt \\
Testbarkeit & vollständig erfüllt \\
Effizienz & Warenkorb-Button: 8; Anmeldeschalter: 4 \\
Komplexität/Wartbarkeit & 82 \\
Verständlichkeit/Lesbarkeit & nicht erfüllt \\
Dokumentierung & vollständig erfüllt \\
Strukturbestimmung & teilweise erfüllt\\
Effizienz & Anzahl der Neubauten \\
\hline
\end { tabular}
\end { table}
\end { frame}
\begin { frame} { Provider}
\begin { itemize}
\item Bibliothek basierend auf InheritedWidgets
\item Nutzung von u.a. ChangeNotifier für Zustandsklassen \autocite { stateManagementThesis}
\item Vereinfachung der Erstellung und Benutzung von Zustandsklassen
\item Zugriff auf Zustände via Generic (z.B. \texttt { Provider.of<UserStore>(context)} )
\end { itemize}
\end { frame}
\begin { frame} { Ergebnisse: Provider}
\begin { table}
\centering
\begin { tabular} { cc}
Komplexität / Wartbarkeit & Maintainability-Index \\
\hline
Metrik & Ergebnis \\
Verständlichkeit / Lesbarkeit & qualitativ\\
\hline
Änderbarkeit/Skalierbarkeit & teilweise erfüllt \\
Testbarkeit & vollständig erfüllt \\
Effizienz & Warenkorb-Button: 3; Anmeldeschalter: 4 \\
Komplexität/Wartbarkeit & 83 \\
Verständlichkeit/Lesbarkeit & teilweise erfüllt \\
Dokumentierung & vollständig erfüllt \\
Strukturbestimmung & nicht erfüllt\\
Dokumentierung & qualitativ \\
\hline
Strukturbestimmung & qualitativ\\
\end { tabular}
\end { table}
\end { frame}
\begin { frame} { Riverpod}
% \begin { frame} { Änderbarkeit / Skalierbarkeit}
% \begin { itemize}
% \item Umgang mit wachsender Größe von Zuständen
% \item Effektive Vernüpfung verschiedener Zustände
% \item Metrik: qualitativ (nicht-/teilweise-/vollständig erfüllt)
% \end { itemize}
% \end { frame}
% \begin { frame} { Testbarkeit}
% \begin { itemize}
% \item Testbarkeit der Geschäftslogik
% \item Widget-Tests von Widgets, die auf Zustände zugreifen
% \item Metrik: qualitativ (nicht-/teilweise-/vollständig erfüllt)
% \end { itemize}
% \end { frame}
% \begin { frame} { Effizienz}
% \begin { itemize}
% \item Wie effizient orchestriert das System das Neubauen von Widgets?
% \item Einbau von Prüfstellen
% \item Zählen der Widget-Neubauten an den Prüfstellen
% \item Metrik: Anzahl der Neubauten (kleiner ist besser)
% \end { itemize}
% \end { frame}
% \begin { frame} { Komplexität / Wartbarkeit}
% \begin { itemize}
% \item Messung anhand von Quelltext-Metriken
% \item Verwendung des Maintainability-Index
% \item Kombiniert verschiedene Metriken \autocite [133] { mi}
% \begin { itemize}
% \item Halstead-Volumen
% \item Zyklomatische Komplexität
% \item Anzahl der Quelltextzeilen
% \end { itemize}
% \item Ergebnis wird auf eine Skala von 0 bis 100 abgebildet (größer ist besser)
% \end { itemize}
% \end { frame}
% \begin { frame} { Verständlichkeit / Lesbarkeit}
% \begin { itemize}
% \item Werden neue Flutter-fremde Konzepte eingeführt?
% \item Gibt es eine nachvollziehbare Struktur?
% \item Wird der tiefen Verschachtelung von Widgets entgegengewirkt? (Nesting)
% \item Metrik: qualitativ (nicht-/teilweise-/vollständig erfüllt)
% \end { itemize}
% \end { frame}
% \begin { frame} { Dokumentierung}
% \begin { itemize}
% \item Gibt es eine Entwickler*innen-Dokumentation?
% \item Werden die Grundkonzepte erläutert?
% \item Gibt es umfangreiche Beispiele?
% \item Metrik: qualitativ (nicht-/teilweise-/vollständig erfüllt)
% \end { itemize}
% \end { frame}
% \begin { frame} { Strukturbestimmung}
% \begin { itemize}
% \item Macht das System Vorgaben an die Struktur / Architektur der Anwendung?
% \item Werden diese technisch forciert?
% \item Metrik: qualitativ (nicht-/teilweise-/vollständig erfüllt)
% \end { itemize}
% \end { frame}
\section { Versuchsaufbau}
\begin { frame} { Versuchsaufbau}
\begin { itemize}
\item Bibliothek erweitert den Provider-Ansatz
\item Einführung des StateNotifier für die Zustandsklassen
\item Implementierung einer Beispiel-Anwendung
\item Ziel: Grundlage für die Evaluation anhand der Bewertungskriterien
\item Maintainability Index wird automatisiert erfasst
\item Die Effizienz wird über eine automatisierte Teststrecke gemessen
\begin { itemize}
\item Trennung von Zustandsdaten und Zustandslogik
\item zwei Messstellen: Warenkorb-Button und Anmeldeschalter
\end { itemize}
\item Zugriff auf Zustände über globale Variablen
\end { itemize}
\end { frame}
\begin { frame} { Ergebnisse: Riverpod}
\begin { table}
\begin { frame} { Beispielanwendung }
\begin { figure} [h]%
\centering
\begin { tabular} { cc}
\hline
Metrik & Ergebnis \\
\hline
Änderbarkeit/Skalierbarkeit & vollständig erfüllt \\
Testbarkeit & vollständig erfüllt \\
Effizienz & Warenkorb-Button: 3; Anmeldeschalter: 4 \\
Komplexität/Wartbarkeit & 80 \\
Verständlichkeit/Lesbarkeit & vollständig erfüllt \\
Dokumentierung & vollständig erfüllt \\
Strukturbestimmung & nicht erfüllt\\
\hline
\end { tabular}
\end { table}
\end { frame}
\begin { frame} { Redux}
\begin { itemize}
\item Ansatz stammt aus dem React-Ökosystem
\item Ein Zustand für die gesamte Anwendung
\item Der Gesamtzustand (Store) ist unveränderlich
\item Der Store kann nur durch Reducer ersetzt werden \autocite [Kap.1.3.2f] { redux}
\end { itemize}
\subfloat [\centering Produktliste] { { \includegraphics [width=.2\linewidth] { ../chapters/realisation/product_ list.png} } } %
\qquad
\subfloat [\centering Warenkorb] { { \includegraphics [width=.2\linewidth] { ../chapters/realisation/cart.png} } } %
\caption { Umsetzung der Wireframes in Flutter unter iOS} %
\label { fig:realisation} %
\end { figure}
\begin { figure}
\includegraphics [width=\textwidth] { ../chapters/basics/reduxflow.jpg}
\caption { Datenfluss in Redux \autocite [Kap.1.3.3] { redux} }
\end { figure}
\end { frame}
\begin { frame} { Ergebnisse: Redux}
\begin { table}
\centering
\begin { tabular} { cc}
\hline
Metrik & Ergebnis \\
\hline
Änderbarkeit/Skalierbarkeit & nicht erfüllt \\
Testbarkeit & teilweise erfüllt \\
Effizienz & Warenkorb-Button: 8; Anmeldeschalter: 10 \\
Komplexität/Wartbarkeit & 82 \\
Verständlichkeit/Lesbarkeit & teilweise erfüllt \\
Dokumentierung & vollständig erfüllt \\
Strukturbestimmung & vollständig erfüllt\\
\hline
\end { tabular}
\end { table}
\end { frame}
\begin { frame} { MobX}
\begin { itemize}
\item Ansatz stammt ebenfalls aus dem React-Ökosystem
\item Ziel: Vereinfachung von Ableitungen von Informationen aus dem Anwendungs-Zustand
\end { itemize}
\end { frame}
\begin { frame} { MobX: Grundkonzepte}
\begin { columns}
\column { \dimexpr \linewidth -80mm-18mm}
\blockcquote [130] { mobx} { \begin { itemize} \item Observables [...]
\item Computed Values [...]
\item Reactions [...]
\item Actions [...]
\end { itemize} }
\column { 80mm}
\begin { figure}
\includegraphics [width=80mm] { mobx.png}
\caption { Ablaufdiagramm \autocite { mobxDocs} }
\end { figure}
\end { columns}
\end { frame}
\begin { frame} { Ergebnisse: MobX}
\begin { table}
\centering
\begin { tabular} { cc}
\hline
Metrik & Ergebnis \\
\hline
Änderbarkeit/Skalierbarkeit & vollständig erfüllt \\
Testbarkeit & vollständig erfüllt \\
Effizienz & Warenkorb-Button: 4; Anmeldeschalter: 4 \\
Komplexität/Wartbarkeit & 83 \\
Verständlichkeit/Lesbarkeit & vollständig erfüllt \\
Dokumentierung & vollständig erfüllt \\
Strukturbestimmung & teilweise erfüllt\\
\hline
\end { tabular}
\end { table}
\section { Ergebnisse}
\begin { frame}
\newcommand { \cmark } { \ding { 51} } %
\newcommand { \xmark } { \ding { 55} } %
\begin { longtable} []{ @{ } l|ccccccc@{ } }
Zustandsverwaltung & \rot { Änderbarkeit/Skalierbarkeit} & \rot { Testbarkeit} &
\rot { Effizienz} & \rot { Komplexität/Wartbarkeit} & \rot { Verständlichkeit/Lesbarkeit} &
\rot { Dokumentierung} & \rot { Strukturbestimmung} \\
\midrule
\endhead
ohne Zustandsverwaltung & n. a. & n. a. & 1;2 & 83 & n. a. & n. a. & n.a. \\
\tikzmarkin <2>[hl]{ a} setState & \multicolumn { 7} { c} { nicht umsetzbar} \tikzmarkend { a} \\
Inherited\- Widget & / & \tikzmarkin <4>[hl]{ c} /\tikzmarkend { c} & 8;6 & 83 & \tikzmarkin <3-4>[hl]{ b} \xmark \tikzmarkend { b} & / & \xmark \\
BLoC & \cmark & \cmark & 8;4 & 82 & \tikzmarkin <5-6>[hl]{ d} \xmark \tikzmarkend { d} & \cmark & / \\
Provider & / & \cmark & 3;4 & 83 & / & \cmark & \xmark \\
Riverpod & \cmark & \cmark & 3;4 & 80 & \cmark & \cmark & \xmark \\
Redux & \xmark & / & 8;10 & 82 & / & \cmark & \cmark \\
MobX & \cmark & \cmark & 4;4 & 83 & \cmark & \cmark & / \\
\end { longtable}
\end { frame}
% \begin { frame} { setState}
% \begin { itemize}
% \item Verwendung des \texttt { StatefulWidget} zum Speichern des Zustands
% \item Umsetzung der Beispielanwendung war nicht möglich, da ein Zustand nicht über mehrere Seiten hinweg konsistent gehalten werden konnte
% \end { itemize}
% \end { frame}
% \begin { frame} { InheritedWidget}
% \begin { itemize}
% \item Verwendung des \texttt { InheritedWidget} zum Speichern des Zustands
% \item Verwendung von \texttt { StatefulWidget} s zum aktualiseren des \texttt { InheritedWidget}
% \end { itemize}
% \end { frame}
% \begin { frame} { Ergebnisse: InheritedWidget}
% \begin { table}
% \centering
% \begin { tabular} { cc}
% \hline
% Metrik & Ergebnis \\
% \hline
% Änderbarkeit/Skalierbarkeit & teilweise erfüllt \\
% Testbarkeit & teilweise erfüllt \\
% Effizienz & Warenkorb-Button: 8; Anmeldeschalter: 6 \\
% Komplexität/Wartbarkeit & 83 \\
% Verständlichkeit/Lesbarkeit & nicht erfüllt \\
% Dokumentierung & teilweise erfüllt \\
% Strukturbestimmung & nicht erfüllt\\
% \hline
% \end { tabular}
% \end { table}
% \end { frame}
% \begin { frame} { Business Logic Components (BLoC)}
% \begin { itemize}
% \item Komplette Trennung von Geschäftslogik und Benutzeroberfläche \autocite [17] { Faust}
% \item Änderungen und Lesen eines Zustands nur über Streams und Sinks
% \item Keine Abhängigkeiten zur Benutzeroberfläche
% \item Kein Plattformabhängiger Quelltext in den Zuständen (BLoCs) \autocite { blocTalk}
% \end { itemize}
% \end { frame}
% \begin { frame} { Ergebnisse: BLoC}
% \begin { table}
% \centering
% \begin { tabular} { cc}
% \hline
% Metrik & Ergebnis \\
% \hline
% Änderbarkeit/Skalierbarkeit & vollständig erfüllt \\
% Testbarkeit & vollständig erfüllt \\
% Effizienz & Warenkorb-Button: 8; Anmeldeschalter: 4 \\
% Komplexität/Wartbarkeit & 82 \\
% Verständlichkeit/Lesbarkeit & nicht erfüllt \\
% Dokumentierung & vollständig erfüllt \\
% Strukturbestimmung & teilweise erfüllt\\
% \hline
% \end { tabular}
% \end { table}
% \end { frame}
% \begin { frame} { Provider}
% \begin { itemize}
% \item Bibliothek basierend auf InheritedWidgets
% \item Nutzung von u.a. ChangeNotifier für Zustandsklassen \autocite { stateManagementThesis}
% \item Vereinfachung der Erstellung und Benutzung von Zustandsklassen
% \item Zugriff auf Zustände via Generic (z.B. \texttt { Provider.of<UserStore>(context)} )
% \end { itemize}
% \end { frame}
% \begin { frame} { Ergebnisse: Provider}
% \begin { table}
% \centering
% \begin { tabular} { cc}
% \hline
% Metrik & Ergebnis \\
% \hline
% Änderbarkeit/Skalierbarkeit & teilweise erfüllt \\
% Testbarkeit & vollständig erfüllt \\
% Effizienz & Warenkorb-Button: 3; Anmeldeschalter: 4 \\
% Komplexität/Wartbarkeit & 83 \\
% Verständlichkeit/Lesbarkeit & teilweise erfüllt \\
% Dokumentierung & vollständig erfüllt \\
% Strukturbestimmung & nicht erfüllt\\
% \hline
% \end { tabular}
% \end { table}
% \end { frame}
% \begin { frame} { Riverpod}
% \begin { itemize}
% \item Bibliothek erweitert den Provider-Ansatz
% \item Einführung des StateNotifier für die Zustandsklassen
% \begin { itemize}
% \item Trennung von Zustandsdaten und Zustandslogik
% \end { itemize}
% \item Zugriff auf Zustände über globale Variablen
% \end { itemize}
% \end { frame}
% \begin { frame} { Ergebnisse: Riverpod}
% \begin { table}
% \centering
% \begin { tabular} { cc}
% \hline
% Metrik & Ergebnis \\
% \hline
% Änderbarkeit/Skalierbarkeit & vollständig erfüllt \\
% Testbarkeit & vollständig erfüllt \\
% Effizienz & Warenkorb-Button: 3; Anmeldeschalter: 4 \\
% Komplexität/Wartbarkeit & 80 \\
% Verständlichkeit/Lesbarkeit & vollständig erfüllt \\
% Dokumentierung & vollständig erfüllt \\
% Strukturbestimmung & nicht erfüllt\\
% \hline
% \end { tabular}
% \end { table}
% \end { frame}
% \begin { frame} { Redux}
% \begin { itemize}
% \item Ansatz stammt aus dem React-Ökosystem
% \item Ein Zustand für die gesamte Anwendung
% \item Der Gesamtzustand (Store) ist unveränderlich
% \item Der Store kann nur durch Reducer ersetzt werden \autocite [Kap.1.3.2f] { redux}
% \end { itemize}
% \begin { figure}
% \includegraphics [width=\textwidth] { ../chapters/basics/reduxflow.jpg}
% \caption { Datenfluss in Redux \autocite [Kap.1.3.3] { redux} }
% \end { figure}
% \end { frame}
% \begin { frame} { Ergebnisse: Redux}
% \begin { table}
% \centering
% \begin { tabular} { cc}
% \hline
% Metrik & Ergebnis \\
% \hline
% Änderbarkeit/Skalierbarkeit & nicht erfüllt \\
% Testbarkeit & teilweise erfüllt \\
% Effizienz & Warenkorb-Button: 8; Anmeldeschalter: 10 \\
% Komplexität/Wartbarkeit & 82 \\
% Verständlichkeit/Lesbarkeit & teilweise erfüllt \\
% Dokumentierung & vollständig erfüllt \\
% Strukturbestimmung & vollständig erfüllt\\
% \hline
% \end { tabular}
% \end { table}
% \end { frame}
% \begin { frame} { MobX}
% \begin { itemize}
% \item Ansatz stammt ebenfalls aus dem React-Ökosystem
% \item Ziel: Vereinfachung von Ableitungen von Informationen aus dem Anwendungs-Zustand
% \end { itemize}
% \end { frame}
% \begin { frame} { MobX: Grundkonzepte}
% \begin { columns}
% \column { \dimexpr \linewidth -80mm-18mm}
% \blockcquote [130] { mobx} { \begin { itemize} \item Observables [...]
% \item Computed Values [...]
% \item Reactions [...]
% \item Actions [...]
% \end { itemize} }
% \column { 80mm}
% \begin { figure}
% \includegraphics [width=80mm] { mobx.png}
% \caption { Ablaufdiagramm \autocite { mobxDocs} }
% \end { figure}
% \end { columns}
% \end { frame}
% \begin { frame} { Ergebnisse: MobX}
% \begin { table}
% \centering
% \begin { tabular} { cc}
% \hline
% Metrik & Ergebnis \\
% \hline
% Änderbarkeit/Skalierbarkeit & vollständig erfüllt \\
% Testbarkeit & vollständig erfüllt \\
% Effizienz & Warenkorb-Button: 4; Anmeldeschalter: 4 \\
% Komplexität/Wartbarkeit & 83 \\
% Verständlichkeit/Lesbarkeit & vollständig erfüllt \\
% Dokumentierung & vollständig erfüllt \\
% Strukturbestimmung & teilweise erfüllt\\
% \hline
% \end { tabular}
% \end { table}
% \end { frame}
\section { Fazit}
\begin { frame} { Zusammenfassung}
\begin { itemize}
@ -429,13 +495,6 @@
\item Kleine Anwendungen: InheritedWidget / Provider
\end { itemize}
\end { frame}
\begin { frame} { Ausblick}
\begin { itemize}
\item Ersetzung der Maintainability Index Metrik
\item Evaluation von anderen Zustandsverwaltungssystemen
\item Vergleich mit Zustandsverwaltung unter React
\end { itemize}
\end { frame}
\begin { frame} [noframenumbering,plain,allowframebreaks]{ Quellen}
\AtNextBibliography { \tiny }
\printbibliography [heading=none]
Jonas Franz
3 years ago