From 56a46d371a16b0e1b17a297d4fe0936255027b02 Mon Sep 17 00:00:00 2001 From: Jonas Franz Date: Sun, 20 Mar 2022 17:05:04 +0100 Subject: [PATCH] Update presentation --- bibliography.bib | 8 ++ presentation/presentation.tex | 165 ++++++++++++++++++++++++++++++++-- 2 files changed, 167 insertions(+), 6 deletions(-) diff --git a/bibliography.bib b/bibliography.bib index 00e396c..62ace1d 100644 --- a/bibliography.bib +++ b/bibliography.bib @@ -316,4 +316,12 @@ url = {https://git.jonasfranz.software/KoSI/thesis_shop} urldate = {2022-02-25}, } +@misc{appState, + author = {{Google LLC}}, + title = {Differentiate between ephemeral state and app state}, + year = {2022}, + url = {https://docs.flutter.dev/development/data-and-backend/state-mgmt/ephemeral-vs-app}, + urldate = {2022-03-19}, +} + @Comment{jabref-meta: databaseType:bibtex;} diff --git a/presentation/presentation.tex b/presentation/presentation.tex index f775ed5..7f580d4 100644 --- a/presentation/presentation.tex +++ b/presentation/presentation.tex @@ -10,7 +10,7 @@ \usepackage{transparent} \usepackage{csquotes} \usepackage{tikz} -\usepackage[natbib=true,dateabbrev=false]{biblatex} +\usepackage[natbib=true, style=alphabetic,dateabbrev=false]{biblatex} \addbibresource{../bibliography.bib} \usetikzlibrary{positioning} \usetikzlibrary{matrix} @@ -36,6 +36,8 @@ \begin{itemize} \item Einführung \item Grundlagen + \item Bewertungskriterien + \item Versuchsaufbau \item Ergebnisse \item Fazit \end{itemize} @@ -43,28 +45,179 @@ \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]