KoSI
/
thesis
1
0
Fork 0
Code Pull Requests Releases Activity

Add backup slides
continuous-integration/drone/push Build is failing
Details

Browse Source
main
Jonas Franz 3 years ago
parent 6cc2e0ed33
commit d38781795f
1 changed files with 261 additions and 246 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 507
      presentation/presentation.tex

507
presentation/presentation.tex
Unescape View File

@ -19,9 +19,17 @@
\usepackage{xparse} % http://ctan.org/pkg/xparse
\NewDocumentCommand{\rot}{O{45} O{1em} m}{\makebox[#2][l]{\rotatebox{#1}{#3}}}%
\usepackage{beamerthemesplit}
\usepackage{amssymb}% http://ctan.org/pkg/amssymb
\usepackage{pifont}% http://ctan.org/pkg/pifont
\newcommand{\backupbegin}{
\newcounter{finalframe}
\setcounter{finalframe}{\value{framenumber}}
}
\newcommand{\backupend}{
\setcounter{framenumber}{\value{finalframe}}
}
\usepackage[beamer,customcolors]{hf-tikz}
@ -194,66 +202,6 @@
\end{tabular}
\end{table}
\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{itemize}
@ -290,196 +238,17 @@
\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 & / \\
Inherited\-Widget & / & \tikzmarkin<4>[hl]{c}/\tikzmarkend{c} & 8;6 & 83 & \tikzmarkin<3-4,7>[hl]{b}\xmark\tikzmarkend{b} & / & \xmark \\
BLoC & \cmark & \cmark & 8;4 & 82 & \tikzmarkin<5-6>[hl]{d}\xmark\tikzmarkend{d} & \cmark & \tikzmarkin<6>[hl]{e}/\tikzmarkend{e} \\
Provider & \tikzmarkin<8>[hl]{g}/\tikzmarkend{g} & \cmark & 3;4 & 83 & \tikzmarkin<7>[hl]{f}/\tikzmarkend{f} & \cmark & \xmark \\
Riverpod & \tikzmarkin<8>[hl]{h}\cmark\tikzmarkend{h} & \cmark & 3;4 & 80 & \cmark & \cmark & \xmark \\
Redux & \tikzmarkin<9-10>[hl]{i}\xmark\tikzmarkend{i} & / & 8;10 & 82 & / & \cmark & \tikzmarkin<10>[hl]{j}\cmark\tikzmarkend{j} \\
MobX & \tikzmarkin<11>[hl]{k}\cmark\tikzmarkend{k} & \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}
@ -499,5 +268,251 @@
\AtNextBibliography{\tiny}
\printbibliography[heading=none]
\end{frame}
\backupbegin
\appendix
\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}
\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}
\backupend
\end{document}

Write Preview
Loading…
Cancel
Save