diff --git a/presentation/mobx.png b/presentation/mobx.png new file mode 100644 index 0000000..c0d8304 Binary files /dev/null and b/presentation/mobx.png differ diff --git a/presentation/presentation.tex b/presentation/presentation.tex index e0c35a3..5f08050 100644 --- a/presentation/presentation.tex +++ b/presentation/presentation.tex @@ -290,11 +290,155 @@ \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} + \item Fast alle Systeme konnten evaluiert werden + \item Metriken waren größtenteils aufschlussreich + \item Riverpod und MobX haben die besten Bewertungen erzielt + \end{itemize} +\end{frame} +\begin{frame}{Empfehlungen} + \begin{itemize} + \item Große Anwendungen: MobX + \item Mittelgroße Anwendungen: Riverpod + \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] \end{frame} - \end{document}