\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}