diff --git a/presentation/presentation.tex b/presentation/presentation.tex index 5f08050..2d69117 100644 --- a/presentation/presentation.tex +++ b/presentation/presentation.tex @@ -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{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{frame}{Zustandsverwaltungssysteme} +\begin{itemize} + \item Mitgelieferte Werkzeuge: \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 - \end{itemize} + \item setState + \item InheritedWidget \end{itemize} -\end{frame} -\begin{frame}{Demo} - Demonstration -\end{frame} -\section{Ergebnisse} -\begin{frame}{setState} + \item Pattern: \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 Business Logic Components (BLoC) \end{itemize} -\end{frame} -\begin{frame}{InheritedWidget} + \item Bibliotheken aufbauend auf dem Provider-Prinzip \begin{itemize} - \item Verwendung des \texttt{InheritedWidget} zum Speichern des Zustands - \item Verwendung von \texttt{StatefulWidget}s zum aktualiseren des \texttt{InheritedWidget} + \item Provider + \item Riverpod \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)} + \item Ansätze aus dem React-Ökosystem \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} + \item Redux + \item MobX \end{itemize} +\end{itemize} \end{frame} -\begin{frame}{Ergebnisse: BLoC} + + +\section{Bewertungskriterien} +\begin{frame}{Anforderungen und Metriken} \begin{table} \centering - \begin{tabular}{cc} + \begin{tabular}{c|c} + + \hline + \textbf{Anforderung} & \textbf{Metrik} \\ + \hline + \hline + Ä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(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} - \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{frame}{Beispielanwendung} +\begin{figure}[h]% + \centering + \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(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]