Webdev-Haskell/Webdev in Haskell.tex

265 lines
6.1 KiB
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}
\onslide<2->{
Typische Unterteilung
\vspace{.5cm}
\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}