\documentclass[aspectratio=169]{beamer}

\usepackage[utf8]{inputenc}
\usepackage[T1]{fontenc}
\usepackage{microtype}

\usepackage[ngerman]{babel}
\usepackage{tabularx}
\usepackage{graphicx}
\usepackage{transparent}
\usepackage{csquotes}
\usepackage{tikz}
\usepackage[natbib=true,  style=alphabetic,dateabbrev=false]{biblatex}
\addbibresource{../bibliography.bib}
\usetikzlibrary{positioning}
\usetikzlibrary{matrix}
\usetikzlibrary{arrows}
\usetikzlibrary{fit}

\usetheme{metropolis}
 
\title{Evaluation von Zustandsverwaltungssystemen für das mobile Cross-Plattform-Framework Flutter}
\subtitle{Kolloquium}
\date{22.~April~2022}

\author{Jonas Franz}
\institute{Hochschule Darmstadt -- Fachbereich Informatik\\Kooperativer Studiengang Informatik\\Referent: Prof. Dr. Kai Renz\\Koreferent: Prof. Dr. Hans-Peter Wiedling}

\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 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
        \item Konstruktion von Anforderungen
        \item Ableitung von Bewertungskriterien
        \item Erstellung eines Versuchsaufbaus
        \item Durchführung und Bewertung
    \end{enumerate}
\end{frame}

\section{Grundlagen}
\begin{frame}{Grundlagen}
    \begin{itemize}
        \item Was ist Flutter?
        \item Wie funktioniert Flutter?
        \item Was ist die Aufgabe der Zustandsverwaltung in Flutter?
    \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} 
        \item Ein Quelltext-Basis für alle Plattformen
        \item Ziel: Reduzierung des Aufwands bei der Entwicklung
    \end{itemize}
\end{frame}

\begin{frame}{Wie funktioniert Flutter?}
    \begin{columns}[onlytextwidth,T]
        \column{\dimexpr\linewidth-50mm-3mm}
        \begin{itemize}
            \item Flutter ist ein deklaratives UI-Toolkit
            \item $\Rightarrow$ Es wird nur eine \textquote{Bauanleitung} für verschiedene Zustände definiert
            \item Die Benutzeroberfläche wird anhand von sogenannten Widgets zusammengesetzt
            \item $\Rightarrow$ Es entsteht eine Baumstruktur aus verschiedenen Widgets
        \end{itemize}
        \column{50mm}
        \begin{figure}
            \includegraphics[width=50mm]{../chapters/basics/flutter_tree.png}
            \caption{Flutter Widget-Tree (eigene Darstellung)}
        \end{figure}
    \end{columns}
\end{frame}


\begin{frame}{Widgets in Flutter}
        \begin{itemize}
            \item \textcquote[Kap.1.9]{flutterInAction}{Everything is a widget}
            \item \texttt{StatelessWidget}
            \begin{itemize}
                \item kein eigener Zustand
                \item Zustand wird über Konstruktorparameter übergeben
            \end{itemize}
            \item \texttt{StatefulWidget}
            \begin{itemize}
                \item Verwaltet eigenen Zustand
                \item kann eigenen Zustand selbstständig verändern
            \end{itemize}
            \item \texttt{InheritedWidget}
            \begin{itemize}
                \item andere Widgets können auf den Zustand zugreifen
                \item zugreifende Widgets ändern sich, falls sich der Zustand
                \item eigener Zustand kann nicht selbstständig verändert werden
            \end{itemize}
        \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}
\begin{frame}[noframenumbering,plain,allowframebreaks]{Quellen}
    \AtNextBibliography{\tiny}
    \printbibliography[heading=none]
\end{frame}

\end{document}