You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
444 lines
16 KiB
444 lines
16 KiB
\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}
|
|
\section{Versuchsaufbau}
|
|
\begin{frame}{Versuchsaufbau}
|
|
\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}
|
|
\end{itemize}
|
|
\end{frame}
|
|
\begin{frame}{Demo}
|
|
Demonstration
|
|
\end{frame}
|
|
\section{Ergebnisse}
|
|
\begin{frame}{setState}
|
|
\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
|
|
\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}
|
|
\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}
|
|
|
|
|