Add infrastructure for MobX

pull/3/head
Jonas Franz 2 years ago
parent 8064e3e065
commit e7153f7b26
  1. 8
      chapters/basics/state-management.tex
  2. 3
      chapters/evaluation/evaluation.tex
  3. 27
      chapters/evaluation/mobx.tex
  4. 2
      chapters/evaluation/redux.tex
  5. 3
      thesis.tex

@ -222,7 +222,7 @@ Damit wird dann auch das dritte Prinzip umgesetzt. Ein \textit{Reducer} stellt n
Für Dart wurde dies mit der \texttt{redux} Bibliothek umgesetzt. Ähnlich wie bei Riverpod wird hier noch eine zusätzliche Bibliothek benötigt, die Redux für das Flutter-Widget-System anwendbar macht. Dafür wird \texttt{flutter\_redux} verwendet. Diese adaptiert das Prinzip der Provider-Bibliothek für Redux-Stores. So wird der Store mittels eines Provider-Widget über die Widget-Tree für nachgelagerte Widgets zur Verfügung gestellt. Auf den Store zugegriffen wird über Selektoren, welche den benötigten Teil des globalen Zustands eingrenzen und per Callback-Funktion zurückgeben. Somit wird über diese Selektoren auch die Verändunger der Widgets ausgelöst, wenn sich der entsprechende Teil des globalen Zustands ändert.
\subsection{MobX}
\label{sec:mobx}
MobX ist wie Redux ebenfalls ein Ansatz, der ursprünglich aus dem React-Ökosystem stammt. MobX stellt sich dabei die Aufgabe, es zu vereinfachen automatisch diverse Informationen aus dem Anwendungs-Zustand abzuleiten. Um dies zu erreichen, gibt es bei MobX fünf grundlegende Konzepte:
\blockquote[{\cite[S.130]{mobx}}]{\begin{itemize}
@ -242,8 +242,8 @@ Actions werden wie bei Redux hier ebenfalls verwendet, um Änderungen am Zustand
Observables, Computed Values und Actions werden dabei oft in Klassen zu einem Store zusammengefasst. Die Instanzen dieser Stores müssen dabei über einen Service Locator ähnlich wie bei Riverpod in die Widgets injiziert werden, damit diese den Store mithilfe von Observern nutzen können.
\subsection{GetIt}
%\subsection{GetIt}
Der Ansatz mit GetIt kombiniert diverse bereits eingeführte Konzepte miteinander. GetIt ansich ist ein Service-Locator. Ein Service Locator bietet eine zentrale Stelle, an der alle benötigten Komponenten registriert werden und abgerufen werden können. Dieser Service Locator wird nun mit dem bereits eingeführten Konzept des ChangeNotifier und von StatefulWidgets verknüpft. \autocite[Kap.4]{managingstateinflutter} Dazu wird der Zustand mittels einer ChangeNotifier-Klasse modelliert und anschließend über GetIt an die Widgets übergeben, die den Zustand benötigen. Diese Widgets müssen StatefulWidgets sein und registrieren bei der ChangeNotifier-Instanz einen Listener, welcher aufgerufen werden soll, wenn sich der Zustand ändert. Bei einer solchen Zustandsänderung, wird im StatefulWidget die \texttt{setState}-Methode aufgerufen, welche zum Neubauen des Widgets führt.
%Der Ansatz mit GetIt kombiniert diverse bereits eingeführte Konzepte miteinander. GetIt ansich ist ein Service-Locator. Ein Service Locator bietet eine zentrale Stelle, an der alle benötigten Komponenten registriert werden und abgerufen werden können. Dieser Service Locator wird nun mit dem bereits eingeführten Konzept des ChangeNotifier und von StatefulWidgets verknüpft. \autocite[Kap.4]{managingstateinflutter} Dazu wird der Zustand mittels einer ChangeNotifier-Klasse modelliert und anschließend über GetIt an die Widgets übergeben, die den Zustand benötigen. Diese Widgets müssen StatefulWidgets sein und registrieren bei der ChangeNotifier-Instanz einen Listener, welcher aufgerufen werden soll, wenn sich der Zustand ändert. Bei einer solchen Zustandsänderung, wird im StatefulWidget die \texttt{setState}-Methode aufgerufen, welche zum Neubauen des Widgets führt.
\subsection{Binder}
%\subsection{Binder}

@ -20,6 +20,7 @@ Dieser Ansatz konnte nicht die Mindestanforderungen an die Beispielanwendung ums
\input{chapters/evaluation/provider.tex}
\input{chapters/evaluation/riverpod.tex}
\input{chapters/evaluation/redux.tex}
\input{chapters/evaluation/mobx.tex}
\newpage
\section{Übersicht}
@ -41,7 +42,7 @@ Dieser Ansatz konnte nicht die Mindestanforderungen an die Beispielanwendung ums
Provider & / & \cmark & 3;4 & 83 & / & \cmark & \xmark \\
Riverpod & \cmark & \cmark & 3;4 & 80 & \cmark & \cmark & \xmark \\
Redux & \xmark & / & 8;10 & 82 & / & \cmark & \cmark \\
MobX & TBD & TBD & TBD & TBD & TBD & TBD & TBD \\
MobX & TBD & TBD & 4;4 & 83 & TBD & TBD & TBD \\
\bottomrule
\multicolumn{8}{c}{Legende: \cmark=vollständig erfüllt; /=teilweise erfüllt; \xmark=nicht erfüllt;}\\
\multicolumn{8}{c}{n.a. = nicht anwendbar}

@ -0,0 +1,27 @@
\section{MobX}
\label{eval:mobx}
MobX ist ähnlich wie Redux eine Bibliothek, welche auf Ansätzen aus dem React-Umfeld basiert. Die Grundlagen dazu werden in \autoref{sec:mobx} behandelt.
\subsection{Implementierung}
Für die Implementierung mit MobX werden die Bibliotheken mobx in der Version 2.0.6+1 und flutter\_mobx in der Version 2.0.4 genutzt.
\subsection{Bewertung}
Im folgenden Abschnitt wird die Implementierung mit MobX \autocite[branch=mobx]{repo} anhand der definierten Bewertungskriterien bewertet.
\paragraph{\nameref{sec:changeablility}}
\paragraph{\nameref{sec:testability}}
\paragraph{\nameref{sec:efficiency}} Nach der Ausführung der Teststrecke, ergaben die Zähler folgendes Ergebnis:
\lstinputlisting[caption={Anzahl der Render-Vorgänge bei MobX}]{results/mobx/benchmarks.txt}
\paragraph{\nameref{sec:complexity}} Die Auswertung der Metriken (vgl. \autoref{metrics:mobx}) ergab eine \ac{mi} von 83 für das gesamte Projekt.
\paragraph{\nameref{sec:readability}}
\paragraph{\nameref{sec:documentation}}
\paragraph{\nameref{sec:structure}}

@ -1,7 +1,7 @@
\section{Redux}
\label{eval:redux}
Riverpod stellt eine externe Bibliothek zur Zustandsverwaltung dar, welche das Konzept von Provider erweitert und laut eigenen Angaben verbessert. Die Grundlagen dazu sind im \autoref{sec:redux} nachzuvollziehen.
Riverpod stellt eine externe Bibliothek zur Zustandsverwaltung dar, welche auf Ansätzen aus dem React-Umfeld basiert. Die Grundlagen dazu sind im \autoref{sec:redux} nachzuvollziehen.
\subsection{Implementierung}

@ -116,7 +116,8 @@
\input{results/bloc/metrics.tex}\newpage
\input{results/provider/metrics.tex}\newpage
\input{results/riverpod/metrics.tex}\newpage
\input{results/redux/metrics.tex}
\input{results/redux/metrics.tex}\newpage
\input{results/mobx/metrics.tex}
%*************************************************************************
% Other Stuff in the Back
%*************************************************************************

Loading…
Cancel
Save