Webdev-Haskell/Webdev in Haskell.tex

\documentclass[aspectratio=169,10pt]{beamer}
\usepackage{fontspec}
\usepackage[utf8]{inputenc}
\usepackage[english]{babel}
\usepackage{listings}
\usepackage{tcolorbox}
\usepackage{hyperref}
\usepackage{qrcode}

\newtcolorbox{mybox}{
	%colframe=mycolor,
	colback=gray,
	%boxrule=0.5pt,
	arc=4pt,
	boxsep=0pt,
	left=6pt,
	right=6pt,
	top=6pt,
	bottom=6pt
}

\lstdefinelanguage{Haskelln}{
	language     = Haskell,
	otherkeywords = {=>,->,::,++,!!,|,<-},
}

\lstset{
	frame=none,
	xleftmargin=2pt,
	stepnumber=1,
	numbers=none,
	numbersep=5pt,
	numberstyle=\ttfamily\tiny\color{lightgray},
	belowcaptionskip=\bigskipamount,
	captionpos=b,
	escapeinside={*'}{'*},
	language=Haskelln,
	tabsize=2,
	emphstyle={\bf},
	commentstyle=\it,
	stringstyle=\mdseries\ttfamily\color{green},
	showspaces=false,
	keywordstyle=[1]\color{cyan}\bfseries\ttfamily,
	keywordstyle=[2]\color{orange}\bfseries\ttfamily,
	keywordstyle=[3]\color{yellow}\bfseries\ttfamily,
	keywordstyle=[4]\color{red}\bfseries\ttfamily,
	keywordstyle=[5]\color{purple}\bfseries\ttfamily,
	keywordstyle=[6]\color{blue}\bfseries\ttfamily,
	%keywordstyle=\color{cyan}\ttfamily
	columns=flexible,
	basicstyle=\color{white}\small\ttfamily,
	showstringspaces=false,
	morecomment=[l]\%,
	emptylines=1,
}

% You can set fonts for Latin script here
\setmainfont{FreeSerif}
\setsansfont{FreeSans}
\setmonofont{Fira Mono}

\usetheme{DarkConsole}

\begin{document}
	
	% The metadata of the presentation
	\title{Modernes Webdevolpment in Haskell}
	\subtitle{Am Beispiel des Projektes \texttt{mateamt}}
	\author[]{nek0 - \href{mailto:nek0@nek0.eu}{nek0@nek0.eu}}
	%\institute{Datenspuren 2022~--~Berechnete Welt}
	\date{18. September 2022} % Replace with date of the presentation

\begin{frame}[plain]
	\maketitle
\end{frame}

%\begin{frame}{Gliederung}
%	\tableofcontents
%\end{frame}

\section{Moderne Webentwicklung}

\begin{frame}{\secname}
	\begin{center}
		Typische Unterteilung
		
		\vspace{.5cm}
		\onslide<2->{
		\begin{minipage}{0.45\linewidth}
			\begin{mybox}
				\begin{center}
					\textbf{Backend}
				\end{center}
			\onslide<3->{
				Typische Sprachen:
			}
			\begin{itemize}
				\item<4-> PHP
				\item<5-> Java
				\item<6-> Ruby
				\item<7-> Python
			\end{itemize}
			\end{mybox}
		\end{minipage}
		\begin{minipage}{0.45\linewidth}
			\begin{mybox}
				\begin{center}
					\textbf{Frontend}
				\end{center}
			\onslide<8->{
			Verwendete Sprachen:
			}
			\begin{itemize}
				\item<8-> HTML
				\item<9-> CSS
				\item<10-> JavaScript
			\end{itemize}
			\onslide<11->{
				Häufig verwendete Frameworks:
				\begin{itemize}
					\item<12-> React
					\item<13-> Bootstrap
					\item<14-> jQuery
				\end{itemize}
			}
			\end{mybox}
		\end{minipage}
		}
	\end{center}
\end{frame}

\section{Haskell}

\begin{frame}{\secname}
	\begin{center}
		\includegraphics[width=.2\linewidth]{logo.png}
	\end{center}
	\begin{minipage}{.45\linewidth}
		\begin{itemize}
			\item<2-> Rein funktional
			\item<3-> Nicht-strikt evaluiert
			\item<4-> Stark statisch typisiert
			\item<5-> Volle Typinferenz
		\end{itemize}
	\end{minipage}
	\begin{minipage}{.45\linewidth}
		\begin{itemize}
			\item<6-> Big Data
			\item<7-> Banken- und Finanzsektor
			\item<8-> Wissenschaft
		\end{itemize}
	\end{minipage}
