\documentclass{article}

\usepackage{graphicx}
\usepackage{setspace}
\usepackage[utf8]{inputenc}
\usepackage{geometry}
\graphicspath{{images/}}

\title{Fractal Generator}
\date{12.05.2022}
\author{Florian Blum, Leonard Schütz}
\geometry{
    a4paper,
    left=20mm,
    right=20mm,
    top=30mm,
    bottom=30mm
}

\begin{document}

\pagenumbering{gobble}
\maketitle
\newpage
\pagenumbering{arabic}

\doublespacing
\tableofcontents
\singlespacing

\newpage

\section{Vision}

The fractal generator should allow an user to explore a fractal image via the web.
Formulas for the fractal generation must be drawn from the Mandelbrot set.
Views can be saved and loaded from a persistent data instance.
The web backend is loadbalanced for better workload distribution.

\section{Technologies}
\begin{itemize}
    \item Traefik
    \item Node.js
    \item Docker
    \item Mongodb
    \item HTML
    \item CSS
\end{itemize}

\subsection{Frontend}
The frontend displays the fractal images and sends data to the backend over it's local web socket.
The frontend uses simple HTML + CSS and JavaScript. 
Some user action outputs are evaluated directly in the frontend via JavaScript.
Users can load and store fractal views via the UI. 
The local websocket requests the prefered image data from the backend or sends the to be stored image view.

\subsection{Backend}
The backend is the heart of the application which calculates the fractal images. 
All communication must go through the backend. 
The backend uses Node.js with Express as web app framework and the mongodb driver the database operations.
Express handles all requests from the frontend websocket.

\subsection{Loadbalancer}
The loadbalancer distributes traffic sent from the frontend to the backend instances.
Here Traefik is used in combination with Docker for easy deployment. 
Traefik autodiscovers the docker backend instances and routes / loadbalances incoming traffic to one of the backend apps.

\subsection{Database}
The database stores the saved fractal presets. Here Mongodb is used together with the official docker image.
Mongodb allows for fast querys of the stored json objects. The database is not behind the loadbalancer.
Both backend web services can establish a connection for data exchange.

\newpage

\section{Design Decisions}

\subsection*{NoSQL}
Because the database is built simple and basically stores a JSON object the usage of NoSQl seemd apropriate.
The data model does not show any referential relations which lead to a decision against SQL.
NoSQL work perfect for a single JSON object colletion of fractal image data.

\subsection*{ExpressJS}
Express allows for easy route management and the teammembers are familiar with the technology.
The implemented frontend socket offers good integration with ExpressJS.
ExpressJS is also good supported from the Node.js site and a precise documentation is available.

\subsection*{Front End Rendering}
The calculations for navigation through the fractal view were implemented in the frontend.
This was done to reduce the workload and minimize loading times. 
The local client does calculate the shift in the fractal view.

\section{Architecture}


\begin{figure}[h]
    \includegraphics[width=\textwidth]{images/architecture.png}
    \caption{Architecture model}
\end{figure}

\newpage

\section{Appendix}
\begin{appendix}
    \listoffigures
    \listoftables
\end{appendix}

\end{document}