\end{frame}

\subsection{Hauptunterschiede zu imperativer Programmierung}

\begin{frame}{\subsecname}
	\begin{itemize}
		\item<2-> Strikte Trennung zwischen reinen Berechnungen und Seiteneffekten
		\item<3-> Unveränderliche Variablen
		\item<4-> Keine Schleifen
		\item<5-> Kein State
	\end{itemize}
\end{frame}

\section{Vorteile von Haskell in der Webentwicklung}

\begin{frame}{\secname}
	\begin{itemize}
		\item<2-> Serialisierung und Deserialisierung von Daten unkompliziert
		\item<3-> Datenverarbeitung kann leichter auf Korrektheit geprüft werden
		\item<4-> Webanwendungen sind in der Regel zustandslos
		\item<5-> Konkurrente Anfragen/Berechungen relativ leicht möglich
	\end{itemize}
\end{frame}

\section{Konventionen beim \texttt{mateamt} im Gegensatz zum \texttt{yammat}}

\begin{frame}{\secname}
	\begin{center}
	\begin{minipage}{.45\linewidth}
		\begin{mybox}
		\texttt{mateamt}\\
		\begin{itemize}
			\item<2-> Programmiersprache: Haskell
			\item<4-> Stellt nur ein Backend dar
			\item<6-> Microservice-Architektur
		\end{itemize}
		\end{mybox}
	\end{minipage}
	\begin{minipage}{.45\linewidth}
		\begin{mybox}
		\texttt{yammat}\\
		\begin{itemize}
			\item<3-> Programmiersprache: Haskell
			\item<5-> Front- und Backend
			\item<7-> Monolithische Architektur
		\end{itemize}
		\end{mybox}
	\end{minipage}
	\end{center}
\end{frame}

\section{Das Frontend des \texttt{mateamt}es}

\begin{frame}{\secname}
	\begin{itemize}
		\item<2-> Zukünftige Benutzer des \texttt{mateamt}es sind ausdrücklich eingeladen eigene Frontends/Clients zu schreiben
		\item<3-> Zur Unterstützung bei der Entwicklung wird folgendes angeboten:
		\begin{itemize}
			\item<4-> Beschreibung der API nach OpenAPI 3.0
			\item<5-> Swagger UI
		\end{itemize}
		\item<6-> Ein Referenzclient (der \texttt{matebeamte}) ist bereits in Arbeit
	\end{itemize}
\end{frame}

\section{Der Quelltext}

\begin{frame}{Codetour}
	\begin{center}
		Bitte schnallen Sie sich an…
	\end{center}
\end{frame}

\begin{frame}{Code-Repositories}
	\begin{center}
	\begin{minipage}{.45\linewidth}
		\begin{center}
			\qrcode{https://gitea.nek0.eu/nek0/mateamt}\\
			\href{https://gitea.nek0.eu/nek0/mateamt}{gitea.nek0.eu/nek0/mateamt}
		\end{center}
	\end{minipage}
	\begin{minipage}{.45\linewidth}
		\begin{center}
			\qrcode{https://gitea.nek0.eu/nek0/matebeamter}\\
			\href{https://gitea.nek0.eu/nek0/matebeamter}{gitea.nek0.eu/nek0/matebeamter}
		\end{center}
	\end{minipage}
	\end{center}
\end{frame}

\section*{Abschluss}

\begin{frame}[plain, noframenumbering]
	\begin{center}
		\Huge Fragen? Fragen!
	\end{center}
\end{frame}

\begin{frame}[plain, noframenumbering]
	\begin{center}
		{\Huge Vielen Dank für die Aufmerksamkeit!}\\

		\vspace{1cm}

		Diese Presentation steht zum Download bereit unter:
		
		\vspace{.25cm}
		\qrcode{https://gitea.nek0.eu/nek0/Webdev-Haskell}\\
		\url{https://gitea.nek0.eu/nek0/Webdev-Haskell}
	\end{center}
\end{frame}

\end{document}